Перейти к контенту

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

Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.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>

 



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

подключение внешних стилей


Оцени статью

 

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим - напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

 

Пока нет комментариев.

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

Ваш e-mail не будет опубликован.

СайдбарКомментарии (0)