Структура и правила
План
1. Технология CSS, ее особенности
2. Структура и правила CSS
3. Основные свойства CSS и их значение
4. Способы подключения CSS
5. Примеры использования CSS
Основная литература: [1, 5, 6, 13, 20, 23, 32, 35]
Дополнительная литература: [16, 19, 31, 51]
Кроме собственно языка HTML существует еще большое количество дополнений, которые призваны облегчить жизнь веб-мастеру и немного навести порядок на сайте. Есть среди них полезные, есть и вредные, но есть два дополнения, которые нужно использовать обязательно, даже если сейчас вы не видите, как они могут вам пригодится. Эти два дополнения – SSI (Server Side Inclusions) и CSS (Cascade Stile Sheets), оба они довольно простые, хоть и обладают огромными возможностями.
С помощью SSI вы можете включать в свою страницу любые необходимые вам фрагменты (тексты, картинки, счетчики, результаты работы программы и пр.) непосредственно на сервере. Это дает вам возможность загружать в заданное место страницы повторяющиеся элементы по всему сайту из одного источника. Хороший пример – оглавление – оно обычно повторяется на всех страницах узла и всегда одинаковое. Поставив директиву SSI, вы сможете хранить оглавление в отдельном текстовом (или HTML) файле, который сервер будет вставлять на каждой странице в указанное вами место. Такой файл гораздо легче исправить, если возникает такая необходимость. Представьте, что у вас 200 файлов, в каждом надо исправить оглавление и положить на сервер, а тут – поменял текст в одном файле и положил на сервер за несколько секунд. Кроме того, при большом объеме сайта можно значительно выиграть в дисковом пространстве, которое вам потребуется, и вам, например, потребуется меньше времени на «заливку» файлов на сервер.
Второе важное дополнение – это каскадные таблицы стилей – CSS. Они позволяют определять и переопределять стили оформления текста, а также других элементов на странице. На самом деле, возможности CSS очень велики: используя эту систему вы можете задать оформление всего сайта, описав его параметры в одном единственном файле, а потом несколькими движениями мыши переделать все оформление, просто поставив другие параметры в файле-описании. Более того, существуют системы на основе CSS, позволяющие то же самое проделывать не только издателю, но и посетителям. Это немножко похоже на фокус. Если вы когда-нибудь игрались с Desktop Themes (штука такая в Control panel, меняющая оформление Microsoft Windows) или загружали себе на компьютер шкурки (skins), то здесь нечто похожее: поменял один файл-описание на другой, и на тебе: совершенно другой сайт.
В отличие от SSI, CSS – это инструкции для браузера, а не для сервера, причем, далеко не все браузеры в состоянии грамотно отобразить их, а, следовательно, не стоит удивляться тому, что не все пользователи смогут увидеть все красоты вашего сайта. Самая распространенная схема использования CSS – это переопределение стандартного ряда стилей H1–H6 и одновременное создание нескольких дополнительных стилей с собственными названиями. В результате, вы используете при верстке страниц стандартные стили, которые при открывании страницы пользователем выглядят в соответствии с заданными вами директивами. Если же браузер пользователя не в состоянии грамотно интерпретировать CSS инструкции, то человек увидит просто стандартные стили. Таким образом, сайт пострадает не катастрофично и все равно будет вполне читаемым, конечно, если вы использовали стили по назначению: H1 – самый крупный заголовок, H2 – немного помельче и т.д.
При желании, если вы определяете большое количество стилей, вы можете снести все записи в отдельный файл (обычно default.css), который браузер будет автоматически забирать при заходе на сайт. Это, кстати, реально увеличивает скорость загрузки, при длительном нахождении на сайте, поскольку файл описания стилей загружается один раз и только в самом начале сессии, а вот подставляется оно во все страницы, следовательно, при указывании стилей в заголовке каждой страницы, вы каждый раз увеличиваете объем файла на лишний 1-2 килобайта.
Теперь вы можете менять стилистику всего файла, редактируя один текстовый файл. Кроме того, вы автоматически применяете один и тот же стиль оформления по всему сайту, пользуясь при этом привычными тегами. Использование CSS тем более желательно, что при оформлении заранее заданными тегами гораздо сложнее ошибиться и поставить кегль, например, на единицу меньше. Таким образом, используя CSS, вы можете не задумываться, какой именно тег здесь поставить, поскольку все шрифты и размеры у вас уже определены в таблице стилей и расписаны в макете.
Вышеупомянутые мною системы SSI и CSS крайне желательны к применению на сайте. Даже если они сейчас вам не нужны, то при разрастании узла вы, со временем, придете к положению, когда они понадобятся, и тогда придется переделывать несколько десятков или сотен страниц. Очень удобно, в частности, то, что эти системы позволяют вам не держать в голове все страницы, поскольку все их ключевые элементы определяются либо таблицей стилей, либо подгружаются по заданному шаблону.
Существуют и другие технологии, которые могут помочь веб-мастеру, а также разнообразят и украсят любой узел.
Любой элемент HTML может иметь CSS селектор. Селектор определяет стиль элемента, для которого он создан. Например, все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point):
H1 {color:red; size:20pt;}
CLASS – класс стилей в CSS. Для его определения в CSS используется знак . + имя. Все селекторы могут иметь разные классы. Это позволяет одинаковым элементам иметь различные стили. Например, все элементы H1 с атрибутом CLASS="blue" станут синими:
H1.blue {color:blue; size:20pt;}
Классы могут быть также описаны без привязывания их к определенным элементам. Например, в данном случае все элементы с указанным атрибутом CLASS="green" станут зелеными:
.green {color:green;}
ID – индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса. Для определения в CSS используется знак # + имя.
Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем Вы создали класс blue – синий курсив. Но вам понадобился жирный, подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.
<html>
<head>
<title> Example </title>
</head>
<style>
.blue {color:blue;font-style:italic}
#boldunderline {text-decoration:underline;font-weight:bold}
</style>
<body>
<p class="blue">Привет! Добро пожаловать на мою страничку!</p>
<p class="blue" id="boldunderline">Скоро ожидается</p>
<p id="boldunderline">В стадии разработки</p>
</body>
</html>
Как видно из примера, ID может быть использован без указания класса (последний параграф примера). Тогда параграф будет обладать только свойствами ID (в примере – жирный, подчеркнутый текст).
Контекстные селекторы – это сочетания нескольких обыкновенных селекторов. Стиль задается только элементам в заданной последовательности в зависимости от каскадного порядка. Например, в данном случае все элементы EM внутри элементов P будут иметь заданный стиль:
P EM {color:silver;}
Скажем Вам нужно придать нескольким элементам Вашей страницы одинаковых свойств. В этом случае при определении элементы перечисляются через запятую. НаПример: все элементы H1, H2, H3, P и STRONG будут зелеными:
H1,H2,H3,P,STRONG {color:green;}
Псевдокласс состоит из элементов одного типа, отвечающему определенному критерию. Псевдоклассы и псевдоэлементы при определении отделяются знаком:.
Anchor Pseudo Classes – это псевдоклассы элемента <a>, обозначающего ссылки. Псевдоклассы этого элемента – link (линк), active (активная ссылка), visited (посещенный ранее URL), hover (при поднесении курсора).
First Line Pseudo-element – first-line. Этот псевдоэлемент может быть использован с block-level элементами (P, H1 и т.д.). Он изменяет стиль первой строки этих элементов.
First Letter Pseudo-element – first-letter. То же самое что и first-line, только влияет не на всю строку, а только на первый символ. Пример, в данном случае все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.:
a:link, a:visited {color:blue;}
a:active {color:red;}
a:hover {text-decoration:none;}