Селектор класса
Как видно из приведенных примеров, главным преимуществом при использовании таблиц стилей для форматирования – это отделение содержания страницы от атрибутов форматирования. Например, изменив какой-либо из атрибутов форматирования (например, цвет заголовка 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":