www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Основы CSS (ЦСС) > Добавление CSS (ЦСС)

Добавление CSS (ЦСС)

контентовая версия  

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

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

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

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

Валидный HTML
<!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>

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

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

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

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

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

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

Валидный HTML
<!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>. На web-странице теперь дастаткова указать только этот тег и стили будут добавлены к нему автоматически.

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

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

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

Валидный HTML
<!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. Сочетание разных методов подключения стилей

Валидный HTML
<!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.2009 Последнее обновление: 14.04.2009
Поиск по сайту
Основы CSS (ЦСС)
Разделы
Теги по теме

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

LINK
Устанавливает связь с внешним файлом вроде файла со стилями или со шрифтами.

STYLE
Тег STYLE применяется для определения стилей элементов web-страницы.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект