Внешние таблицы стилей

Переклад українською: Зовнішні таблиці стилів

Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.css». Внешняя каскадная таблица стилей представляет собой простой список правил. Она не содержит HTML-тегов. CrashCourse/Demos/Stylesheet.css — пример внешней таблицы стилей.

Пример кода

.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}


Мы можем подключить указанный CSS-файл к любому количеству страниц HTML. Тег <link>, который размещается в верхней части HTML-страницы, ссылается на внешнюю каскадную таблицу стилей.

Пример кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
</body>
</html>
Атрибуты <link>

Атрибуты Описание
href указывает на местонахождение внешней каскадной таблицы стилей
rel атрибут должен устанавливать значение “stylesheet” для ссылки на таблицу стилей
type должно быть установлено “text/css” для ссылки на таблицу стилей

Количество внешних каскадных таблиц стилей, которые может использовать страница HTML, неограниченно. Более, того, мы можем объединять внешние таблицы стилей, используя технику внедрения стилевых таблиц.

Встроенные стили

Мы создаем встроенные стили, добавляя тегам атрибуты стиля. Так же как и в случае с классом или атрибутами идентификатора (id), большинство элементов могут иметь стилевые атрибуты. Значения атрибута стиля разделяются точкой с запятой. Образец кода ниже демонстрирует применение встроенного стиля:

Образец кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Styles</title>
</head>
<body>
<p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p>
<ul style="margin-top:-20px; font-size:10pt">
<li style="list-style-type:square">Hello</li>
<li style="list-style-type:circle">Hi</li>
<li style="list-style-type:disc">Howdy</li>
</ul>
</body>
</html>