2.3. Использование каскадных таблиц стилей css в html

Каскадные таблицы стилей - CSS (Cascading Style Sheets) позволяют управлять размером и стилем шрифтов, интервалами между строками текста, отступами, цветами, используемыми для текста и фона и многими другими параметрами отображения HTML-документов.

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

При использовании CSS для присвоения какому-либо элементу определенных характеристик необходимо один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который нужно оформить соответствующим образом, должен принять свойства описанного стиля.

Более того, возможно сохранить описание стиля не в тексте самой HTML-страницы, а в отдельном файле – это позволит использовать описание стиля в любом количестве Web-страниц. И еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

Кроме того, CSS позволяет работать с оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего увеличения размера страниц графическими элементами.

2.3.1. Размещение информации о стилях

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

Расположение описания стилей в отдельном файле имеет смысл в том случае, если планируется применять эти стили к большему, чем одна, количеству страниц. Для этого нужно:

• Создать обычный текстовый файл и описать в нем с помощью языка CSS необходимые стили;

• Разместить этот файл на Web-сервере;

• В Web-страницах, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него.

Ссылки на таблицы стилей выполняются с помощью тега <LINK>, располагающегося внутри тега <HEAD>:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Первые два атрибута этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой Web-странице будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.

Во втором случае размещения информации о стилях, при котором описание стилей располагается внутри Web-страницы, внутри тега <BODY> используется тег <STYLE type="text/css">... </STYLE>. Атрибут type="text/css" является обязательным и служит для указания браузеру использовать CSS.

И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который описывается. Это делается с помощью атрибута STYLE, который может использоваться с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.