Добавление CSS

Влад Мержевич

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

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <LINK> в заголовке страницы (пример 1).

Пример 1. Подключение таблицы связанных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

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

Достоинства данного способа

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

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <STYLE> (пример 2).

Пример 2. Использование таблицы глобальных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
<style type="text/css">
H1 {
font-size: 120%; /* Размер шрифта */
font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
color: #336; /* Цвет текста */
}
</style>
</head>

<body>
<H1>Hello, world!</H1>
</body>
</html>

В данном примере показано изменение стиля заголовка <H1>. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр style, а его атрибуты указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
</head>
<body>
<H1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">Hello, world!</H1>
</body>
</html>

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

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в документ.

Пример 4. Сочетание разных методов подключения стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>

<body>
<H1 style="font-size: 36px; font-family: Times, serif; color: red;">Hello, world!</H1>
<H1>Hello, world!</H1>
</body>
</html>

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

Статья опубликована: 13.09.2005

Последнее обновление: 14.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Tony Realovich

09.11.2006

Влад, спасибо тебе огроменное, отличные статьи, ты всех превзошел по стилю написания и оформления!
У меня вопрос:
допустим у меня есть несколько каскадных таблиц стилей, подходящие для одной и той же веб страницы, то есть написанные под нее:
blue_style.css
green_style.css
gray_style.css
я хочу чтобы на этой странице были ссылки
Голубой стиль
Зеленый стиль
Серый стиль
и чтобы нажимая на эти ссылки, загружалась таже страница, только с выбранной таблицей стиля!
Заранее благодарю!

Влад Мержевич

13.11.2006

Без JavaScript не обойтись.

Sub

02.12.2006

ещоб про яву статейку

Ник

08.12.2006

