Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Селекторы, псевдоклассы и псевдоэлементы - Программирование от RIN.RU
Селекторы, псевдоклассы и псевдоэлементы

Базовые селекторы


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


  • Базовый селектор - Универсальный селектор или селектор типа.

  • Универсальный селектор - Символ звездочка (*), означающий, что его субъектами являются все элементы документа. Если звездочка является не единственной составляющей селектора, то она может опускаться.

  • Селектор типа - Совпадает с именем элемента в документе и указывает, что его субъектами являются все элементы документа с данным именем.

  • Простой селектор - Базовый селектор, за которым следуют нуль или более селекторов атрибутов, селекторов идентификаторов или псевдоклассов (в любом порядке).

  • Составной селектор - Образуется из простых селекторов соединением их с помощью специальных символов.


Как мы видим, основу этих определений составляют базовые селекторы. Поясним их определения примерами:


* { font-family: sans-serif } /* Применяется ко всем элементам документа */
H1 { font-family: sans-serif } /* Применяется ко всем элементам H1 */


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


H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
эквивалентен одному правилу


H1, H2, H3 { font-family: sans-serif }
Поддержка :Полное соответствие стандарту (5.0+)
Не поддерживает универсальные селекторы (4.0+)



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


Для HTML-документов CSS поддерживает селекторы классов, которые основаны на использовании атрибута class и имеют вид element.class. Пусть, например, наша таблица стилей содержит правило


P.warning { font-style: italic }


Тогда следующий элемент HTML-документа


<P class="warning">Рекомендуется выбирать названия классов,
отражающие их назначение.</P>


будет отображаться курсивным шрифтом:


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


Селектор класса может не содержать названия элемента, например


.warning { font-style: italic }


Такое правило относится ко всем элементам, имеющим атрибут class="warning".


Примечание. Селектор класса, не содержащий имени элемента, следует понимать как селектор *.class, в котором универсальный селектор * опущен.


CSS позволяет задавать и подмножества значения атрибута class, например правило


P.warning.red { font-style: italic }


будет применимо к элементам с атрибутом class="warning red blue", но не применимо к элементам с атрибутом class="warning blue".
Поддержка :Полное соответствие стандарту (5.0+)
Не поддерживает множественные классы (4.0+)



Вперед  >>>
 1  2  3 


 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Введение в таблицы стилей

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Позиционирование элементов

Визуализация элементов

Цвет и фон

Шрифты

Текст

Таблицы

Генерация содержимого, нумерация и списки

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь