Селектор id

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

Как видно из приведенных примеров, главным преимуществом при использовании таблиц стилей для форматирования – это отделение содержания страницы от атрибутов форматирования. Например, изменив какой-либо из атрибутов форматирования (например, цвет заголовка h1) в таблице стилей, мы тем самым меняем его сразу во всем документе. Поэтому использование таблиц стилей, несмотря на его относительную сложность по сравнению с другими приемами форматирования, является преобладающим при дизайне Web-страниц по сравнению с использованием для форматирования элементов и атрибутов HTML (например, элемента font для задания параметров шрифта или атрибута color для задания цвета).

Использование элемента в качестве селектора выводит содержимое всех элементов одинаково. Однако в том случае, если необходимо некоторые элементы отобразить по-другому, можно использовать селектор класса. Имя класса указыва­ется в селекторе класса после имени элемента и отделяется от него точкой. Чтобы селектор действовал для какого-либо элемента, для этого элемента необходимо задать атрибут class, значением которого является ссылка на класс, задаваемый в правиле стилей.

Пример 4.3.17. Задание селектора класса:

h1.navy {color: navy; font-size: 18pt;

font-weight: bold; text-align: center}

В соответствии с этим правилом CSS заголовки первого уровня класса black в Web-странице будут выводиться темно-синим цветом, размером 18 пунктов, полужирным шрифтом и выровнены по центру

Это правило, будет действовать на все элементы h1, у которых значение атрибута class, равно "navy", например:

<h1 class="navy">Раздел 1</h1>.

вывод фрагмента Web-страницы имеет следующий вид:

Если класс должен применяться ко всем элементам до­кумента, то в качестве имени элемента задается универсальный селектор. Однако в этом случае часто символ "*" часто опускают, т.е. правило просто начинается с символа ".".

Пример 4.3.18. Задание селектора класса без привязки к элементу:

.red {color: red}

В этом случае данное правило стилей для класса red можно использовать для разных элементов, например:

<h3 class="red">Раздел 1.1.3</h3>

<p class="red">Абзац 1</p>

И заголовок, и абзац в этом примере будут выведены красным цветом:

Параметром атрибута class может быть не одно значение, а набор значений, отделенных друг от друга пробелами.

Пример 4.3.19. Задание селектора для нескольких классов

Пусть заданы следующие правила:

.gray {color: gray}

.bold {font-weight: bold}

.italic {font-style: italic}

Первое правило задает серый цвет текста, второе – вывод текста жирным шрифтом, а третье – вывод теста курсивом. Тогда содержимое элемента

<h3 class="bold gray">Раздел 2.2.5</h3>

будет выведено жирным шрифтом и серым цветом, а содержимое элемента

<h3 class="bold italic">Последний раздел</h3>.

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

Чтобы правило работало только при наличии определенных значений в наборе, необходимо указать этот набор значений, отделяя их друг от друга символом ".",

Пример 4.3.20. Задание селектора для нескольких классов:

h3.light.blue {color: lightblue}

.italic {font-style: italic}

.blue {color: blue}

Это правило будет действовать для элемента

<h3 class="light italic blue">Раздел 2.2.5</h3>

и не будет действовать для элемента

<h3 class="italic blue">Последний раздел</h3>:

Атрибут id, который также можно задавать практически для любого элемента, не влияет на отображение Web-браузером элемента HTML, но он задает уникальное имя элемента, которое использу­ется для ссылок на него в сценариях и таблицах стилей. Селектор id в правиле, как и всякая ссылка в HTML, предваряется символом "#".

Пример 4.3.21. Задание селектора id:

h3#greenElement {color: green}

Это правило выделит все содержимое заголовка третьего уровня, например:

<h3 id="greenElement">Раздел 3.1.1</h3>,

у которого id="greenElement", зеленым цветом:

Как и в случае задания класса, если правило применяется для всех элементов, у которых идентификатор имеет заданное значение, вместо имени элемента указывается универсальный селектор "*", либо имя элемента просто опускают.

Пример 4.3.22. Задание селектора id для произвольного элемента:

#brownElement {color: brown}.

Это правило выделяет коричневым цветом любой элемент, например:

<h3">Раздел <span id="brownElement"3.1.2</span></h3>,

у которого id="yellowElement":