Веб-компас сайтостроителей
Синтаксис каскадных таблиц стилей
Как указывалось в предыдущей статье, правило в CSS записывается из двух частей: селектора и описания. Селектор определяет, к какому элементу или группе элементов HTML-документа будут применяться приведенные в данном описании стилевые свойства. В качестве селектора могут быть указаны как сами имена элементов (то есть теги), так и другие более сложные текстовые структуры, такие как классы, идентификаторы и т.д. Дальше по порядку.
В данном примере Текст1 и Текст2 будет отображен в браузере синим цветом и на белом фоне, поскольку строчка body { color:blue; background-color:white; } говорит браузеру следующее: текст в элементе body должен быть выведен синим цветом (color:blue) на белом фоне (background-color:white). Соответственно текст в блоке div должен быть зеленым цветом, а в абзаце (элемент p) текст должен быть выведен красным цветом. Думаю понятно почему. Добавлю, что, сколько бы не было элементов div и p на странице, все они должны отображаться в окне браузера согласно выше приведенным стилевым свойствам.
Определять стили отображения для классов нужно следующим способом
Поясню: после точки указывается имя класса, потом в фигурных скобках { } записываются описания CSS. При подобной записи селектора, определение класса будет доступно всем элементам HTML-документа, то есть если написать
то в HTML-коде можно будет написать следующее
При отображении в браузере данного примера в блоке div и абзаце (элемент p) текст будет синего цвета на белом фоне. Для определения класса лишь определенному элементу, нужно при описании стилей указать вначале соответствующий тег, например, если есть следующая запись в каскадных таблицах стилей
Тогда следующая запись в HTML-коде
не будет отображена аналогично выше приведенному примеру, а точнее к блоку div не будут применены стили отображения класса text. А только содержимое абзаца будет выведено в окне браузера согласно записанному правилу в CSS.
Замечу, что подбирать имена классов желательно таким образом, чтобы было понятно, какой логический смысл несет элемент с данным именем класса. Если дать какому-либо элементу имя класса вроде "asdf", то понять, что именно содержит данный элемент практически не возможно. А если дать имя, например, "head_article", то уже не надо лезть в HTML-код, чтобы предположить что данный элемент содержит заголовок какой-либо статьи.
При определении стилей селектор будет состоять из символа # и следующего за ним идентификатора. Например, для выше написанного кода получим следующее
Замечу, что для задания стилей отображения определенным элементам проще использовать классы. Идентификаторами лучше всего не злоупотреблять. Идентификаторы все же больше всего используются в JavaScript, но иногда можно использовать их в CSS, например, для придания логической значимости какому-либо элементу, в том смысле, что данный элемент является каким-то значимым логическим элементом на странице и на странице он повторяться не будет. Например, это может быть заголовок сайта, меню, или блок с основным содержимым сайта.
Но вместо подобной длинной записи можно использовать сокращенную запись, то есть группировку селекторов, просто указав нужные селекторы через запятую
Для тех, кто не знает, какой элемент является потомком, объясню. Элемент является потомком, если он находится внутри какого-либо другого элемента. Приведу примеры
1. Элемент p является потомком элемента div
2. Элемент p не является потомком элемента div
Для дальнейшего пояснения правила рассмотрим код
При просмотре данного кода в браузере мы увидим, что текст1 и текст3 будет красного цвета, текст2 будет выведен на экран зеленым цветом. И это вполне понятно. Но оказывается, что можно задать стилевые свойства для элемента p, являющегося потомком элемента div не используя классы или идентификаторы, а используя селектор, задающий стилевые свойства потомкам, который можно записать так
При такой конструкции всем элементам p являющимися потомками элемента div будут сопоставлены данные стилевые свойства. Теперь давайте эту строку вставим в предыдущий пример, у нас получиться
Если просмотреть данный код в браузере, то можно заметить, что в отличие от предшествующего примера, тут текст, содержащийся во втором элементе p (текст3), будет отображен синим цветом.
Как мы помним, в HTML можно задать цвет еще не просмотренной посетителем ссылки, просмотренной ссылки и цвет активной ссылки (то есть момент, когда происходит щелчок кнопкой мыши по гиперссылке) атрибутами, соответственно, link, vlink и alink в теге body. Каскадные таблицы стилей дают куда больше возможностей по оформлению гиперссылок. Для элемента <a> в CSS предусмотрены следующие псевдоклассы
И теперь для придания нужного внешнего вида ссылке можно использовать псевдоклассы. Например, определим цвета для не посещенной пользователем ссылки и для посещенной
Если нам нужно задать внешний вид лишь некоторым ссылкам, то можно придумать соответствующий класс, например
Тогда в CSS при указании свойств данной ссылке нужно будет указывать и класс
Напишем полноценный пример, в котором ссылка не только будет менять цвет при наведении на нее курсора, но и убирается подчеркивание (для этого используется свойство text-decoration)
В следующей статье познакомимся со свойствами CSS.
Селекторы элементов
Рассмотрим случай, когда в качестве селектора выступает какой-либо элемент. Например, возьмем элементы 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.06.2008, просмотров 6040
Еще статьи из данной категории
Комментарии к публикации
Комментариев к публикации нет...
Добавить комментарий
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.