Добавление стиля в HTML-документ
- inline-стиль
<p style="font-size:150%; text-align:center; color:green;" >
В этом тексте будут увеличенный размер шрифта, центрирование и зеленый цвет. </p>
- внедренный стиль;
- внешние таблицы стиля.
Добавление стиля в HTML-документ
<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css" >
<link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<style type="text/css">
p.special {
color: rgb(230, 100, 180);
}
</style>
- Какие таблицы стилей присутствуют?
- Если пользователь выбирает таблицу «compact», какие стили должен использовать браузер?
Селекторы
- Селектор типа
- Универсальный селектор
- Селектор атрибутов
- Селектор класса
- Селектор ID
Селекторы
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
p.Bordered { border: solid 1px black; }
.Bordered.dashed {border-style: dashed; }
#grayBorder { border-color: gray; }
</style> ... </head>
<body>
<p class="Bordered">
Это абзац класса Bordered</p>
<p class="Bordered dashed">
Это абзац классов Bordered и dashed</p>
<p id="grayBorder" class="Bordered dashed">
Это абзац классов Bordered и dashed, имеющий также id</p>
</body> </html>
Комбинаторы
- Потомки
- Соседи
ПРИМЕР
Специфичность и порядок применения правил
Задание
ДАН КОД
Пользуясь комбинаторами, назначить следующие стилевые свойства:
- непрямым потомкам секции со сплошной рамкой – зеленый цвет;
- прямым потомкам секции со сплошной рамкой – красный цвет;
- заголовку 2-го уровня, идущему сразу за заголовком 1 –го уровня – меньший отступ;
- заголовку в секции с точечной рамкой – размер шрифта 24 pt;
- элементам вложенного списка – курсивное начертание.
Юлия Сергеевна Пономарева