Почему стоит использовать CSS?
Содержание и внешний вид веб-страницы должны быть разделены.
Таблицы стилей существуют для того, чтобы на практике реализовать этот принцип.
Содержимое веб-сайта должно храниться в HTML файле, а информация о том, как он будет отображаться, соответственно, в файле стилей CSS.
Такое распределение дает неоспоримые преимущества. Допустим, у вас имеется сайт, состоящий из десятка страниц с текстом. Если вы задавали стиль текста непосредственно в HTML документе, то при возникновении потребности изменить, к примеру, его шрифт, вам потребуется вносить правки в каждую страницу вашего сайта. Но если использовать для задания внешнего вида таблицу стилей, то такую правку можно внести лишь единожды, и она коснется всех страниц вашего веб-сайта. Одно это преимущество позволяет сэкономить уйму времени и сил.
Вот еще несколько полезных свойств CSS:
• более точный контроль над внешним видом страниц;
• различные представления для разных носителей информации (экран, печать, и т. д.);
• сложная и проработанная техника дизайна.
Что же представляет собой CSS?
На самом деле это простой текстовый файл (с расширением css), написанный в соответствии с грамматикой определяемой в CSS рекомендациях.
Вот простой пример.
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 1em;
text-align: justify; }
h1 {
font-family: Verdana, sans-serif;
font-size: 1.3em; }
code {
font-family: Courier, sans-serif;
font-size: 1em; }
.note {
background-color: #003333;
border-width: thin;
border-color: black;
border-style: ridge;
color: white;
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
vertical-align: text-bottom; }
Как и HTML-документ, CSS простой текстовый файл. Но в отличие от HTML документа, вам не нужно специальная запись в верхней части файлов, что это таблица стилей. Достаточно поставить соответствующее расширение в имени файла (css).
Помимо этого таблицы стилей можно добавлять непосредственно после тега <head> в HTML файлы. Эту функцию мы рассмотрим подробнее в дальнейших уроках.
Как работают таблицы стилей?
Таблицы стилей представляют собой определенный набор инструкций, который интерпретируются браузером.
Элементы таблицы стилей
Как уже говорилось выше, таблица стилей содержит инструкции. Инструкция в свою очередь состоит из элемента и его свойств.
К элементам можно отнести любые теги HTML документа - параграфы, ссылки, списки (<p>, <a>, <ul>).
Та часть инструкции, которая определяет элемент, называется селектором.
Часть инструкции, которая указывает браузеру, как элемент должен быть отображен - называется свойством. Элемент может иметь любое количество свойств.
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 1em;
text-align: justify; }
Это инструкция, возможно, одна из многих в таблице стилей.
Селектором является body. Это означает, что инструкция относится к тегу <body> для любой страницы, связанной с данной таблицей стилей.
В инструкции имеются три свойства. Каждое из которых состоит из имени и значения. Например: имя - "text-align" и значение "justify".
Данная инструкция будет влиять на шрифт, используемый для <body>, а также размер этого шрифта и выравнивание текста. Сведения о том, как все эти свойства работают можно найти в справочниках по CSS, так что не волнуйтесь, если сейчас они для вас не понятны.
Синтаксис таблицы стилей
В течение долгого времени не существовало такого понятия, как "веб-стандарт". В результате браузеры были весьма снисходительными к HTML. Однако CSS всегда был весьма специфическим стандартом. Это означает, что если вы не будите соблюдать грамматику, браузеры не будет благосклонны к вам. Ваша таблица стилей может не работать вообще либо будет отображаться непредсказуемым образом. Выше вы видели, какие части имеет таблица стилей, а также пример того, как они выглядят вместе. Что касается приведенного выше примера, вот несколько простых правил, следуя которым вы избежите ненужных проблем.
Каждая инструкция должна иметь селектор и набор свойств. Свойства идут сразу за селектором и заключены в фигурные скобки. Если их несколько, то они разделяются точкой с запятой.
После свойства ставится двоеточие, а затем указывается его значение. Существует множество значений, но к каждому свойству применимы лишь некоторые, определенные спецификацией.
Ключевые теги: Учебник CSS
