Таблицы стилей CSS

Как я уже писал на странице «Учебник HTML», CSS отвечает за оформление страниц и разметку гипертекста. Основная идея каскадных таблиц – уменьшить код HTML и упростить работу с ним. Повторяющаяся информация записывается в отдельный файл, на который впоследствии просто ссылаются.

Давайте подробнее рассмотрим словосочетание повторяющаяся информация. На предыдущей странице HTML код, теги и атрибуты я приводил ряд примеров использования атрибутов для управления свойствами тегов, например, выставление размеров изображения. На самом деле подобные настройки можно адресовать какой угодно по численности группе объектов (тегов) всего одним css-правилом. Код при этом существенно сократится.

Представьте, что код примера - это фрагмент html-страницы, на странице таких фрагментов 20. Допустим, вам понадобилось сделать 50 таких страниц. 20×50 – 1000 фрагментов получается. А через некоторое время вы решили, что мелкий шрифт надо сделать помельче, а крупный - покрупнее. Для этого вам придётся открыть в редакторе все 50 страниц и сделать в каждой из них по 20 правок. Получится очень нудно и очень долго.

Если создавать сайт на голом HTML, то подобные примеры будут частью повседневности человека, обслуживающего этот сайт. Чтобы этого избежать, нужно пользоваться каскадными таблицами стилей. В этом случае указать, как будет выглядеть крупный и мелкий шрифт придётся всего однажды – в отдельном файле, называемом каскадная таблица стилей.

Синтаксис каскадных таблиц CSS

Синтаксис CSS довольно прост и имеет много общего с атрибутами тегов. Подробную информацию по всем аспектам синтаксиса можно узнать в спецификации W3C. Для CSS, как и для HTML существует своя спецификация. Перевод А.Пирамидина также имеется:

Официальная спецификация	Перевод Пирамидина А.
Спецификация CSS 2.1 (W3C)	Спецификация CSS 2.1 (перевод)

Официальной на данный момент (март 2012) является версия CSS 2.1, версия CSS 3.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему CCS 3. Итак, что же собой представляет синтаксис CSS? Синтаксис похож на написание атрибутов тега:

селектор {свойство:значение}

Естественно, ситуаций с применением стилей может быть очень много, таблицы стилей иногда насчитывают тысячи строк кода. К одному и тому же тегу в разных частях страницы может понадобиться применить разные стили оформления. Свойства и значения в CSS прописаны в спецификации, их совершенно конкретное число и они неизменны. А вот селектор – единица свободная, его можно фактически придумывать.

Поэтому в CSS для селекторов созданы специальные шаблоны, которые с одной стороны следят за тем, чтобы селектор соответствовал синтаксису, а с другой дают программисту достаточно большую свободу их написания.

Селекторы CSS стилей

Возможно, этот раздел статьи окажется немного трудным для восприятия, но селекторы штука очень важная, ибо влияют на скорость обработки таблиц стилей. Так что потерпите . Селектор указывает, к какому тегу должны быть применены указанные свойства. Его можно сравнить с адресом почтового отправления. Обозреватель проверяет селекторы на соответствие, когда выстраивает страницу в окне просмотра. Шаблоны селекторов можете посмотреть по ссылкам ниже.

Официальная спецификация	Перевод Пирамидина А.
Селекторы CSS (W3C)	Селекторы CSS (перевод)

 В селекторе в различном сочетании можно использовать несколько составляющих:

