Каждая таблица стилей образуется из наборов правил. Чтобы лучше понять, что же такое правила, давайте разберем их структуру. Каждое правило имеет две основные части: селектор (selector) и блок объявлений (declaration block).

Структура правила CSS

Блок объявлений состоит из одного или более объявлений (declarations), а каждое объявление представляет собой сочетание свойства (property) и значения (value).

Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. В правой части правила находится блок объявлений, образованный одним или несколькими объявлениями. Каждое объявление представляет собой сочетание свойства CSS и значения этого свойства. Выше представлен блок, содержащий два объявления. Первое определяет, что согласно правилу цвет (color) указанных элементов документа будет красным (red), а второе — что фон (background) этих элементов будет желтым (yellow). Таким образом, все элементы H1 (определённые селектором) этого документа будут выводиться красным текстом на желтом фоне.

Текущая категория

Свойства CSS — border-style

Стили рамок это самый важный параметр — не потому, что они управляют представлением рамки, а потому, что без стиля рамки вообще не будут отображены.
border-style это сокращённая форма задания свойств. Она применяется для задания стилей всей рамки элемента или каждой из её сторон в отдельности.

Значения:

<?php 
none hidden dotted dashed solid double 
groove ridge inset outset ]{1,4} | inherit

Начальное значение: для сокращенной формы записи свойств не определено
Область применения: все элементы
Наследование: нет
Вычисляемое значение: смотрите отдельные свойства (border-top-style и другие)

CSS определяет 10 отдельных отличных от inherit стилей для свойства border-style, включая применяемое по умолчанию значение none. Значение hidden эквивалентно значению none, за исключением случая применения к таблицам, когда оно призвано разрешить конфликт рамок.
Вот код этих 10 стилей:

<?php
p
.border-style1 {border:green 4px hidden;}
p.border-style2 {border:green 4px dotted;}
p.border-style3 {border:green 4px dashed;}
p.border-style4 {border:green 4px solid;}
p.border-style5 {border:green 4px double;}
p.border-style6 {border:green 4px groove;}
p.border-style7 {border:green 4px ridge;}
p.border-style8 {border:green 4px inset;}
p.border-style9 {border:green 4px outset;}

Свойства — border-style, значение — none

Свойства — border-style, значение — hidden

Свойства — border-style, значение — dotted

Свойства — border-style, значение — dashed

Свойства — border-style, значение — solid

Свойства — border-style, значение — double

Свойства — border-style, значение — groove

Свойства — border-style, значение — ridge

Свойства — border-style, значение — inset

Свойства — border-style, значение — outset

Самый непредсказуемый стиль рамки — double (двойной). Он определяется как ширина двух линий плюс пробел между ними и эквивалентен значению border-width. Однако спецификация CSS не говорит о том, должна ли одна линия быть толще другой, или они должны быть одинаковыми, или пробел между ними должен быть уже или шире линий.

Несколько стилей
Для одной рамки можно задавать несколько стилей. Например:

<?php
p
.aside {border-stylesolid dashed dotted solid;}

В результате получаем абзац со сплошной верхней рамкой, пунктирной рамкой справа, точечной рамкой снизу и сплошной левой рамкой.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Число аргументов: Результат:
1 Стиль рамки будет задан для всех сторон элемента.
2 Первый аргумент устанавливает стиль верхней и нижней границы, второй аргумент — левой и правой.
3 Первый аргумент задает стиль верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Текущая категория

ПОЛЕЗНЫЕ ССЫЛКИ:

Современный flash player www.sagatech.ru для iPad 2 и iOS.