Краткий справочник по CSS2

Чтобы эффективно использовать стили при создании собственного сайта, необходимо знать несколько базовых правил по их использованию. Ниже я собрал все основные моменты, о которых нужно помнить.

Подключение внешней таблицы стилей

Удобнее всего оформление сайта вынести в отдельный стилевой файл. И тогда его достаточно будет один раз подсоединить ко всем страничкам и далее управлять внешним видом сайта, редактируя один-единственный файл. Подключение внешней таблицы стилей делается при помощи следующей конструкции:

 ...
 <head>
 ...
 <link rel="stylesheet" href="style.css" type="text/css" title="Таблица стилей">
 ...
 </head>
 ...

Ссылка на стиль внутри HTML-кода

Написать стиль мало, необходимо его еще грамотно связать с нужным фрагментом документа. Это можно сделать при помощи атрибутов id или class. Атрибут id используется в тех случаях, когда необходимо указать уникальный объект на странице:

 <div id="header">
 ...
 </div>

Атрибут же class может применяться сразу к нескольким объектам на страничке. Например, мы можем особым образом оформить все цитаты на страничке:

 <p class="cite">Этот абзац является цитатой.</p>
 ...
 <p>Это обычный абзац, содержащий основной текст.</p>
 ...
 <p class="cite">А этот абзац снова цитата</p>

HTML-теги <div> и <span> Стиль можно привязать к любому логическому тегу на страничке, но иногда этого недостаточно. В этом случае мы можем ввести специальные теги, которые не несут никакой смысловой нагрузки, а служат только элементами привязки стиля. Это теги <div> и <span>. Тег <div> является универсальным блочным тегом и похож по поведению на теги абзацев или заголовков, а тег <span> является универсальным строчным тегом и он похож на теги логического выделения или ссылки.

 <div id="header">
 <h1>Заголовок сайта</h1>
 <p>Краткое описание сайта</p>
 </div>
 
 ...
 
 <p>В этом <span class="letter_a">абзаце</span>  необходимо 
 было каким-то образом пометить те слова, которые начинаются на букву "А", 
 и для этого был использован универсальный строчный тег.</p>

Тег <div> очень удобно применять для организации смысловых блоков на страничке, как это показано в примере выше. Можно разметить верхнюю шапку страницы, меню сайта, основное содержание и затем легко ссылаться на нужный блок внутри таблицы стилей.

Общий синтаксис CSS-команд

Все CSS-команды (правила) используют следующий синтаксис:

 селектор {
    правило_1: значение_1;
    правило_2: значение_2;
    ...
 }

Селектор определяет элемент на страничке, к которому необходимо применить стиль. В качестве селектора может выcтупать любой тег, а также созданные нами ранее идентификаторы и классы:

 p {
    ...
 }
 
 .letter_a {
    ...
 }
 
 #header {
    ...
 }

Описание класса всегда начинается с точки (.), а описание идентификатора - с решетки (#).

Контекстные селекторы

Кроме простых селекторов, которые приведены выше, возможно использование и более сложных конструкций. Одна из наиболее удобных возможностей - это использование контекстных селекторов. В этом случае действие стиля рапространяется только на указанный контекст.

 #header h1 {
     font-size: 16pt;
 }

В данном примере размер шрифта, равный 16 пунктам, будет установлен только для заголовка h1, находящегося в слое #header. На все остальные заголовки h1 это правило не повлияет. Контекстные селекторы позволяют минимизировать количество тегов <div> и <span>.

Псевдоклассы

В CSS существует возможность указать стиль для определенного состояния того или иного объекта. Например, изменить стиль при наведении курсора мышки или сделать буквицу в абзаце. Это возможно благодаря псевдоклассам. Список основных псевдоклассов приведен в таблице.

Псевдокласс Описание
hover Стиль применяется при наведении курсора на элемент
active Стиль применяется в момент активизации элемента пользователем
focus Стиль применяется когда элемент получает фокус ввода
link Стиль применяется к еще непосещенным ссылкам
vivsited Стиль применяется к уже просмотренным ссылкам
first-line Стиль применяется к первой строке абзаца
first-letter Стиль применяется к первой букве абзаца

Псевдокласс может быть подсоединен к любому селектору через двоеточие.

 a:hover {
     color: red;
 }
 
 a:visited {
     color: maroon;
 }
 
 p:first-letter {
     font-size: 300%;
 }

Комментарии в таблице стилей

В процессе написания сложных стилей, состоящих из множества десятков правил, очень удобно использовать комментарии, чтобы не запутаться в них. Синтаксис комментариев такой же, как и в языке программирования C.

 /* Данный текст будет считаться комментарием */

Основные единицы измерения

Единица измерения Описание
px Пикселы
% Проценты
pt Типографские пункты
Типографские пики (1pc = 12pt)
in Дюймы (1in = 72pt)
mm Миллиметры
сm Сантиметры
ex Ширина буквы "x" в выбранном шрифте
em Ширина буквы "m" в выбранном шрифте

Ниже приведен пример использования различных единиц измерения:

 #header {
     width: 100%;
     height: 150px;
 }
 
 p {
     font-size: 12pt;
     text-indent: 5mm;
     line-height: 1.5em;
 }

Указание цвета в CSS-свойствах

Несколько CSS-параметров используют в качестве своего значения цвет. Цвет может быть представлен либо в виде ключевого слова, либо в виде шестнадцатеричного числа, начинающегося с решетки (#). В последнем случае значение цвета состоит из трех чисел по две шестнадцатеричные цифры, определяющих количество красной, зеленой и синей компоненты цвета. Ниже приведена таблица ключевых слов и соответствующие им шестнадцатеричные значения.

Название HEX-код Название HEX-код
aqua #00FFFF navy #000080
black #000000 olive #808000
blue #0000FF purple #800080
fuchsia #FF00FF red #FF0000
gray #808080 silver #C0C0C0
green #008000 teal #008080
lime #00FF00 white #FFFFFF
maroon #800000 yellow #FFFF00

Следующими командами мы можем определить цвет фона для всей странички и красный цвет для заголовков 1-го уровня.

 body {
     background-color: #ffcc00;
 }
 
 h1 {
     color: red;
 }

Смотри также