Активное развитие Всемирной паутины уже в 90-е годы поставило перед лидерами в области информационных технологий задачу по внедрению стандартов для веб-дизайнеров и программистов. Нужно было ввести правила, которых следовало бы придерживаться во избежание хаоса в сети. Так возникла организация W3C, ответственная за создание единых принципов и стандартов для Интернет. Именно этот консорциум повлиял на появление и современный вид языков HTML, ХHTML и технологии CSS.

Преимущества CSS

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

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

Подключение CSS

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

                        Внешние таблицы стилей

                        1. Использование тега LINK

Тэг располагается на странице в разделе HEAD. Адрес файла таблицы стилей задается в атрибуте href тега LINK. Правила CSS заданные этим способом применяются ко всему документу.

1.jpg

2. Использование директивы @import

В разделе HEAD может содержаться тег STYLE, в котором вводится строка @import со следующим за ним словом url с указанием адреса таблицы стилей в круглых скобках. Правила применяются ко всему документу.

2.jpg

Внутренние таблицы стилей

3. Описание каскадной таблицы в документе

В этом варианте правила CSS задаются в теге STYLE раздела HEAD и действуют на протяжении всей веб-страницы.

3.jpg

4. Задание таблицы стилей для отдельных элементов страницы.

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

4.jpg