Подключение таблицы стилей

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

Подключение внешней таблицы стилей

Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идеально подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег <link>, который размещается в разделе заголовка:

Данный код указывает браузеру на то, что определение стиля хранится в файле first.css. Последний, в свою очередь, выполнит форматирование документа согласно с этим определением стиля.

Некоторые замечания:

внешнюю таблицу стилей можно создать в любом текстовом редакторе;
файл с внешней таблицей стилей не должен содержать никаких тегов html;
файл с внешней таблицей стилей необходимо сохранить с расширением .css.

Пример:

ul {margin-left: 10pt}li {font-family: arial}body {background-color: blue}

Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, т.к. это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.

Пример с пробелом — "margin-left: 20 px";

пример без пробела — "margin-left:20px".

Подключение внутренней таблицы стилей

Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <style>, который размещается в разделе заголовка:

<head><style type="text/css">li {font-family: arial}p {font-size: 25%}h1 {margin-right: 10pt}</style></head>

В соответствии с определениями стиля браузер форматирует документ. Однако если он встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не поддерживает стили, проигнорирует тег <style>, но содержимое последнего будет выведено на странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария HTML:

Встроенные стили

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

Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.

Пример:

<body style="background-color: blue" ><h1 style="color: yellow" >Заголовок H1</h1></body>

В примере показано, как задать цвет фона документа и цвет заголовка h1.