Работа с границами на CSS

1. Каскадные таблицы стилей CSS

10 класс. Раздел 4: Web-проектирование
Каскадные таблицы
стилей CSS
10.4.2.2 использовать CSS при
разработке web-страниц
урок 15
1

2. Работа с границами на CSS

Для добавления границ элементам применяются 3
свойства:
border-width задает толщину границы (px или pt),
border-color задает цвет,
border-style задает тип границы:
solid (сплошная линия),
dotted (граница в виде точек),
dashed (граница в виде черточек),
ridge (выпуклая граница),
double (двойная граница),
groove (вогнутая граница),
inset (рамка),
outset (рамка)
none (отменяет границу).
2

3. Работа с границами на CSS

• Свойство-сокращение для границ
• Граница для отдельных сторон
• Скругленные уголки
• Разные скругления для разных углов
(Четыре значения, Два значения, Три
значения)
http://old.code.mu/books/css/osnovy-raboty-sossylkami-i-granicami-cherez-css-dlyanovichkov.html
3

4. Вставка комментариев на web-страницу

Комментарии в HTML оформляются
следующим образом:
сначала уголок, знак ! и два дефиса <!--, потом текст комментария, а потом
два дефиса и уголок - -->
<!-- текст комментария,
на web-странице
не отображается -->
4

5. Вставка комментариев CSS

5
Вставка комментариев CSS
В CSS можно ставить комментарии.
Они
оформляются
следующим
образом:
слеш и звездочка /*, потом текст
комментария, потом звездочка и
слеш */.
/* текст комментария,
который не отображается */

6. Выбор элемента по уникальному id

6
Выбор элемента по уникальному id
Данный способ может вам понадобится в такой
ситуации: вам необходимо для всех абзацев
поставить красный цвет, а конкретно для этого
абзаца – зеленый.
Нужному элементу дается атрибут id, который
содержит в себе уникальное имя нашего тега
(другого id с таким именем на странице быть не
должно - будет конфликт). Если мы дадим ему, к
примеру, имя test, тогда в CSS мы сможем
обратиться к нему таким образом: #test - то есть
сначала пишется символ "решетка", а затем - то
имя, которое мы записали в атрибут id.

7. Выбор элемента по уникальному id

7

8. Атрибут cellspacing тега <table>

8
Атрибут cellspacing тега <table>
Вы обратили внимание на то, что между
ячейками есть некоторое расстояние, из-за
которого видно то, что каждая ячейка имеет свою
границу? Это расстояние регулируется атрибутом
cellspacing. При этом, если мы не напишем этот
атрибут, то его значение будет совсем не ноль (в
этом случае все ячейки слиплись бы друг с
другом). То есть, атрибут cellspacing по
умолчанию имеет некоторое ненулевое значение,
из-за которого ячейки не слипаются (это
расстояние равно нескольким пикселям).
<table border="1" cellspacing="10">

9. Атрибут cellpadding тега <table>

9
Атрибут cellpadding тега <table>
<table border="1" cellpadding="20">
Атрибут
cellpadding
задает отступ
между текстом и
границей ячейки.

10. Практическая работа

10
Практическая работа
Задание в папке «Общая»
в файле
«10 класс (урок 15) Прак работа»