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

Если у нас бы был сайт на HTML без CSS то каждую страницу пришлось бы форматировать отдельно. 

Роль CSS такая что веб дизайнеры могут создать единую таблицу стилей (stylesheet) для обслуживания всего сайта. Все страницы HTML будут выполнять единый набор инструкций CSS, а код HTML при этом не будет перегружен информацией о форматированию.

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

Кроме того допускается одновременное использование нескольких способов включения таблиц стилей в HTML-документ.

Существует четыре способа включения таблиц стилей в HTML-документ.

Связывание (использование внешних таблиц стилей) — приминяется для форматирования нескольких веб-страниц одного проекта с помощью одной таблицы стилей. Для этого используют тег<Link>

Для того чтобы реализовать этот спосб необходимо разместить указанный тег со ссылкой в ​​таблицу стилей в заголовке <head> нашего документа. Таблица стилей представляет собой отдельный файл

<link href= «style.css» rel= «stylesheet»  type= «text/css» >

<link href= "style.css" rel= "stylesheet"  type= "text/css" >

Внедрение (использования внутренних таблиц стилей) — используется для того чтобы задать правило форматирования в самом документе, причем эти правила приминяються только для той страницы, для которой прописаны

Для этого используют тег <STYLE>

Для того чтобы реализовать этот способ нужно прописать все правила форматирования, и заключить их в теги <style type=»text/css»> и </style> поместить в раздел <head>

<style type=»text/css»>

H1 {      

font–family:Tunga;      

font–size:10 Px;      

color: Blue      

text–align: center;

}

 

H2 {      

font–family:Arial;      

font–size:20 Px;      

color: Red

}

 

BODY{          

font–family:Times New Roman;        

 font–size:12 Px;          

color: Black        

 font–style: italic;

}

</style>

В данном случае необходимо вставлять в таблицу стилей каждый документ веб-проекта, что приведет к увеличению объема и увеличения времени загрузки документа. Здесь таблица стилей не является единственным файлом, форматирования описаного в разделе <head> непосредственно в HTML-документе. 

Импорт —  используется для того чтобы встроить в документ таблицу стилей, расположенную на сервере.

 Для того чтобы реализовать этот способ используют @import 

<style type= «text/css» > @import URL(«style.css»); </style>

 

Эта запись дает браузеру команду найти таблицу стилей style.css (таблица стилей при этом представляет отдельный файл) в имеющемся каталоге сайта. В данном случае кроме импортированной таблицы стилей в блоке можно прописать любые другие правила CSS которые по вашему мнению будут дополнять и корректировать правила.

Встраивание в теги документа (использование локальных стилей) — приминяется для форматирования конкретных элементов документа, форматирование внутри HTML-документа без использования файла сss. 

Для того чтобы реализовать этот способ нужно применить тег  <STYLE> к части документа.

<p style = «» font–size: 14pt; color: yellou; font–weight: bold «» >Текст</p>

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

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

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

Если пользователю лучше читать например текст с шрифтом Arial, размер 12, полужирным, без проблем: он может определить для себя таблицу стилей с этим атрибутом, который будет использоваться для всех страниц, которые он посещает.