1. Название тега (например, тегу <P> в CSS будет соответствовать селектор P )
2. Идентификатор ID (уникальное имя тега <P id="my_p"> в CSS будет селектор #my_p )
3. Класс (универсальный атрибут тега <P class="my_p"> в CSS будет селектор .my_p)

Ниже примеры селекторов для тегов <p> <img> <table>:

p {text-align:left}
img {padding:10px}
table {margin:20%;}

Теперь подробнее. Составляющие, описанные выше, можно сочетать. Тут тоже есть несколько условий:

1. Если в селекторе используется название тега, оно всегда идёт первым. Селектор с него начинается.
2. Если в качестве селектора используется идентификатор, то название тега или класс указывать не нужно, поскольку ID – уникальный параметр и используется на странице в единственном числе.
3. Селектор может начинаться с класса, если не указывать ID или название тега.   

Выглядит всё это так:

<!-- код HTML -->

<div id="block">
 <p>Абзац, находящийся в блоке c ID
  <span class="green">Block</span>
 </p>
</div>

Запомните этот пример, мы к нему вернёмся ниже. Стили для этого примера могут быть такими:

/* стили CSS */

#block {text-align:left}
p {padding:10px}
.green {color:green;}

В статье про теги HTML упоминалось о вложенности тегов. В примере выше теги <p> и <span> являются вложенными в тег <div>. При этом говорят, что <div> – родительский элемент, а <p> и <span> – его потомки. При этом <p> по отношению к <div> также является дочерним элементом, т.к. находится в первом уровне вложенности. Все потомки наследуют стили родителей по-умолчанию.

При составлении селектора разные его части (теги, классы, идентификаторы) разделяются пробелами. Если вы переходили по ссылкам выше, то наверняка обратили внимание, что в таблице шаблонов есть также примеры с символами + и >.

+ используют для обозначения соседей, а дочерние элементы обозначают при помощи >. Возвращаясь к составляющим селектора с учётом вложенности и родственных признаков, получаем такую картину:

/* селекторы для тега SPAN */

.green {color:green;}
p .green {color:green;}
p span.green {color:green;}
#block .green {color:green;}
#block span {color:green;}
#block span.green {color:green;}
#block p .green {color:green;}
#block p span {color:green;}
#block p span.green {color:green;}
#block > p > span.green {color:green;}

Как видите, указывать селекторы можно по-разному. Все селекторы выше сделают текст тега <span> зелёным. Однако, у них у всех разная точность указания и разная скорость обработки. Это момент достаточно важный при работе с каскадными таблицами стилей.

Чем точнее (длиннее, если по-простому) написан селектор, тем меньше вероятность, что он перекроется другим селектором или унаследует от своего родителя что-то не запланированное. С другой стороны длинный селектор будет дольше обрабатываться обозревателем, поскольку обозреватели читают селекторы справа налево. Возьмём фрагмент предыдущего примера и рассмотрим его подробнее:

.green {color:green;}
span.green {color:green;}
p span.green {color:green;}

Сначала обозреватель применит стили ко всем элементам с классом .green,  поскольку проще раздать 10 указаний и потом отменить 2, чем возиться с каждым по-отдельности. Затем обозреватель проверит стили для span.green – отличаются они от стилей или нет. И если отличаются, внесёт корректировки уже только для span. Так происходит потому, что span.green более точный селектор и он не должен перекрываться селектором .green.  И напротив, более точный селектор должен перекрывать менее точный. Из-за этого условия всё происходит справа налево, а не наоборот. Изменим пример выше:

.green {color:green;}
span.green {color:red;}
p span.green {color:black;}

Сначала обозреватель покрасит всё элементы с  с классом .green зелёным, затем элементы <span> перекрасит в красный и уже проверив вложенность <span> в <p> покрасит оставшиеся в чёрный.

Поэтому надо всегда помнить о золотой середине и использовать составные селекторы только там, где они действительно нужны. На самом деле тема достаточно глубокая и в рамках этой статьи я не смогу раскрыть и 10-ой части нюансов, поскольку вы 100% запутаетесь тогда. Давайте вернёмся к простому и понятному – обратимся к одному из примеров прошлой статьи:

<p>Все <big>заблуждаются</big> в меру своих <small>возможностей.</small></p>

Все заблуждаются в меру своих возможностей.

small {font-size:8pt; color:red;}

означает следующее: тег small {размер шрифта:8 пунктов; цвет:красный;} результат будет такой:

Все заблуждаются в меру своих возможностей.

Изменим размер шрифта с 8 на 18 пунктов:

small {font-size:18pt; color:red;}

Все заблуждаются в меру своих возможностей.

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

.имя_класса {свойство:значение}

Отмечу, что имя класса может быть любым, но не должно содержать пробелов:

.vasya_pupkin {color:green}
 
/* будет означать:
класс "вася_пупкин" {цвет:зелёный}*/

Так как в качестве селектора используется имя класса, а не имя тега, свойства по-умолчанию не будут адресованы ни одному из тегов. Чтобы присвоить тегам свойства созданного вами класса, необходимо указать соответствующий атрибут. На предыдущей странице я уже говорил о настройках тегов - атрибутах. Помните?

<тег атрибут="значение" атрибут2="значение" > 

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

small {font-size:8pt; color:red;}
.vasya_pupkin {color:green}

В html-файле указывают принадлежность тега к классу vasya_pupkin:

<p>Все <big class="vasya_pupkin">заблуждаются</big> в меру <small>возможностей.</small></p>

Все заблуждаются в меру возможностей.

Но это далеко не все варианты использования селекторов. Существует ряд более сложных выражений, благодаря которым настраивать применение стилей в html-документах можно в очень широком диапазоне:

Правила CSS

Кроме стилей в CSS присутствуют правила. Их четыре:

1. @charset
2. @import
3. @media
4. @page
   
   

В переводе А. Пирамидина присутствует также правило @font-face. Однако, перевод выполнен на основе версии спецификации 2.0, а в версии CSS 2.1 (оригинальная версия) это правило исключили, поэтому я тоже исключил его из описания. Все подробности по каждому из правил смотрите в спецификации:

Официальная спецификация	Перевод Пирамидина А.
Правило @charset (W3C)	Правило @charset (перевод)
Правило @import (W3C)	Правило @import (перевод)
Правило @media (W3C)	Правило @media (перевод)
Правило @page (W3C)	Правило @page (перевод)

Я же приведу краткий пример применения правил на практике. Возьмём предыдущую редакцию этого сайта. Сначала в нём было мало css-настроек и все они умещались в одном файле. Потом сайт стал расширяться и данных в файле стало много (тогда мои познания в сайтостроении были куда скромнее, поэтому я не всегда знал, как делать правильно, красиво и компактно). Поэтому я разбил css-файл на несколько частей (несколько файлов).

Все 5 файлов соединялись следующим образом: ссылка на первый css-файл была в html-документе, остальные четыре подключались через правила @import первого css-файла:

@import "file2.css"
@import "file3.css"
@import "file4.css"
@import "file5.css"

таким образом в любую таблицу стилей можно включить содержание другой таблицы посредством правила @import.

Каскадность

Еще один очень важный момент! CSS (Cascading Style Sheets) переводится как «каскадные таблицы стилей». Каскадными они названы потому, что в таблицах действует правило каскадов, то есть последующие стили влияют на предыдущие. Приведу пример. Код таблицы стилей:

.red {color:red}
.red {color:green}

Код html-файла:

<p>Все <big class="red">заблуждаются</big> в меру <small>возможностей.</small></p>

Результат:

Все заблуждаются в меру возможностей.

Второй класс .red (зелёный цвет) переопределяет (перекрывает) первый класс .red (красный цвет), т.к. находится ниже (позднее) и по правилу каскадности он главнее.

Использование спецификации CSS

Пользоваться спецификацией CSS так же просто, как и спецификацией языка HTML. Меню, содержание... все то же самое, только вместо тегов свойства. Если вы уже исследовали спецификацию HTML, то разберетесь без труда, если же нет - самое время это сделать.

Под каждым свойством указаны его основные характеристики. Особое внимание стоит уделять графе начальное значение (подробности), поскольку если значение зависит от агента пользователя, то различные обозреватели могут применить разные значения к тегу, если свойство не объявлено в таблице стилей. Иногда такие свойства лучше сразу определять, чтобы они не трактовались обозревателями по-разному.

Также советую уделить особое внимание единицам измерения, применяемым в CSS:

Официальная спецификация	Перевод Пирамидина А.
Базовые типы данных (W3C)	Базовые типы данных (перевод)

Хранение и применение css-стилей

Как вы уже поняли, стили хранятся в отдельном файле. На самом деле в зависимости от тех задач, которые перед вами стоят, стили можно хранить тремя способами:

1. В таблице стилей, делая ссылку на неё в секции <head><head/>
2. В секции <head><head/> html-файла ( через тег <style><style/>)
3. Внутри тега при помощи атрибута <TAG style="">

Если стили надо применить ко всем файлам, используют таблицу стилей.
Если надо дополнительно внести коррективы в 1-2 html-файла, применяют
тег <style><style/> внутри этих файлов. Если надо применить стили к конкретному тегу, используют атрибут style. Стили, которые применяются к тегам посредством атрибута style называются инлайновыми.

В некоторых случаях html-код оформляют только инлайновыми стилями. Шаблоны сообщений, например.

ызфтперекрасит