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

Как указывалось в предыдущей статье, правило в CSS записывается из двух частей: селектора и описания. Селектор определяет, к какому элементу или группе элементов HTML-документа будут применяться приведенные в данном описании стилевые свойства. В качестве селектора могут быть указаны как сами имена элементов (то есть теги), так и другие более сложные текстовые структуры, такие как классы, идентификаторы и т.д. Дальше по порядку.

 

Селекторы элементов

 

Рассмотрим случай, когда в качестве селектора выступает какой-либо элемент. Например, возьмем элементы body, div и p
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body { color:blue; background-color:white; }
div { color:green; }
p { color:red; }
</style>
</head>
<body>
Текст1
<div>Текст2</div>
<p>Текст3</p>
Текст4
</body>
</html>

В данном примере Текст1 и Текст2 будет отображен в браузере синим цветом и на белом фоне, поскольку строчка body { color:blue; background-color:white; } говорит браузеру следующее: текст в элементе body должен быть выведен синим цветом (color:blue) на белом фоне (background-color:white). Соответственно текст в блоке div должен быть зеленым цветом, а в абзаце (элемент p) текст должен быть выведен красным цветом. Думаю понятно почему. Добавлю, что, сколько бы не было элементов div и p на странице, все они должны отображаться в окне браузера согласно выше приведенным стилевым свойствам.

 

Селекторы классов

 

Но что делать, если мы хотим чтобы на странице элементы с одинаковыми именами отображались по-разному? Для этого можно использовать классы. В предыдущей статье кратко говорилось о классах, поэтому повторюсь немного. Задать класс элементу HTML-документа, в соответствии с которым будет выводиться данный элемент в окне браузера, можно атрибутом class. Значением атрибута class должно быть имя класса (придумывать нужно самостоятельно). Например
Код
<div class="div_article">
<h1 class="head_article">Заголовок статьи</h1>
<p class="text_article">Текст статьи</p>
</div>

Определять стили отображения для классов нужно следующим способом
Код
.div_article { color:black; background-color:white; }
.head_article { color:green; }
.text_article { color:blue; }

Поясню: после точки указывается имя класса, потом в фигурных скобках { } записываются описания CSS. При подобной записи селектора, определение класса будет доступно всем элементам HTML-документа, то есть если написать
Код
.text { color:blue; background-color:while; }

то в HTML-коде можно будет написать следующее
Код
<div class="text">Содержимое блока div</div>
<p class="text>Текст абзаца</p>

При отображении в браузере данного примера в блоке div и абзаце (элемент p) текст будет синего цвета на белом фоне. Для определения класса лишь определенному элементу, нужно при описании стилей указать вначале соответствующий тег, например, если есть следующая запись в каскадных таблицах стилей
Код
p.text { color:blue; background-color:while; }

Тогда следующая запись в HTML-коде
Код
<div class="text">Содержимое блока div</div>
<p class="text>Текст абзаца</p>

не будет отображена аналогично выше приведенному примеру, а точнее к блоку div не будут применены стили отображения класса text. А только содержимое абзаца будет выведено в окне браузера согласно записанному правилу в CSS.
Замечу, что подбирать имена классов желательно таким образом, чтобы было понятно, какой логический смысл несет элемент с данным именем класса. Если дать какому-либо элементу имя класса вроде "asdf", то понять, что именно содержит данный элемент практически не возможно. А если дать имя, например, "head_article", то уже не надо лезть в HTML-код, чтобы предположить что данный элемент содержит заголовок какой-либо статьи.

 

Селекторы идентификаторов

 

Задать стили отображения элементов HTML-документа можно не только по имени элемента (тега) или классу, но и по идентификатору элемента. Почти у каждого элемента может быть указан атрибут id задающий уникальное имя (идентификатор) элемента в данном HTML-документе. То есть не должно быть в текущем документе два или более элемента с одинаковыми значениями атрибута id. Например
Код
<div id="block1">
<p id="indent">Текст абзаца</p>
</div>
<div id="block2">Содержимое блока div</div>

При определении стилей селектор будет состоять из символа # и следующего за ним идентификатора. Например, для выше написанного кода получим следующее
Код
#block1 { color:red; }
#indent { color:red; background-color:black;}
#block2 { color:green; }

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

 

Группировка селекторов

 

