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

Язык 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 и др.).

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

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

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

Приоритет использования стилей

Для каскадных таблиц стилей определен приоритет использования. Если для элемента HTML определено более одного стиля, то все стили будут последовательно "каскадированы" в новую "виртуальную" таблицу стилей, согласно следующим правилам:

стили, используемые по умолчанию браузером;стили, хранящиеся во внешней таблице; стили, хранящиеся во внутренней таблице стилей (внутри тега <head>);встроенный стиль (внутри элемента HTML).

Эти правила определяют порядок увеличения приоритета стилей.

Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или в браузере (значение по умолчанию).

color: blue

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

comic sans

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 }

: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 (как, например, тег font и атрибут color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS.

Еще раз заострим внимание: CSS стали прорывом в Web-дизайне. Основой для него послужило то, что технология позволяет разработчикам одновременно управлять стилем и компоновкой множества Web-страниц, определять стиль для каждого элемента HTML и применять его к любому количеству Web-страниц. Также CSS дает возможность из одного документа ссылаться на несколько внешних таблиц стилей. Таким образом, чтобы сделать глобальное изменение, надо просто изменить стиль, и все элементы в Web будут автоматически изменены.

Разработчик может определять стили следующими способами:

внутри единственного элемента HTML;внутри элемента <head> страницы HTML;во внешнем файле CSS.