Способы подключения css стилей

Home

Способы подключения css стилей

( 0 - user rating )

Чтоб использовать css стили на web-странице существует несколько способов их подключения.

Связанные (внешние) стили
Глобальные стили
inline стили

У каждого из представленных способов существуют свои преймущества и недостатки. Далее мы рассмотрим каждый способ более подробно.

Связанные (внешние) стили

Внешняя таблица стилей - файл с расширением .css (обычно называется style.css), в котором описаны css свойства. Внешние таблицы стилей идеально подходят, если на сайте большое количество страниц. Таким образом можно легко изменить любой стиль в файле и оформление изменится на всех страницах, к которым он подключен.

Внешний css файл нужно подключать к каждой странице, на которой он будет использоватся. Подключаются файлы стилей следующим образом: в контейнере <head> помещается тег <link>, в котором описываются параметры rel и type, которые неизменны при каждом подключении файла. А с помощью аргумента href указывается путь к файлу стилей. Пример подключения файла стилей показан ниже.

Если Вы хотите импортировать css файл, использовать нужно следующую конструкцию.

<head>
...........
<style type="text/css"> @import url("style.css"); </style>
...........
</head>

Браузер будет читать css стили с файла и форматировать html страницу в соответствии с ним. Внешние таблицы стилей могут быть написаны в любом текстовом редакторе, но лучше для этого использовать специализированные редакторы с подсветкой кода - это поможет вам избежать ошибок в синтаксе.

Глобальные стили

При использовании этого способа все css стили описаны в самом html документе. Такой способ подходит в том случае, если существует лишь одна страница. Если же страниц очень много, то такой способ подключения css стилей стоит использовать лишь в редких случаях, когда это действиетельно нужно. В основном такой способ используется для применения различных хаков для браузеров. Недостатком этого способа является то, что, если на web-сайте все стили описаны в самом html документе, возникнет очень большая сложность в их изменении, а так же вес страницы увеличивается, что влияет на скорость ее загрузки.
Далее показано как можно глабально подключить css в web-странице:

Стоит отметить, что, если Вы используете глабальные стили, то они должны находится внутри контейнера <style>, который и дает понять браузеру, что это описание css свойств и его не нужно отображать на экране. В свою очередь контейнер <style> должен находится внутри контейнера <head>

Примечание: Браузер, как правило, игнорирует неизвестные ему теги. А это означает, что старые браузеры, которые не поддерживают css будут отображать код на экране. Чтоб избежать этого нужно глабальные стили заключить в комментарий .

inline стили

Существует еще один способ подключения css стилей - inline стили. inline стили применяются непосредственно к html элементу. Это способ следует использовать только в том случае, если стиль будет применятся к элементу только один раз. Излишнее использование элементов приведет к большому и лишнему весу страницы, а если таких страниц много - к большим сложностям при изменении стиля. Синтаксис inline стилей показан ниже:

h2{color:#FFCC00; text-align:center; font:italic 9pt Verdana, Sans-serif;}

Приоритеты в css

Если css свойства для одного и того же элемента описаны одновременно несколькими способами, то высший приоритет будет иметь тот, который описан более явно. Допустим для заголовка второго уровня во внешнем файле описано следующее правило:

h2{color:#FFCC00; text-align:center; font:italic 9pt Verdana, Sans-serif;}

А в html глобально описано следующее:

h2{color:#FFCC00; text-align:center; font:italic 10pt Verdana, Sans-serif;}

Браузер выведет на экран текст с размером шрифта 10pt. Из чего можно сделать вывод, что наименьшим приоритетом обладают внешние файлы стилей, далее следуют глобальные стили, а найвысшим приоритетом обладают inline стили.

Оригинал Vinculando folhas de estilo a documentos