
- •Лекция 10. Использование css, классы, идентификаторы, селекторы, правила хорошего тона Оглавление
- •Селекторы тегов
- •Идентификаторы
- •Комментарии
- •Контекстные селекторы
- •Соседние селекторы
- •Дочерние селекторы
- •Селекторы атрибутов
- •Простой селектор атрибута
- •Селектор атрибута со значением
- •Атрибут начинается с определенного значения
- •Атрибут оканчивается определенным значением
- •Значение встречается в любом месте атрибута
- •Универсальный селектор
- •Правила создания стиля
- •Пишите все правила для каждого селектора в одном месте
- •Имеет приоритет значение, указанное в коде ниже
- •Начинайте с селекторов верхнего уровня
- •Группируйте селекторы с одинаковыми параметрами и значениями
- •Используйте идентификаторы и классы
- •Применяйте универсальные стилевые параметры
Значение встречается в любом месте атрибута
Возможны варианты, когда стиль следует применить к селектору с определенным атрибутом, частью которого является некоторое значение. При этом точно не известно, начинается или заканчивается этим значением аргумент. Тогда следует использовать следующий синтаксис.
[атрибут*="значение"] { Описание правил стиля } Селектор[атрибут*="значение"] { Описание правил стиля }
Значение может располагаться в любом месте аргумента, например, в начале, в конце или где-то посередине. Главное, что оно является его частью. Так, в примере 12.5 показано изменение стиля ссылок, в которых встречается слово «poks».
Пример 12.5. Стиль для разных сайтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы атрибутов</title>
<style type="text/css">
[href*="poks"] {
background: yellow; /* Желтый цвет фона */
}
</style>
</head>
<body>
<p><a href="http://www.poks.ru/html/">Теги HTML</a> |
<a href="http:// poks.udcl.ru">Вопросы к Экзамену</a> |
<a href="http://webimg.ru">Графика для Веб</a></p>
</body>
</html>
Результат данного примера показан на рис. 12.4.
Рис. 12.4. Изменение стиля для ссылок, в адресе которых встречается «poks»
Существуют и некоторые другие виды селекторов аргументов, но они применяются достаточно редко, поэтому их описание мы опустим.
Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.
* { Описание правил стиля }
В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
В примере 13.1 показано одно из возможных приложений универсального селектора — выбор шрифта и размера текста для всех элементов документа.
Пример 13.1. Использование универсального селектора
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Универсальный селектор</title>
<style type="text/css">
* {
font-family: Aral, Verdana, sans-serif; /* Рубленый шрифт для текста */
font-size: 96%; /* Размер текста */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>
Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY.
Вообще, этот тип селекторов применяется в основном в структурных языках вроде XML, для обозначения имен элементов, которые в стилях не известны.