Предназначение стилей

Технология CSS: общий взгляд

Название "Каскадные таблицы стилей" происходит от английского Cascading Style Sheets, аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения представления элементов HTML и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.

Пример использования CSS

С помощью CSS документы HTML можно выводить, используя различные стили вывода.

Пример. Возьмем несколько таблиц стилей:

Style1

p

{

color: blue; font-style: italic;

margin-left: 20pt;

}

ol,ul,li

{

list-style: circle;

font-family: arial;

}

a:link {color:black}

a:visited {color:black}

body

{

background-image: url("http://www.intuit.ru/departament/picture.gif")

}

Style2

h1,h3,h6

{

margin: 20pt;

}

h1,h2,h3,h4,h5,h6,p,ol,li

{

font-family: arial, "sans serif";

}

p,table,td,ol,ul

{

font-style: oblique;

}

:link {COLOR: blue;}

:visited {COLOR: blue;}

a:active {COLOR: black;}

a:hover {COLOR: black;}

a.myln:link {COLOR: olive;}

a.myln:visited {COLOR: olive;}

a.myln:active {COLOR: teal;}

a.myln:hover {COLOR: teal;}

Style3

p,ol,ul

{

font-style: italic;

margin-right: 20pt;

}

p,h1,h6

{

font-family: "comic sans ms", arial, "sans serif";

}

p,th

{

font-size: 20%

}

table {background-color: blue}

body {background-color:#FFF000}

p,ol,ul

{

color:green;

}

:link {color:blue}

:visited {color:blue}

:active {color:green}

:hover {color:green}

Style4

:link { color:red }

:visited { color:red }

:active { color:yellow }

:hover { color:yellow }

body

{

background-color: #FAD123;

}

h1,h2,h6

{

margin-left: 20pt;

color: blue;

}

h3,h4,h5

{

margin-left: 10pt;

color: green;

}

p,h1,h3

{

font-size: 150%;

}

p,h1,h2,h3,h4,h5,h6,table

{

font-family: arial;

}

p

{

margin-left: 30pt;

}

Style5

p,h1,h2,h3

{

font-size: 75%;

}

table,h4,h5,h6,li

{

font-family: arial, "sans serif";

margin-left: 20pt;

}

body

{

background-color: #F2FF2F;

}

ol,ul {color: 12a45d;}

:link {color:brown}

:visited {color:brown}

:active {color:blue}

:hover {color:blue}

При последовательном применении этих стилей к одному и тому же документу можно менять его представление.

Предназначение стилей

Язык HTML был создан для описания содержимого документа. Его теги были предназначены для определения "заголовка", "параграфа", "таблицы" ( <h1>, <p>, <table> и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.

Но это породило процесс создания своих тегов и атрибутов к исходной спецификации HTML-браузерами Netscape и Internet Explorer (такие, например, как тег <font> и атрибут color ), что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко отделено от уровня представления документа.

В этой ситуации консорциум W3C (World Wide Web Consortium) — некоммерческая организация, ответственная за стандартизацию HTML — создала при разработке стандарта HTML 4.0 каскадные таблицы стилей.

Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии CSS.

Сегодня эту технологию поддерживают все основные браузеры (Internet Explorer, Mozilla Firefox, Opera и др.).