Css-Cелекторы
Селекторами называются имена стилей, в которых указаны параметры форматирования.
Селекторы делятся на несколько типов: селекторы тегов, классы и идентификаторы (ID).
Селекторы тегов используются для определения стилей встроенных тегов html.
Классы применяются для создания стилей, которые можно применять к любому тегу html, для создания выделений или изменения стиля блока текста.
Идентификаторы (ID) обычно используются совместно со скриптами, чтобы можно было управлять параметрами стиля динамически, как правило, для создания слоев.
Селекторы тегов
Селектором может быть любой тег html. Для него определяются правила форматирования, такие как цвет, фон, размер и др. Правила задаются в виде:
Тег { Параметр: Значение; }
В качестве параметров используются свойства стиля.
Задание 1. Изменение тега параграфа
После того, как стиль тега переопределен, можно использовать данный тег как обычно. Но при этом его назначенные свойства будут уже другими. Так, в примере, к тегу параграфа p применяется выравнивание по ширине.
Селекторы Class
Классы используются, когда необходимо определить стиль для блока текста или задать разные стили для одного тега. Синтаксис для классов следующий.
Тег.Имя класса { Параметр: Значение; }
Чтобы указать, что тег используется с определенным стилем, к нему добавляется параметр class="Имя класса".
Задание 2. Использование классов c тегами
Классы удобно использовать, когда нужно применить стиль к разным тегам web-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги span и div.
Селекторы ID
Параметр ID задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически.
Синтаксис ID селектора следующий.
#ID селектор { Параметр: Значение; }
Пример. Использование идентификатора ID
<style>
#help {position: absolute; left: 160px; top: 120px; width: 225px; height: 180px;}
</style>
<div ID=help>
<table width=100% border=0 cellspacing=0 cellpadding=4 height=100%>
<tr>
<td bgcolor=#FFFFCC>Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.</td>
</tr>
</table>
</div>
В примере таблица помещена в слой с именем help. Использование идентификатора дает возможность изменять некоторые параметры таблицы, например, делать ее невидимой или видимой по желанию. К сожалению, использовать один идентификатор можно только один раз в документе.
Применение селекторов
Контекстные селекторы
При создании web-страницы часто приходится вкладывать одни теги в другие. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, можно определить стиль для жирного текста, только когда он еще и курсивный.
Обычное использование селекторов.
b { font-family: Arial; font-weight: bold; color: navy; }
i { font-style: italic; }
Контекстный селектор состоит из простых селекторов разделенных пробелом.
b i { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
В примере жирный курсивный шрифт Arial синего цвета будет применен к тегу i, когда он находится внутри тега b.
Задание 3. Контекстные селекторы
Можно одновременно использовать сгруппированные и контекстные селекторы.
b i, h1, p .cite { color: navy; }
В примере синий цвет будет применен:
- к тегу курсива i размещенному внутри тега b;
- ко всем тегам h1;
- к классу cite находящемуся внутри тега параграфа p.
Многие свойства имеют в качестве возможного значения значение inherit. Оно означает, что в качестве значения свойства должно использоваться вычисленное значение данного свойства отцовского элемента.
div * i { color: blue }
Данное правило будет применяться ко всем элементам i, которые находятся внутри любых элементов (универсальный селектор), которые заключены в элемент div.
Группирование селекторов
Большинство используемых в CSS селекторов имеют некоторые общие совпадающие параметры, например, используют один и тот же шрифт. Чтобы не повторять одни и те же элементы, их можно сгруппировать для удобства и сокращения записей.
Обычная запись
H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #000033; }
H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333333; }
H3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #990000; }
Сгруппированные селекторы
H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; }
H1 { font-size: 160%; color: #000033; }
H2 { font-size: 135%; color: #333333; }
H3 { font-size: 120%; color: #990000; }
Селекторы группируются в виде списка тегов, разделенных между собой запятыми.
Наследование селекторов
Наследование – это перенос правил форматирования для элементов, находящихся внутри других. Например, для параграфа p задано форматирование, а для курсива i, который находится внутри параграфа, нет. В этом случае вложенный элемент наследует свойства родительского элемента.
Задание 4. Наследование селекторов
В примере используются разные параметры форматирования для тегов p и b. Как бы вы эти теги не сочетали друг с другом, вид их, заданный в стиле, не изменится. Другое дело тег курсива i. В стиле он не указан, поэтому некоторые свойства, такие как цвет, он наследует от тега параграфа, внутри которого находится.
Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Например, достаточно задать параметры форматирования тега table и к ячейкам таблицы они будут применены автоматически. Точно так же можно определить свойства тега body, который порождает все остальные элементы web-страницы.
<style type="text/css">
BODY { text-align: justify; color: black; font-family: Arial; }
</style>
Приведенный в примере код задает форматирование для всех элементов web-страницы по умолчанию.