Присвоение стилей
Правильно написанный html-документ представляет собой каркас, к которому применяются стили. Чтобы назначить стиль тому или иному элементу, нужно каким-либо образом идентифицировать этот элемент. Для идентификации элементов применяют селекторы.
Какие же существуют селекторы...
2. Селектор - перечень дескрипторов вложенных элементов
3. Cелектор - идентификатор
4. Нисходящие селекторы
5. Селекторы псевдоклассов
6. Универсальный селектор
1. Селектором может быть дескриптор (имя тэга).
Пример 1 <html> |
 |
В данном примере дескрипторы (тэги) h1, p, a - являются селекторами для которых применяются соответствующие правила каскадных таблиц стилей
2. Селектором может быть перечень дескрипторов вложенных элементов - нисходящий селектор. Задается перечислением вложенных элементов через пробел.
Например, в примере заданный стиль будет присваиваться только гиперссылкам (дескриптор a), вложенным в элементы списков (дескриптор li).
Пример 2
<html>
<head>
<title> </title>
<style type="text/css">
li a {text-decoration: underline;}
</style>
</head>
<body>
<li><a href="#">ссылка</a>
</body>
</html>
Рассмотренные выше типы селекторов предназначены для присвоения стилей всем указанным в них элементам страницы.
3. Для более специфичного задания элементов используются селекторы идентификаторов и классов. С их помощью можно присваивать стили элементам, имеющим указанное имя идентификатора или класса.
В определении селектора идентификатора используется символ # (решетка) и имя_идентификатора, а в определении селектора классов используется символ . (точка) и имя_идентификатора.
Пример 3
<html>
<head>
<syle type="text/css">
#intro {font-weight: bold;}
- идентификатор
.date {color: grttn} - класс
</style>
</head>
<body>
<p id="intro">Текст</p>
<p class="date">24 марта</p>
</body>
</html>
4. Для более логичного использования назначения стилей разные области страницы можно заключить в элементы div, а затем присвоить стили элементам div на основе идентификаторов, как в приведенном далее примере.
Чтобы стили присваивались конкретным элементам слоя div используются нисходящие селекторы.
Пример 4
<html>
<head>
<syle type="text/css">
#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {font-size:1.2em;}
</style>
</head>
<body>
<div id="mainContent">
<h1>Добро пожаловать</h1>
...
</div>
<div id="secondaryContent">
<h1>Последние новости</h1>
...
</div>
</body>
</html>
5. Селекторы псевдоклассов для ссылок
В некоторых случаях элементу нужно присвоить стиль не на основе структуры документа, а по другим признакам, например в зависимости от состояния элемента формы или гиперссылки. Это можно сделать с помощью селектора псевдоклассов.
С помощью CSS мщжно задавать стиль отображения ссылок в зависимости от их состояния. Ссылка может иметь четыре состояния.
1. Непосещенная ссылка
a:link {color: blue;} /* Присвоение синего цвета непосещенной гиперссылке*/
2. Посещенная ссылка
a:visited {color: green;} /*Присвоение зеленого цвета посещенной гиперссылке*/
3. При наведении курсора мыши на ссылку
a:hover {color: red;} /*Присвоение красного цвета гиперссылке, на которую наведен указатель мыши,
4. При нажатии кнопки мыши на гиперссылку
a:active {color: green;} /*Присвоение зеленого цвета активной гиперссылке (в момент нажатия на указатель мыши)*/
Кроме того, существуют дополнительные псевдоклассы, например,
tr:hover {background-color: red;} /*Присвоение красного цвета строке таблицы, на которую наведен указатель мыши*/
input:focus {background-color:yellow;} /* Присвоение желтого цвета элементам ввода, имеющим в данный момент фокус*/
6. Универсальный селектор
Это один из наиболее мощных и наименее популярных типов селекторов. Он служит как бы метасимволом, замещающим любой доступный элемент. Как и метасимвол в текстовом коде, универсальный селектор обзначается символом "звездочка - * ". Обычно универсальный селектор применятся для стилизации каждого элемента страницы. Например, с помощью следующего правила можно отменить вывод по умолчанию внешних и внутренних пустых полосок для каждого элемента страницы.
* {
padding: 0;
margin: 0;
}