Очень часто бывают ситуации, когда нужно задать одинаковые стилевые свойства нескольким селекторам, то есть нужно прописать следующие правила
Код
div { color:red; background-color:#999999; }
p { color:red; background-color:#999999; }
h1 { color:red; background-color:#999999; }
.text { color:red; background-color:#999999; }
#block1 { color:red; background-color:#999999; }

Но вместо подобной длинной записи можно использовать сокращенную запись, то есть группировку селекторов, просто указав нужные селекторы через запятую
Код
div, p , h1 , .text , #block1 { color:red; background-color:#999999; }

 

Селекторы потомков

 

Это интересное правило определяет способ сопоставления стилевых свойств элементу, который является потомком некоторого другого элемента HTML-документа. Селектор потомков состоит из двух или более селекторов, разделенных пробелом.
Для тех, кто не знает, какой элемент является потомком, объясню. Элемент является потомком, если он находится внутри какого-либо другого элемента. Приведу примеры
1. Элемент p является потомком элемента div
Код
<div>
текст
<p>текст</p>
текст
</div>

2. Элемент p не является потомком элемента div
Код
<p>текст</p>
<div>текст</div>
текст
<p>текст</p>

Для дальнейшего пояснения правила рассмотрим код
Код
...
p { color:red; }
div { color:green; }
...
<p>текст1</p>
<div>
текст2
<p>текст3</p>
</div>

При просмотре данного кода в браузере мы увидим, что текст1 и текст3 будет красного цвета, текст2 будет выведен на экран зеленым цветом. И это вполне понятно. Но оказывается, что можно задать стилевые свойства для элемента p, являющегося потомком элемента div не используя классы или идентификаторы, а используя селектор, задающий стилевые свойства потомкам, который можно записать так
Код
div p { color:blue; }

При такой конструкции всем элементам p являющимися потомками элемента div будут сопоставлены данные стилевые свойства. Теперь давайте эту строку вставим в предыдущий пример, у нас получиться
Код
...
p { color:red; }
div { color:green; }
div p { color:blue; }
...
<p>текст1</p>
<div>
текст2
<p>текст3</p>
</div>

Если просмотреть данный код в браузере, то можно заметить, что в отличие от предшествующего примера, тут текст, содержащийся во втором элементе p (текст3), будет отображен синим цветом.

 

Псевдоклассы

 

Псевдоклассы сопоставляют свойства каскадных таблиц стилей элементу HTML-документа или его определенной части в зависимости от произошедших или происходящих событий. Подробнее поясню на примере ссылки, изменяющей свой внешний вид в зависимости от происходящих событий. Допустим, у нас есть самая обыкновенная ссылка
Код
<a href="http://www.linedmk.com">www.linedmk.com</a>

Как мы помним, в HTML можно задать цвет еще не просмотренной посетителем ссылки, просмотренной ссылки и цвет активной ссылки (то есть момент, когда происходит щелчок кнопкой мыши по гиперссылке) атрибутами, соответственно, link, vlink и alink в теге body. Каскадные таблицы стилей дают куда больше возможностей по оформлению гиперссылок. Для элемента <a> в CSS предусмотрены следующие псевдоклассы
  • псевдокласс :link - определен для еще не просмотренных пользователем гиперссылок;
  • псевдокласс :visited - определен для просмотренных пользователем ссылок;
  • псевдокласс :hover - определен для элемента, над которым данный момент времени находится курсор;
  • псевдокласс :active - определен для активного в данный момент времени элемента, то есть когда по элементу происходит щелчок кнопкой мыши.

И теперь для придания нужного внешнего вида ссылке можно использовать псевдоклассы. Например, определим цвета для не посещенной пользователем ссылки и для посещенной
Код
a:link { color:red; }
a:visited { color:blue; }

Если нам нужно задать внешний вид лишь некоторым ссылкам, то можно придумать соответствующий класс, например
Код
<a href="http://www.linedmk.com" class="mylink">www.linedmk.com</a>

Тогда в CSS при указании свойств данной ссылке нужно будет указывать и класс
Код
a.mylink:link { color:red; }

Напишем полноценный пример, в котором ссылка не только будет менять цвет при наведении на нее курсора, но и убирается подчеркивание (для этого используется свойство text-decoration)
Код
...
a.mylink:link , a.mylink:visited { color:red; text-decoration:underline; }
a.mylink:hover {color:blue; text-decoration:none; }
a.mylink:active { color:black; }
...
<a href="http://www.linedmk.com" class="mylink">www.linedmk.com</a>

 

Комментарии

 

Каскадные таблицы стилей позволяют использовать комментарии. Они могут находиться в любом месте CSS, и их содержимое не учитывается при обработке таблиц стилей. Комментарии начинаются с символов "/*" и заканчиваются символами "*/". Например
Код
<style type="text/css">
...
/* Это комментарий и он не оказывает влияния на ход работы CSS */

</style>

В следующей статье познакомимся со свойствами CSS.
Опубликовано 13 июня 2008 г.
Теги: css, div
Комментарии к публикации
Комментариев к публикации нет...
Вход в аккаунт
Новости сайта