Лекция № 8. Каскадные таблицы стилей

Лекция № 8. Каскадные таблицы стилей
1. Каскадные таблицы стилей
Каскадные таблицы стилей представляют собой декларативный язык для описания
форматирования элементов веб-страницы. Таблицы стилей называются «каскадными», потому
что к каждой веб-странице может применяться не одна таблица стилей, а целый каскад таблиц.
Таблица стилей состоит из набора правил. Каждое правило определяет одно или
несколько свойств для одного или нескольких элементов. Правило имеет следующий синтаксис:
<селектор> { <свойство>: <значение> [!important]; ... }
Неизвестные селекторы, неизвестные свойства и их значения, а также синтаксически
некорректные части правил игнорируются браузерами. Никаких сообщений об ошибках при этом
не выдаётся.
Свойства, определяющие параметры шрифта и параметра текста, а также некоторые
другие свойства наследуются дочерними элементами.
Таблица стилей может включать комментарии, которые начинаются с сочетания
символов /* и заканчиваются сочетанием символов */.
Для задания таблицы стилей в HTML-файле можно использовать элемент style, однако
сайты обычно содержат много веб-страниц и желательно использовать один и тот же стиль
оформления для всех страниц сайта. Поэтому удобнее записывать таблицу стилей в отдельном
файле и подключать этот CSS-файл во все HTML-файлы сайта с помощью элемента link.
<link rel = stylesheet href = url type = "text/css" [media = media-type]>
Стиль элемента можно также задавать с помощью атрибута style, но этот способ
предназначен для задания стиля отдельных элементов, а не для общего оформления страницы.
Элемент link может иметь атрибут media, который определяет тип устройства, для
которого предназначена таблица стилей. К каждому HTML-файлу можно подключить несколько
таблиц стилей и с их помощью задать различное форматирование для разных устройств. Тип
устройства можно также задать для некоторых правил непосредственно в таблице стилей.
@media media-type { правила }
Таблицы стилей можно разделить на три типа в соответствии с происхождением таблицы:
авторские – создаются автором веб-страницы и поставляются вместе со страницей;
пользовательские – таблицы, которые создаются пользователем и подключаются в браузере
на компьютере клиента;
 стандартные – таблицы стилей, определённые в браузере.
Кроме того, таблицы стилей можно разделить по типу устройств, для которых они
предназначены. Как было сказано выше, при связывании таблицы с HTML-файлом или для
некоторых правил можно указать параметр, определяющий тип устройств. Этот параметр может
иметь следующие значения:
 all – таблица применяется для всех типов устройств;
 screen – таблица применяется при отображении веб-страницы на экране компьютера;
 print – таблица применяется при печати документа, а также при предварительном просмотре;
 speech – таблица применяется в синтезаторах речи;
 handheld – таблица применяется при отображении веб-страницы на портативных устройствах.
В итоге получается, что для каждого элемента может существовать несколько правил. Для
выбора применяемого правила используется следующий алгоритм.
1. Прежде всего, выбираются правила, предназначенные для устройств нужного типа. Если
специфической таблицы нет, то применяются правила из таблицы, применяемой ко всем
типам устройств.
2. Далее из всех правил выбираются более приоритетные. Правила сортируются следующим
образом (в порядке уменьшения приоритета):
 пользовательские правила с пометкой !important;
 авторские правила с пометкой !important;
 обычные авторские правила;
 обычные пользовательские правила;
35


 стандартные правила.
3. Если правил с одинаковым приоритетом несколько, то выбираются самые специфичные
правила. Наиболее специфичными считаются правила, предназначенные для элементов с
определённым идентификатором, затем – правила, предназначенные для элементов,
принадлежащих определённому классу или псевдоклассу, затем – правила, предназначенные
для элементов, вложенных в другие элементы, и, наконец, правила, предназначенные для
элементов без каких-либо дополнительных характеристик.
4. Если правил с одинаковой специфичностью несколько, то выбирается правило, которое
оказывается самым последним.
2. Свойства и их значения
2.1. Значения свойств
Свойства могут иметь некоторые предопределённые значения, которые записываются без
кавычек. В кавычках записываются только имена файлов и имена шрифтов, содержащие
пробелы. Строковые значения, которые также нужно записывать в кавычках, редко встречаются
в таблицах стилей.
Значения свойств могут быть числовыми. При этом они определяются с использованием
ряда единиц измерения. Абсолютные значения измеряются в следующих единицах:
 in – дюйм (2.54 см);
 cm – сантиметр;
 mm – миллиметр;
 pt – пункт (1/72 дюйма ≈ 0.35 мм);
 px – пиксел (0.75 пункта).
