Сказка про Красную Шапочку
Жила однажды в далекой деревушке маленькая прелестная девочка. …
Из служебной XHTML разметки мы видим только элемент заголовка [[:html:tags:h|h1]] и абзаца [[:html:tags:p|p]], и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
/* оформляем заголовки: */
h1 {
color: red;
background-color: yellow;
font: Tahoma 2em;
}
/* оформляем абзацы текста: */
p {
color: grey;
line-height: 150%;
}
====== Включение CSS в HTML документ ======
Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
* применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента [[:html:tags:link|link]]
* встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента [[:html:tags:style|style]]
* применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style
Разберём эти способы подробнее.
===== Внешние стили (external style sheets) =====
Применяются с помощью элемента link, который должен располагаться внутри элемента [[:html:tags:head|head]] и нигде более.
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.
Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом [[:html:tags:link|link]].
===== Таблицы стилей документа (document style sheets) =====
Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).
CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента [[:html:tags:style|style]]:
Сам тег [[:html:tags:style|style]] (в отличие от [[:html:tags:link|link]]) может находиться в любой части документа, но обычно его размещают внутри элемента [[:html:tags:head|head]].
Стили, подставляемые в строку (inline styles)
Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента [[:html:tags:style|style]]. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):
Я абзац, выделенный красным цветом, других таких на сайте нет
Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента [[:html:tags:body|body]].
Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.
Замечание: избегайте использования вышеописанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.
====== Синтаксис CSS ======
Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения.
Как обычно выглядит css-правило
{{:html:css:selector.gif|}}
Как это может выглядеть на практике? Вот три примера CSS-правил:
a {text-decoration: none;}
p.announce {border: 1px dashed black;} /* здесь селектор - p.announce */
p.note {
display: block; /* да, объявлений может быть несколько */
float: right; /* и их не обязательно писать на одной строке */
}
Каждое правило начинается с селектора (по-русски – указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило.
В блоке объявлений происходит самое интересное – мы устанавливаем правила оформления выбранных нами элементов, переопределяя их свойства – размеры, цвет, бордюры, поля, положение на экране и т.д. Основная часть этого справочника состоит именно в описании этих свойств и их возможных значений.
====== Селекторы ======
Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило.
Вот три основных вида селекторов.
===== HTML селекторы =====
Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега [[:html:tags:strong|]] селектором будет strong. Соответственно, для тега [[:html:tags:h1|
strong {font-weight: normal; color: red;}
h1 { font: bold 10pt verdana; }
===== Селекторы класса =====
«Класс» - это некое имя, строка, которое мы можем применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:
{{:html:css:selector_class.gif|}}
.myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */
===== ID селекторы (или идентификаторы) =====
Любой идентификатор (ID) – это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:
{{:html:css:selector_id.gif|}}
#myObj { margin: 1em; } /* изменяем поля для элемента, у которого id=”myObj” */
span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */
====== Применение одного стиля к нескольким селекторам ======
Очень распространённая задача – применить один набор правил к нескольким разным селекторам. Это делается элементарно – достаточно перечислить селекторы через запятую:
Впоследствии оформление для селекторов можно переопределить индивидуально:
/* все параграфы и списки делаем красными, шрифтом Tahoma */
p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
/* переопределяем цвет на синий для нумерованных списков */
ol {color: blue;}
====== Селекторы, зависящие от контекста ======
Мы научились устанавливать стили для элементов HTML независимо от того, где именно в документе они расположены. Но CSS чуть гибче, чем кажется. Мы можем «прицеливаться» точнее и определять стили для элементов в зависимости от контекста (англ. Contextual Selectors).
Вот, посмотрите:
/* все ссылки, находящиеся внутри списков, станут красными: */
li a {color: red;}
/* все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */
table p a {color: green;}
Это самый распространённый метод создания контекстуальных селекторов, который называется «селектором потомков». Разберём его подробнее.
===== Селекторы потомков =====
«Потомками» элемента HTML называются любые вложенные в него элементы: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии тегов.
Правильно используя селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом.
{{:html:css:selectors_descendant_0.gif|}}
В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы [[:html:tags:a|A]]) вложенные в списки (элементы [[:html:tags:li|LI]]), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).
===== Селекторы детей =====
«Детьми» или «дочерними элементами» элемента HTML называются непосредственно вложенные в него элементы, он для них является «родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки» (см. предыдущий раздел).
CSS позволяет нам создать селектор для выбора дочерних элементов любого элемента и изменить их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком >.
{{:html:css:selectors_child.gif|}}
В приведённом примере мы находим все элементы [[:html:tags:b|B]], вложенные непосредственно в элементы [[:html:tags:i|I]], и выключаем для них полужирный шрифт. Все остальные элементы [[:html:tags:b|B]] в документе останутся без изменений.
===== Селекторы смежных элементов (Adjacent Sibling Selectors) =====
Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки [[:html:tags:h1|H1]], следующие за параграфами [[:html:tags:p|P]], и изменить их верхний отступ, мы напишем следующее правило CSS:
{{:html:css:selectors_adjacent.gif|}}
body {margin: 1in}
table {padding: 1.5cm}
p {text-indent: -2pt}
img.logo {height: 12px}
p {text-indent: 3em}
blockquote {padding-bottom: 2ex}
table {border-width: 7.5pc}
====== Блочная модель (Box Model) ======
Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.
Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).
Предположим, мы имеем на входе:
Какой-то контент
{{:html:css:box-model_explained.png|}}
В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.
Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.
Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
* Собственно, содержимое элемента (контент)
* Бордюр (рамка, англ. "border")
* Пространство между содержимым элемента и бордюром (англ. "padding").
* Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").
Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").
===== Блочные (block) элементы =====
Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, [[html:tags:h1|h1]] является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
===== Inline- ("инлайн"-) элементы =====
Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.
С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
====== Приоритет в каскаде стилей (!important) ======
Объявление !important переводится на русский как !важно.
Если к паре свойство - значение приписать объявление !important, тогда это значение CSS-свойства получит максимальный приоритет в каскаде стилей. Проще говоря, это объявление сработает для элемента независимо от наличия других правил CSS для этого же элемента.
!important добавляется вот так:
{{:html:css:important.gif|}}
Внимание! Очень распространённая ошибка – располагать !important после точки с запятой. Браузер игнорирует такие записи.
====== Задание цвета в CSS ======
CSS предлагает нам четыре удобных способа указать цвет.
* По имени. Используются англоязычные названия цветов, например blue или red (см. [[html:css#imenovannye_cveta|Именованные цвета]]).
* В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. [[html:css#bezopasnye_browser-safe_cveta_v_css|Безопасные (browser-safe) цвета в CSS]]).
* В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.
* В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.
Пример
/* Несколько способов сделать параграфы зелеными: */
p {color: lime}
p {color: rgb(0,255,0)}
p {color: #0f0}
p {color: #00ff00}
p {color: rgb(0%, 100%, 0%)}
В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым.
====== Именованные цвета ======
Это базовые цвета, используемые в CSS. В старые добрые времена они использовались дизайнерами для создания страниц поисковых систем, а также в дизайне сайтов с огромной аудиторией, то есть там, где нужна максимальная совместимость. Все они прекрасно отображаются даже в 256-цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато.
| Black | Navy | ||
| Gray | Blue | ||
| Silver | Aqua | ||
| White | Green | ||
| Red | Lime | ||
| Fuchsia | Teal | ||
| Maroon | Yellow | ||
| Purple | Olive |
| КРАСНЫЙ И СИНИЙ – ДОБАВЛЯЕМ ЗЕЛЕНЫЙ | |||||
|---|---|---|---|---|---|
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
| КРАСНЫЙ И ЗЕЛЕНЫЙ – ДОБАВЛЯЕМ СИНИЙ | |||||
| 000000 | 003300 | 006600 | 009900 | 00CC00 | 00FF00 |
| 330000 | 333300 | 336600 | 339900 | 33CC00 | 33FF00 |
| 660000 | 663300 | 666600 | 669900 | 66CC00 | 66FF00 |
| 990000 | 993300 | 996600 | 999900 | 99CC00 | 99FF00 |
| CC0000 | CC3300 | CC6600 | CC9900 | CCCC00 | CCFF00 |
| FF0000 | FF3300 | FF6600 | FF9900 | FFCC00 | FFFF00 |
| 000033 | 003333 | 006633 | 009933 | 00CC33 | 00FF33 |
| 330033 | 333333 | 336633 | 339933 | 33CC33 | 33FF33 |
| 660033 | 663333 | 666633 | 669933 | 66CC33 | 66FF33 |
| 990033 | 993333 | 996633 | 999933 | 99CC33 | 99FF33 |
| CC0033 | CC3333 | CC6633 | CC9933 | CCCC33 | CCFF33 |
| FF0033 | FF3333 | FF6633 | FF9933 | FFCC33 | FFFF33 |
| 000066 | 003366 | 006666 | 009966 | 00CC66 | 00FF66 |
| 330066 | 333366 | 336666 | 339966 | 33CC66 | 33FF66 |
| 660066 | 663366 | 666666 | 669966 | 66CC66 | 66FF66 |
| 990066 | 993366 | 996666 | 999966 | 99CC66 | 99FF66 |
| CC0066 | CC3366 | CC6666 | CC9966 | CCCC66 | CCFF66 |
| FF0066 | FF3366 | FF6666 | FF9966 | FFCC66 | FFFF66 |
| 000099 | 003399 | 006699 | 009999 | 00CC99 | 00FF99 |
| 330099 | 333399 | 336699 | 339999 | 33CC99 | 33FF99 |
| 660099 | 663399 | 666699 | 669999 | 66CC99 | 66FF99 |
| 990099 | 993399 | 996699 | 999999 | 99CC99 | 99FF99 |
| CC0099 | CC3399 | CC6699 | CC9999 | CCCC99 | CCFF99 |
| FF0099 | FF3399 | FF6699 | FF9999 | FFCC99 | FFFF99 |
| 0000CC | 0033CC | 0066CC | 0099CC | 00CCCC | 00FFCC |
| 3300CC | 3333CC | 3366CC | 3399CC | 33CCCC | 33FFCC |
| 6600CC | 6633CC | 6666CC | 6699CC | 66CCCC | 66FFCC |
| 9900CC | 9933CC | 9966CC | 9999CC | 99CCCC | 99FFCC |
| CC00CC | CC33CC | CC66CC | CC99CC | CCCCCC | CCFFCC |
| FF00CC | FF33CC | FF66CC | FF99CC | FFCCCC | FFFFCC |
| 0000FF | 0033FF | 0066FF | 0099FF | 00CCFF | 00FFFF |
| 3300FF | 3333FF | 3366FF | 3399FF | 33CCFF | 33FFFF |
| 6600FF | 6633FF | 6666FF | 6699FF | 66CCFF | 66FFFF |
| 9900FF | 9933FF | 9966FF | 9999FF | 99CCFF | 99FFFF |
| CC00FF | CC33FF | CC66FF | CC99FF | CCCCFF | CCFFFF |
| FF00FF | FF33FF | FF66FF | FF99FF | FFCCFF | FFFFFF |
| ЗЕЛЕНЫЙ И СИНИЙ – ДОБАВЛЯЕМ КРАСНЫЙ | |||||
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |