Для чего нужны таблицы стилей?
Когда веб-страница создается, так сказать, традиционным способом, то ее макет задается в HTML разметке. Таким образом, каждый раз, когда нужно сделать цвет какого-то текста красным, нужно написать <font color="red">; для отображения толстой границы таблицы надо указать <table border="2">.
При помощи такого метода получается статичный сайт, то есть такой, в котором каждая статья располагается на конкретной HTML странице. Изменение макета такого сайта сущий кошмар. Надо отыскать каждое вхождение HTML разметки, требующее редактирования, а потом внести изменения одно за другим (например, заменить <font color="red"> на <b>, если вы решили, что те элементы, которые раньше отображались красным цветом, теперь будут выводиться жирным шрифтом).
Как вы уже знаете, SPIP - это большой шаг в решении этой проблемы, и вам больше не придется редактировать сотни HTML-файлов, но только несколько шаблонов, и ваш макет автоматически обновится по всему сайту. Задача, однако, таким образом решается не полностью. Скажем, вы решили использовать некоторый пастельный голубой цвет для многих элементов вашего сайта, чтобы создать визуальное единство: ссылки, вставки, некоторые элементы навигации и т.д. будут отображаться этим цветом. В той день, когда вы захотите изменить этот голубой салатовым, вам придется отредактировать все вхождения этого голубого в шаблонах, чтобы установить вместо него салатовый. Это может оказаться непростым заданием, и изменение способа отображения страниц произойдет не скоро.
Решением является использование стилей. Таблица стилей - это файл, в котором вы определяете графические свойства элементов и то, где они применяются. Можно отметить два большие преимущества стилей:
— таблица стилей - это один единственный файл, который вы можете применить к любому количеству HTML файлов (и шаблонов SPIP );
— графические свойства элементов определяются только один раз в таблице стилей, не взирая на то, сколько раз эти свойства применяются в HTML-разметке.
Как это делается?
Таблица стилей должна быть объявлена, то есть связана с HTML файлом (шаблоном SPIP, например), при помощи тега <link> в разделе head HTML-файла (<head></head>), аналогично title и <meta>-тегам, следующим образом:
<head>
...
<link rel="stylesheet" type="text/css" href="my_styles.css">
</head>В этом примере файл my_styles.css содержит определение графических свойств, которые вы хотите придать странице HTML. В остальных занятиях этого раздела мы будем считать, что выбрали название «my_styles» для этого файла, а его расширение - «css». Собственно говоря, CSS или Cascading Style Sheets и есть язык для создания стилей, точно так же, как HTML - это язык для создания Web-страниц.
Примечание: таблица стилей может применяться к классической, то есть «статической», HTML-страницы, а также в шаблонах SPIP. Это означает, что любой CSS приём, действующий в классическом HTML, также может быть использован в шаблонах вашего сайта.
Синтаксис языка CSS очень простой, а несколько следующих примеров помогут вам разобраться с ним и начать использовать стили.