Относительные значения измеряются либо в процентах, либо в относительных единицах,
обозначаемых em, которые задают размеры относительно размера используемого шрифта.
Некоторые свойства задают цвет той или иной части элемента. Для представления цвета
используются следующие способы:
 ключевые слова, задающие название цвета;
 шестнадцатеричное представление, например, #ffffff;
 цветовая модель RGB, например, rgb(255, 0, 128);
 цветовая модель HSL (тон – насыщенность – яркость), например, hsl(120, 100%, 50%).
Для большинства свойств можно также использовать значение inherit, что заставляет
браузер использовать для данного свойства элемента такое же значение, какое имеет данное
свойство родительского элемента.
2.2. Свойства фона
Имя
Значения
Начальное
значение
background-attachment
scroll | fixed
scroll
<color>
<url> | none
<%> <length> top bottom
left right center
repeat-x | repeat-y |
repeat | no-repeat
color image repeat
attachment position
transparent
none
0% 0%
background-color
background-image
background-position
background-repeat
background
repeat
Описание
Определяет, будет ли фоновый
прокручиваться вместе с содержимым.
Задаёт цвет фона элемента.
Задаёт фоновый рисунок.
Задаёт позицию фонового рисунка.
рисунок
Определяет способ повтора фонового рисунка.
Свойство, объединяющее все характеристики
фона.
body { background-image: url(Background.gif); background-color: indianred; background-attachment: fixed }
body { background: lightcoral url("Background.gif") repeat-x fixed left 30pt }
2.3. Высота и ширина
Имя
height
width
overflow
Значения
Начальное
значение
<%> | <length> | auto
<%> | <length> | auto
visible | hidden | scroll | auto
auto
auto
visible
36
Описание
Задаёт высоту элемента.
Задаёт ширину элемента.
Определяет, что происходит, когда содержимое
элемента превосходит его высоту или ширину.
pre { height: 100pt; width: 220pt; overflow: scroll }
pre { height: 100pt; width: 220pt; overflow: auto }
2.4. Поля и отступы
Имя
margin-top
margin-right
margin-bottom
margin-left
margin
padding-top
padding-right
padding-bottom
padding-left
padding
p
p
p
p
{
{
{
{
margin:
margin:
margin:
margin:
Значения
Начальное
значение
<width>
0
Задают поля элемента.
<width>{1, 4}
<width>
0
Свойство, объединяющее все поля элемента.
Задают отступы элемента.
Свойство, объединяющее все отступы элемента.
<width>{1, 4}
10pt }
15pt 5pt }
5pt 7pt 10pt }
5pt 7pt 8pt 10pt }
/*
/*
/*
/*
Описание
Все поля равны 10pt */
Верхнее и нижнее поле равны 15pt, правое и левое - 5pt */
Верхнее поле равно 5pt, нижнее – 10pt, правое и левое – 7pt */
Верхнее поле равно 5pt, правое – 7pt, нижнее – 8pt, левое – 10pt */
2.5. Границы
Имя
Значения
border-width
border-style
border-color
border-top
border-right
border-bottom
border-left
border
border-radius









