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

Style5

Style4

Style3

Style2

Style1

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

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

Лекция 1: Общая информация

Основы работы с CSS

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

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

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

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")

}

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;}

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}

: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;

}

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 и др.).