Каскадные таблицы стилей CSS. Захаркина В.В. - 9 стр.

UptoLike

ВУЗ: 

СПбГУ | Санкт-Петербург

Составители: 

Рубрика: 

16
Селекторы класса
Обычные классы
Селекторы класса позволяют задавать различные стилевые описания
для одного и того же HTML-элемента. Название класса указывается
после названия элемента и отделяется точкой.
div.red { color: #ff0000 }
div.blue { color: #0000ff }
div.fantasy { color: pink; font-size: 24px }
Универсальный селектор класса
При определении с помощью универсального селектора класс не
связывается с конкретным элементом. Такой класс можно применять с
любыми элементами, для которых объявленные стилевые свойства
имеют смысл. Формально, в таком описании вместо имени элемента
следует ставить символ * , например,
*.spring { color: mediumspringgreen },
однако на практике допустима следующая запись без * :
.spring { color: mediumspringgreen }
Применение классов стилей
Определенный в таблице стилей класс связывается с HTML-элементм
при помощи атрибута CLASS. Для объявленных выше классов это
можно сделать, например, так:
<div class="red">
<div class="fantasy">
<div class="spring">
17
<p class="spring">
<td class="spring">
ID селекторы
Атрибут id задает HTML элементу уникальный в пределах документа
идентификатор, который может быть использован в различных целях,
в частности, для задания стиля этому элементу. Значение атрибута ID
отделяется от имени HTML-элемента знаком #. Символ * вместо
конкретного имени HTML-элемента сопоставляет правило стиля
любому элементу, у которого значение атрибута id равно
указанному. Как уже отмечалось
в предыдущем разделе, символ *
можно опускать, т.е. следующие определения равносильны:
*#comment {color:red}
#comment {color:red}
Например, пусть описаны следующие правила стиля:
h1#special {color:green}
#comment {color:red}
Первое правило (зеленый цвет символов) будет сопоставлено элементу
H1, у которого значение атрибута id равно special:
<h1 id="special">
Второе правило (красный цвет символов) будет сопоставлено
любому элементу, у которого значение атрибута id равно
comment.
Зачем может понадобиться Id-селектор? Ведь он сопоставляет
указанное правило стиля тому HTML-элементу, у которого атрибут id
равен заданному, а такой элемент должен быть уникальным в
пределах документа. То есть для каждого документа такой элемент
только один, стоит ли копья ломать? А теперь представим себе ряд
документов, оформленных согласно одному
шаблону. Например, в
моем сайте все учебные материалы по HTML и CSS оформлены
одинаково: в верхнем ряду таблицы ссылка на стартовую страницу и
заголовок; в левой ячейке нижнего ряда таблицы список рубрик, а в
правой - основное содержание. Если кто-то решит эти материалы

Страницы