<width>{1,
<style>{1,
<color>{1,
<width> <style>
Начальное
значение
4}
4}
4}
<color>
0
none
<width> <style> <color>
<length>{1, 4}
Описание
Задаёт ширину границ.
Задаёт стиль границ.
Задаёт цвет границ.
Задают ширину, стиль и цвет верхней, правой,
нижней и левой границы.
Задаёт ширину, стиль и цвет всех границ.
Задаёт радиус закругления углов границы.
0
Стиль границ может быть следующим:
none – граница отсутствует;
solid – сплошная граница;
dotted – точечная граница;
dashed – штриховая граница;
double – двойная граница;
groove – граница выглядит так, как будто она вдавлена в холст;
ridge – граница выглядит так, как будто она выступает над холстом;
inset – граница заставляет элемент выглядеть так, как будто он вдавлен в холст;
outset – граница заставляет элемент выглядеть так, как будто он выступает над холстом.
section
section
section
section
section
section
section
{
{
{
{
{
{
{
border: 5pt solid indigo }
border: 5pt groove }
border: 5pt ridge }
border: 5pt inset }
border: 5pt outset }
border-top: 2pt dotted darkgreen; border-right: 2pt dashed darkolivegreen }
border-width: 3pt; border-style: dashed dotted;
border-color: darkviolet darkmagenta darkgreen darkslateblue }
section { border: 2pt solid; border-radius: 5pt 10pt 15pt 20pt }
2.6. Позиционирование
Имя
float
clear
position
top
right
bottom
left
display
Значения
Начальное
значение
none | left | right
none | left | right | both
none
none
static | absolute | relative | fixed
<%> | <length> | auto
static
auto
Описание
Создаёт плавающий элемент.
Определяет, будет ли элемент перекрываться
плавающими элементами.
Задаёт способ позиционирования элемента.
Задаёт позицию элемента для позиционированных
элементов, т.е. элементов, для которых свойство
position имеет значение absolute, relative или fixed.
Определяет способ отображения элемента.
none | block | inline | list-item
37
2.7. Шрифт
Имя
Значения
Начальное
значение
font-style
font-variant
normal | italic | oblique
normal | small-caps
normal
normal
font-weight
normal | bold | bolder| lighter
normal
<absolute-size> | <relative-size>
| <length> | <%>
normal | <length> | <number> | <%>
medium
font-size
line-height
font-family
font
color
normal
<font-style> <font-variant>
<font-weight> <font-size> / <lineheight> <font-family>
<color>
Описание
Задаёт стиль шрифта.
Определяет написание слов обычным способом
или с использованием малых прописных букв.
Задаёт плотность шрифта. Значения bolder и
lighter используются для задания плотности
шрифта некоторого элемента относительно
плотности шрифта его родительского элемента.
Задаёт размер шрифта.
Задаёт высоту строки текста.
Задаёт шрифт или семейство шрифтов.
Задаёт все характеристики шрифта. Выделенные
составляющие являются обязательными.
Задаёт цвет текста элемента.
Свойство font-size может быть выражено в абсолютных значениях, например, 12pt, в
процентах относительно размера шрифта родительского элемента, а также с помощью ряда
ключевых слов, которые также задают абсолютный (xx-small, x-small, small, medium, large, x-large,
xx-large) или относительный (smaller, larger) размер шрифта.
Свойство font-family может задавать несколько шрифтов. Значение свойства состоит из
имён конкретных шрифтов и обобщённого имени группы шрифтов, а именно, serif, sans-serif,
monospace, cursive и fantasy. Если первый из перечисленных шрифтов не установлен на
компьютере пользователя, браузер пытается использовать второй шрифт. Если второй шрифт
также не установлен, браузер будет использовать третий шрифт, и т.д. Если никакой из
перечисленных шрифтов не установлен на компьютере пользователя, будет использоваться
любой шрифт из заданной группы шрифтов.
p { font-style: italic; font-family: Cambria, "Times New Roman", serif }
p { font: italic small-caps bold 14pt/200% Verdana, Arial, sans-serif }
p { font: bold 16pt Verdana, Arial, sans-serif; color: forestgreen }
2.8. Свойства текста
Начальное
значение
Имя
Значения
text-indent
text-align
text-decoration
<length> | <%>
left | right | center | justify
none | underline | overline |
line-through | blink
0
left
none
text-transform
none | capitalize | uppercase |
lowercase
normal | <length>
normal | <length>
normal | pre | nowrap |
pre-wrap | pre-line
none
letter-spacing
word-spacing
white-space
Описание
Задаёт отступ первой строки текста элемента.
Задаёт способ выравнивания текста элемента.
Задаёт
дополнительные
элементы
текста.
Значение blink работает не во всех браузерах.
Задаёт вид букв текста элемента.
normal
normal
normal
Изменяет расстояние между буквами текста.
Изменяет расстояние между словами текста.
Определяет, как браузер будет обрабатывать
разделители и перевод строки.
p { text-indent: 10%; text-align: justify }
p { text-align: center; text-decoration: underline; letter-spacing: 0.5em }
2.9. Тени
Имя
box-shadow
text-shadow
Значения
none | inset <length> <length>
<length> <color>
none | <length> <length>
<length> <color>
Начальное
значение
Описание
none
Определяет тень элемента.
none
Определяет тень текста.
Первое число length задаёт горизонтальное смещение, при этом положительное число
определяет смещение направо, отрицательное – налево. Второе число задаёт вертикальное
смещение, при этом положительно число определяет смещение вниз, отрицательное – вверх.
Третье число задаёт размытие тени. Добавление ключевого слова inset преобразует внешнюю
тень во внутреннюю.
div { border: 2pt solid hsl(240, 100%, 20%); box-shadow: 10pt 10pt 5pt hsl(240, 80%, 80%) }
38
div { border: 2pt solid hsl(240, 100%, 20%); box-shadow: inset 10pt 10pt 5pt hsl(240, 80%, 80%) }
div { box-shadow: 10pt 10pt 5pt hsl(240, 80%, 80%) }
h1 { font: bold 24pt Cambria; color: hsl(30, 90%, 50%); text-shadow: 3pt 3pt 0 hsl(20, 75%, 25%) }
2.10. Другие свойства
Значения
Начальное
значение
border-collapse
collapse | separate
separate
border-spacing
<length> <length>
0
<number>
1
none | disc | circle | square |
decimal | decimal-leading-zero |
lower-roman | upper-roman |
lower-greek | lower-latin |
upper-latin | armenian | georgian
none | <url>
disc
Имя
opacity
list-style-type
list-style-image
table
table
img
ul
ol
{
{
{
{
{
border-collapse:
border-collapse:
opacity: 0.4 }
list-style-type:
list-style-type:
none
Описание
Определяет, будут ли сливаться границы
соседних ячеек таблицы.
Определяет расстояние между границами
соседних ячеек таблицы.
Определяет прозрачность элемента. Значение
0 соответствует полностью прозрачному
состоянию,
значение
1
–
полностью
непрозрачному.
Задаёт маркер или способ нумерации списка.
Определяет рисунок, который будет использоваться как маркер списка.
collapse }
separate; border-spacing: 5pt 10pt }
square }
lower-greek }
3. Селекторы
Правила, приведённые выше в примерах, будут применяться ко всем элементам
указанного типа. Но в документе может потребоваться выделить элементы с заданным идентификатором, элементы, принадлежащие определённому классу, элементы, входящие в другие
элементы и т.п. Для этого в правилах можно использовать более сложные селекторы.
Селектор
*
E
E.class
E#id
E F
E > F
E ~ F
E + F
Описание
Универсальный селектор – соответствует любому элементу
Любой элемент типа E
Элемент типа E, принадлежащий классу class
Элемент типа E с идентификатором id
Элемент типа F, вложенный в элемент типа E
Элемент типа F, непосредственно вложенный в элемент типа E
Элемент типа F, которому предшествует элемент типа E
Элемент типа F, которому непосредственно предшествует элемент типа E
Разные типы выделения элементов могут быть скомбинированы друг с другом. Кроме
того, несколько селекторов можно написать через запятую.
p, a { … }
p.attr { … }
.attr { … }
div#ref { … }
#ref { … }
p span.elem { … }
/*
/*
/*
/*
/*
/*
Правило будет применяться ко всем абзацам и ко всем ссылкам */
Правило будет применяться ко всем абзацам, принадлежащим классу attr */
Правило будет применяться ко всем элементам, принадлежащим классу attr */
Правило будет применяться ко всем элементам div с идентификатором ref */
Правило будет применяться к элементам любого типа с идентификатором ref */
Правило будет применяться к элементам span, принадлежащим классу elem,
которые при этом вложены в элемент p */
p.attr span.elem { … }
/* Правило будет применяться к элементам span, принадлежащим классу elem,
которые при этом вложены в элемент p, принадлежащий классу attr */
div ol span { … }
/* Правило будет применяться к элементу span, вложенному в элемент ol,
который, в свою очередь, вложен в элемент div */
section > p { … }
/* Правило будет применяться к элементу p, который вложен непосредственно
в элемент section (см. пример ниже) */
/* Правило из предыдущего примера будет применяться к первому абзацу и не будет применяться ко второму абзацу */
<section>
<p> Текст </p>
<div>
<p> Текст </p>
</div>
</section>
a ~ p { … }
/* Правило будет применяться к абзацу, который находится после ссылки */
a + p { … }
/* Правило будет применяться к абзацу, который находится сразу после ссылки */
39
/* Первое правило из предыдущего примера будет применяться к обоим абзацам, второе правило – только к первому */
<a> Ссылка </a>
<p> Первый абзац </p>
<p> Второй абзац </p>
4. Псевдоклассы и псевдоэлементы
Кроме обычных элементов и классов существуют также так называемые псевдоклассы и
псевдоэлементы. Обычные селекторы позволяют выделять элементы на основе классов и идентификаторов и информации об относительном расположении элементов. Псевдоклассы и псевдоэлементы позволяют выделять элементы на основе информации, которая не входит непосредственно в HTML-файл. Кроме того, принадлежность элемента к псевдоклассу может меняться динамически. Псевдоклассы и псевдоэлементы могут комбинироваться с обычными селекторами.
Псевдокласс
:link
:visited
:hover
:empty
:first-of-type
:last-of-type
:nth-of-type(N)
:nth-last-of-type(N)
:not(X)
Псевдоэлемент
:first-line
:first-letter
:before
:after
Описание
Непосещённая ссылка
Посещённая ссылка
Элемент принадлежит к данному псевдоклассу, когда на него наведён курсор
Элемент, не имеющий содержимого
Первый элемент некоторого типа
Последний элемент некоторого типа
N-ый элемент некоторого типа
N-ый с конца элемент некоторого типа
Элемент, не являющийся X, где X – простой селектор
Описание
Первая строка
Первая буква
Псевдоэлемент, представляющий дополнительный текст перед содержимым элемента
Псевдоэлемент, представляющий дополнительный текст после содержимого элемента
/* Выделяем первую строку абзаца */
p:first-line { background-color: lightskyblue }
/* Выделяем первую букву абзаца */
p:first-letter { font: bold italic 28pt Cambria }
/* Добавляем текст перед содержимым абзаца */
p:before { content: "Дополнение"; color: darkred }
/* Выделяем первую и последнюю строку таблицы */
tr:first-of-type { background-color: gray }
tr:last-of-type { background-color: silver }
/* Чётные строки таблицы будут иметь один цвет фона, нечётные – другой */
tr:nth-of-type(2n)
{ background-color: goldenrod }
tr:nth-of-type(2n+1) { background-color: silver }
/* С помощью цвета фона строки таблицы будут разделены
tr:nth-of-type(3n+1) { background-color: hsl(270, 50%,
tr:nth-of-type(3n+2) { background-color: hsl(270, 50%,
tr:nth-of-type(3n)
{ background-color: hsl(270, 50%,
на группы по три строки */
40%) }
60%) }
80%) }
/* Выбираем все элементы, не являющиеся абзацами */
*:not(p) { … }
/* Выбираем все абзацы, не принадлежащие классу attr */
p:not(.attr) { … }
/* Выбираем все элементы, не являющиеся ссылками */
*:not(:link):not(:visited) { … }
5. Развитие стандарта CSS3
Рассмотренные возможности в большинстве своём относятся к стандарту CSS2.1. Стандарт
CSS3 находится в разработке и предполагает добавление множества интересных возможностей.
Будут добавлены возможности создания сложных границ и различных линий под текстом/над
текстом, размещения документа в несколько колонок, создания градиентов, трансформации
объектов, анимации, создания условных правил в каскадных таблицах стилей.
40