Способы подключения css стилей
Чтоб использовать
css стили на web-странице существует несколько способов их подключения.
- Связанные (внешние) стили
- Глобальные стили
- inline стили
У каждого из представленных способов существуют свои преймущества и недостатки. Далее мы рассмотрим каждый способ более подробно.
Связанные (внешние) стили
Внешняя таблица стилей - файл с расширением .css (обычно называется style.css), в котором описаны css свойства. Внешние таблицы стилей идеально подходят, если на сайте большое количество страниц. Таким образом можно легко изменить любой стиль в файле и оформление изменится на всех страницах, к которым он подключен.
Внешний css файл нужно подключать к каждой странице, на которой он будет использоватся. Подключаются файлы стилей следующим образом: в контейнере <head> помещается тег <link>, в котором описываются параметры rel и type, которые неизменны при каждом подключении файла. А с помощью аргумента href указывается путь к файлу стилей. Пример подключения файла стилей показан ниже.
<head>
...........
<link rel="stylesheet" type="text/css" href="style.css">
...........
</head>
Если Вы хотите импортировать css файл, использовать нужно следующую конструкцию.
<head>
...........
<style type="text/css"> @import url("style.css"); </style>
...........
</head>
Браузер будет читать
css стили с файла и форматировать html страницу в соответствии с ним. Внешние таблицы стилей могут быть написаны в любом текстовом редакторе, но лучше для этого использовать специализированные редакторы с подсветкой кода - это поможет вам избежать ошибок в синтаксе.
Глобальные стили
При использовании этого способа все
css стили описаны в самом html документе. Такой способ подходит в том случае, если существует лишь одна страница. Если же страниц очень много, то такой способ подключения css стилей стоит использовать лишь в редких случаях, когда это действиетельно нужно. В основном такой способ используется для применения различных хаков для браузеров. Недостатком этого способа является то, что, если на web-сайте все стили описаны в самом html документе, возникнет очень большая сложность в их изменении, а так же вес страницы увеличивается, что влияет на скорость ее загрузки.
Далее показано как можно глабально подключить css в web-странице:
<head>
...........
<style type="text/css">
<!--
body {
background: #000000;
}
h3 {
color: #FF0000;
}
p {
margin-left: 15px;
padding:1.5em;
}
-->
</style>
...........
</head>
Стоит отметить, что, если Вы используете глабальные стили, то они должны находится внутри контейнера
<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
Добавить комментарий