Я сам ламо косоглазое, но я бы запихнул ссылки на стили (или сами стили по методу 2) в document.write (таки джаваскрипт), и разные write вызывал бы по кнопочкам. Только там опосля надо отрефрешить доку, не перезагружая ее с сервака, склероз как.

}{aG@KyRe

09.04.2007

Влад, у меня такой вопрос - можно ли подключить сразу два CSS-ника, если да, то какой приоритет?

Влад Мержевич

10.04.2007

Подключение сразу двух CSS-файлов.

Приоритет зависит от множества факторов. Например, если в двух файлах совпадают селекторы, то будет работать последний (т.е. в файле file2.css).

Аспирант

27.06.2007

Влад, подскажи, пожалуйста, возможно ли подключение CSS-файлов в теле HTML-документа? И есть ли какие-либо особенности у такого подключения?
P.S. Данный при?м требуется для работы в теле документа, так как доступ к тегу HEAD ограничен. Заранее спасибо!

Влад Мержевич

27.06.2007

Вы можете указать тег LINK в контейнере BODY. Это неправильно конечно, но работает.

Дмитрий

30.06.2007

Влад, скажите пожалуйста. Вот я загружаю таблицу стилей в отдельный файл, указываю в head ссылку, на странице у меня отображаются все стили, кроме картинки-ссылки меняющей цвет при наведении мышки. Если я вставляю эти стили картинок-ссылок прямо в head, а не в отдельный файл, то на странице они отображаются. Почему так? Может в атрибуте rel надо указать не stylesheet, а что-нибудь другое?

Влад Мержевич

02.07.2007

При указании адреса картинок используйте путь относительно корня сайта. Например: url('/images/pic.gif')

Дмитрий

05.07.2007

****При указании адреса картинок используйте путь относительно корня сайта. Например: url('/images/pic.gif')****

Я так и пишу, все-равно не прходит

Влад Мержевич

24.07.2007

2 Дмитрий
Адреса относительно сайта на локальном компьютере не работают.

Руслан

15.08.2007

Здравствуйте, Влад. Вы пишите:

"Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее"

А что будет, если я обновлю на сервере таблицу стилей? Браузер как-то фиксирует это и обновляет таблицу из кеша или нет?

Влад Мержевич

22.08.2007

Да, браузер обновит файл.

Дмитрий_Д

29.08.2007

Дмитрий
Укажи адрес в вот таком виде все работает
background: url(../images/pic.gif)

Александр

05.10.2007

Здравствуйте, Влад.

Помогите, пожалуйста, весь день мучаюсь, не могу понять:
Есть два файла:
=== Начало файла test.html ===
<html><head><title>AAA</title>
<style>
body {font-size: 25pt; }
</style>
<link href="test.css" type="text/css" rel="stylesheet">
</head><body>AAA</body></html>
=== Конец файла test.html ===
И test.css
=== Начало файла test.css ===
body { font-size: 9pt; }
=== Конец файла test.css ===

Насколько я понимаю текст должен отображаться 25 шрифтом, т.е. приоритет должен иметь стиль, определенный в html файле, но на деле текст отображается 9 шрифтом. Что я делаю не так? В чем подвох?

Спасибо

Влад Мержевич

15.10.2007

Здесь не приоритет имеет значение, а то, что используется один и тот же селектор. Вот стиль и переопределяется. Вначале вы задаете стиль внутри документа, ниже вызываете файл test.css, в котором значение font-size уже другое. Естественно, что задано ниже, то и будет применяться.

Анатолий

16.10.2007

Влад, как Вы думаете, насколько PHP гибок по отношению к JS. У меня дилема: или изучать скрипты(только из-за улучшения интерфейса) или пытаться углубиться в PHP. Но даст ли PHP мне все нужные средства!?
Заранее спасибо!

Влад Мержевич

21.10.2007

2 Анатолий
PHP и JS это совершенно разные вещи. Будет полезно изучить и то и другое.

Eternal

25.12.2007

Извините за глупый вопрос, но как все таки создать css файл, который ссылкой обозначен в теге link? Как писать я понял, а как создать файл не могу понять. Не надо только объяснять, что надо создавать документ, с названием "имя.css". Скажите, пожалуйста, только как начать писать файл.

Влад Мержевич

26.12.2007

Именно создаешь файл, называешь его к примеру style.css, а в нем прописываешь типа:

body {
background: #fc0;
color: #000;
}

Eternal

26.12.2007

Спасибо! А без разницы в каком порядке начинать?

Влад Мержевич

27.12.2007

Есть разница. Начинать надо с глобальных элементов, которые выступают родителями для остальных. Это html, body, form и т.д.

Helen

28.03.2008

Скажите, пожалуйста, с чем может быть связана такая проблема: Я использую SSI для создания страницы. Я прописываю в index.shtml путь к файлу style.css, а во включаемых файлах стили не применяются. Приходится в самих включаемых файлах писать глобальные стили, они применяютя. При этом для содержимого самой index.shtml тоже стили из style.css не работают. И в браузере файл style.css открыть невозможно. Примечание: проблема возникла при создании страницы на бесплатном хостинге by.ru

Pulsar

13.04.2008

Подскажите пож-та, какнить можно совмещать стили? например для ячейки таблицы я создаю 4 стиля, в каждом отображается только одна из сторон ячейки. Можно ли теперь каклибо указать, что для конкретной ячейки необходимы, к примеру, стиль, отображающий левую сторону+стиль, отображающий правую сторону?

Sheena

18.04.2008

А как создать таблицу СВЯЗАННЫХ стилей?

FXIX

15.05.2008

Sheena А как создать таблицу СВЯЗАННЫХ стилей?
Создаешь текстовый файл (блокнот), и меняешь расширение с .txt на .css.

Pulsar Подскажите пож-та, какнить можно совмещать стили? например для ячейки таблицы я создаю 4 стиля, в каждом отображается только одна из сторон ячейки. Можно ли теперь каклибо указать, что для конкретной ячейки необходимы, к примеру, стиль, отображающий левую сторону+стиль, отображающий правую сторону?
Для каждой ячейки пропиши свой стиль внутри тега. Или в файле стиля создай 4 класса и потом для каждой ячейки подключи их.

Добавление CSS

Таблицы связанных стилей

Достоинства данного способа

Таблицы глобальных стилей

Внутренние стили

Комментарии к статье

Добавить комментарий