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

www-html.ru

Обычная версия

Таблицы стилей могут быть добавлены на 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=utf-8">
<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=utf-8">
<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=utf-8">
<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=utf-8">
<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 пикселов, а следующий — зеленым цветом и другим шрифтом.



Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

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