Правила форматирования таблиц стилей

CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.

Основным понятием описания стиля выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора используется либо имя тега (без уголков), либо значение его атрибута id, перед которым указывается знак #, или же имя так называемого класса. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

селектор: {имя_параметра1:значение; имя_параметра2:значение;… имя_параметраN:значение }

Вначале пишется имя селектора, например, IMG, это означает, что все стилевые параметры будут применяться к тегу <img>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Селектор – имя тега

Данный вариант используется для определения общего стиля элемента для всех страниц. Это дает возможность скомпоновать страницы из логических элементов, а стиль отображения этих элементов описать во внешнем файле.

Следующая таблица изменит все заголовки первого уровня в документе.

<style> h1 {color:darkred; font-size:24pt}

</style>

Когда к различным тегам требуется применить одинаковые наборы параметров, тогда селекторы группируют, перечислив их через запятую перед общим набором параметров.

<style> h3,b {color:darkred; font-size:24pt}

</style>

Как известно, одни элементы могут быть вложены в другие. Иногда требуется задать особенный стиль для элемента определенного типа, только если он вложен в другой элемент, а в противном случае задавать стандартное форматирование. В подобных случаях используют так называемые контейнерные селекторы, которые задают исключения из общих правил форматирования, определенных с помощью простых селекторов или по умолчанию. В данном случае селектор состоит из имени тега-контейнера и имени вложенного тега, разделенные пробелом.

Например,

<style> p b {font-size:24pt}

</style>

Селектор - имя класса

Для одного и того же тега можно задать разновидности стилей, называемые классами. Для того, чтобы отнести элемент разметки к определенному классу, нужно воспользоваться атрибутом class этого элемента разметки. При этом селектор формируется как имя тега, за которым через разделительную точку следует имя класса.

<style> h1.red {color:red }

h1.green {color:green } </style> ... <h1 class=red> Этот заголовок мы отобразим красным цветом </h1> <h1 class=green> Этот заголовок мы отобразим зеленым цветом </h1> <h1> Этот заголовок обычный </h1>

В данном примере класс заголовка red имеет одно описание стиля, а класс заголовка green совершенно другое. При этом каждый из этих классов нельзя применить к другим элементам разметки, например, параграфу или списку. Если же не задано имени элемента разметки, то это обозначает, что класс можно отнести к любому элементу разметки - корневой класс описания стилей. При этом совершенно не обязательно, чтобы элементы разметки были однотипными. В примере к одному классу отнесены и параграф и гипертекстовая ссылка в другом параграфе.

<style> .kuku {color:white;background-color:darkred;} </style> ... <p class=kuku> Этот параграф мы отобразим белым цветом по темно-красному фону </p> ... <p> Эту <a class=kuku>гипертекстовую ссылку</a> мы отобразим белым цветом по темно-красному фону. </p> Получим. Этот параграф мы отобразим белым цветом по темно-красному фону Эту гипертекстовую ссылку мы отобразим белым цветом по темно-красному фону.

Лидирующую точку в имени класса в данном случае можно опускать. Она задается из соображений сохранения общности описания. Данная структура очень похожа на обозначение имени корневого домена в системе доменных имен. Собственно ничего удивительного здесь нет, т.к. система классов объектов на HTML-странице представляет из себя дерево. Элементы разметки - это узлы дерева.