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

Дата добавления: 2015-07-09; просмотров: 671; Нарушение авторских прав

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил (пример 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=utf-8">

<title>Внутренние стили</title>

</head>

<body>

<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>

</body>

</html>

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

Рис.3

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

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

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

<!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">Заголовок 1</h1>

<h1>Заголовок 2</h1>

</body>

</html>

Рис.4

<== предыдущая лекция	\|	следующая лекция ==>
Глобальные стили	\|	Импорт CSS