На этой странице:
![]() Рамка выводится поверх фона элемента. Если в рамке есть разрывы (например, рамка пунктирная), то через разрывы виден фон. |
Каждый элемент имеет четыре рамки, которые ограничивают своими внешними краями фон элемента. Каждая рамка имеет три свойства: стиль, ширину и цвет. Для верхней рамки имена этих свойств имеют вид:
Для каждого из трёх свойств рамок имеется обобщённое свойство,
например, для ширины — |
![]()
Цвет рамки по умолчанию совпадает с цветом текста элемента
(с его свойством |
Для каждой стороны коробки элемента предусмотрено отдельное свойство, при помощи которого можно задавать стиль, ширину и цвет рамки, соответственно, сверху, справа, снизу и слева:
Наконец, есть самое общее свойство Получается, что с рамками элемента связано 21 стилевое свойство. |
Стиль — самый важный параметр рамки. Если он не задан,
рамки не будет, ведь по умолчанию стиль имеет значение
Значение |
Ниже приводятся образцы рамок каждого стиля. Дополнительно задана ширина в 10 пикселов (правило для ширины в кодах опущено). |
У абзаца верхняя рамка со стилем |
|
У абзаца верхняя рамка со стилем |
|
У абзаца верхняя рамка со стилем |
|
У абзаца верхняя рамка со стилем |
|
У абзаца рамки со стилем |
|
У абзаца рамки со стилем |
|
У абзаца рамки со стилем |
|
У абзаца рамки со стилем |
|
В качестве примера рассмотрим правило: border-style:dotted solid dashed; border-color:olive; /* цвет рамок */
По правилу четырёх сторон недостающий стиль слева повторяет стиль
справа ( Для этого абзаца задан стиль рамки, приведённый выше. |
|
Размеры, задаваемые ключевыми словами Ниже приводятся несколько примеров. |
|
У абзаца рамки с шириной |
P { border-style:solid; border-top-width:thin; border-right-width:thin; border-bottom-width:thin; border-left-width:thin; } |
У абзаца рамки с шириной |
P { border-style:solid; border-top-width:medium; border-right-width:medium; border-bottom-width:medium; border-left-width:medium; } |
У абзаца рамки с шириной |
P { border-style:solid; border-top-width:thick; border-right-width:thick; border-bottom-width:thick; border-left-width:thick; } |
У абзаца рамки с шириной |
P { border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; } |
В качестве примера рассмотрим определение: P { border-style:solid; border-width:2px 20px; } Результат: Для этого абзаца заданы правила, приведённые выше. |
|
Значение Ниже приводятся несколько примеров. |
|
Для каждой рамки в этом абзаце задан свой собственный цвет. |
P { border-style:solid; border-width:10px; border-top-color:red; border-right-color:rgb(0,0,255); border-bottom-color:#ffbf00; border-left-color:lime; } |
Для рамки задан только стиль. Её цвет совпадает
с цветом текста, а ширина имеет значение |
P { color:maroon; border-style:solid; } |
В качестве примера рассмотрим определение: P { border-style:solid; border-width:2px 20px; border-color:blue red black; } Результат: Для этого абзаца заданы правила, приведённые выше. |
|
В качестве примера рассмотрим определение: P { color:black; border-top:solid; border-right:solid 10px; border-bottom:dotted 10px red; border-left: blue 20px; } Результат: Для этого абзаца заданы правила, приведённые выше. |
Порядок следование свойств в наборе не важен, кроме того, отдельные свойства можно опускать, но только не стиль рамки — нет стиля, нет рамки. |
В качестве примера рассмотрим определение: P { color:black; border:2px solid red; } Результат: Для этого абзаца задано стилевое определение, приведённое выше. |
Заданные значения применяются ко всем четырём сторонам рамки. Порядок следование свойств в наборе не важен, кроме того, отдельные свойства можно опускать, но только не стиль рамки — нет стиля, нет рамки. |
Как вы помните, внешние отступы строчных элементов работают только по горизонтали. Высоту текущей строки внешние отступы не меняют. Можно считать, что по вертикали внешние отступы накладываются на соседние строки — они ведь прозрачные по определению.
![]()
Граница внешнего отступа
|
EM { margin-top:500px; margin-right:50px; margin-bottom:500px; margin-left:50px; } |
Рамки строчных элементов ведут себя подобным образом — по горизонтали они отодвигают соседние элементы, а по вертикали совмещаются с ними, при этом верхняя строка перекрывается, а нижняя выводится поверх рамки.
![]() Разное поведение сверху и снизу объясняется порядком вывода строк на экран. |
EM { border: 20px solid #ffbf00; } |
Отмеченная особенность относится только к строчным незамещаемым элементам, то есть к таким, содержание которых включено в HTML-код документа (например, текст). Рамки строчных замещаемых элементов (таких как картинки) работают как рамки блочных элементов (то есть отодвигают соседей и по горизонтали, и по вертикали).