Чтобы эффективно использовать стили при создании собственного сайта, необходимо знать несколько базовых правил по их использованию. Ниже я собрал все основные моменты, о которых нужно помнить.
Подключение внешней таблицы стилей
Удобнее всего оформление сайта вынести в отдельный стилевой файл. И тогда его достаточно будет один раз подсоединить ко всем страничкам и далее управлять внешним видом сайта, редактируя один-единственный файл. Подключение внешней таблицы стилей делается при помощи следующей конструкции:
...
<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 | Типографские пункты |
| pс | Типографские пики (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;
}
