Контекстный селектор
Пусть у нас есть html-страница вот с таким кодом:
<html>
<head>
<title>Селекторы по элементу</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Этот текст находится в параграфе</p>
Это просто текст.
<i>Этот текст выделен курсивом</i>
<p>Этот текст находится в параграфе, но <i>эта часть выделена курсивом</i></p>
</body>
</html>
Мы хотим, чтобы курсив был выделен еще и зеленым цветом. Тогда в таблицу стилей мы запишем селектор по элементу, т.е.
i{
color:green;
}
Сейчас наша страница в браузере выглядит так:
Но что, если мы захотим, чтобы не весь курсивный текст выделялся зеленым, а лишь тот, который находится в параграфах. Для этого мы внесем изменения в таблицу стилей:
p i{
color:green;
}
Так мы указали, применять данный стиль к элементам i, которые находятся в элементах p. Названия элементов при этом отделяются пробелом. Такие селекторы называют контекстными. Теперь наша страница в браузере выглядит так:
Группировка селекторов
Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были зеленого цвета), то их можно сгруппировать. Для этого селекторы, к которым будет применяться один стиль, нужно перечислить через запятую. Пример:
h1, h2, h3{
color:green;
}
Предположим, что кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать в нашу таблицу стилей:
h1, h2, h3{
color:green;
}
h1{
font-size:18px;
}
h2{
font-size:16px;
}
h3{
font-size:14px;
}
У наших заголовков будет указанный размер, но все они будут зеленого цвета.
Вообще-то, насчет группировок имеются разногласия. Одни считают правильным вышеприведенный код, т.к. группировка помогла избежать повтора одинакового свойства для трех элементов, это сокращает код.
Другие считают, что таким образом, ухудшается логичность кода. Так как, найдя селектор для заголовка h3, не сразу понятно, почему текст в нем зеленого цвета. Сторонники логики рекомендуют группировать только элементы, у которых блоки описаний полностью совпадают.
В общем, группировать или нет, дело вашего вкуса. Но вы должны помнить о разных подходах, когда будете читать чужой код, например, в шаблонах.
Свойства шрифта
Font - Задает параметры шрифта элемента страницы.
font-family - Указывает имя шрифта или шрифтового семейства, используемого в элементе страницы.
font-weight - Задает "жирность" шрифта, используемого в элементе страницы.
font-size - Задает размер шрифта, используемого в элементе страницы.
font-style - Задает начертание шрифта.
font-variant - Задает вид малых букв шрифта, используемого в элементе страницы.
Цветовая гамма.
Color- Определяет цвет элемента.
Background- Задает все свойства фона элемента страницы в один прием.
background-color - Задает фоновый цвет Web-страницы или ее элемента.
background-image - Задает фоновый рисунок Web-страницы или ее элемента.
background-attachment - Данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
background-repeat - Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе. Иногда этот атрибут необходим, чтобы занять все свободное пространство, если фоновый рисунок слишком мал, чтобы покрыть пространство без повторения.
background-position - Задает местонахождение фонового рисунка.
background-position-x - Задает горизонтальную координату фонового рисунка.
background-position-y - Задает вертикальную координату фонового рисунка.
Свойства текста.