2015-09-07
1064
· Собственный стиль для конкретного элемента документа определяется атрибутом style этого элемента и называется встраивание таблицы стилей:
<p style="font-size:12pt; color:black">Текст абзаца</p>
· Локальное определение стиля задаётся тегом style, который помещается в тег head, и действует в пределах этого документа. В тег style помещаются правила таблицы стилей. Такое определение стиля называется внедрение таблицы стилей:
<head>
........
<style type="text/css">
/ * Здесь можно вставлять такой комментарий!
Вложенные комментарии не допускаются. * /
body{ background-color:gray;
font-size:14pt } /* Первое правило*/
h1{ background-color:white;
color:blue } /* Второе правило*/
</style>
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
· Локальное определение стиля также можно выполнить с помощью команды @import, которая позволяет импортировать элементы стиля из внешнего файла *.css (импорт таблицы стилей), команда помещается в тег style раньше других правил таблицы стилей. Внешний файл *.css содержит набор правил таблицы стилей:
my.css:
body{ background-color:gray; font-size:14pt }
p{ font-size:11pt; font-face:Arial }
my.htm:
<head>
........
<style type="text/css">
@import url(my.css); /* импорт таблицы стилей */
h1{background-color:white; color:blue} /* внедрённое правило */
</style>
Можно импортировать несколько таблиц в одном документе.
· Глобальное (внешнее) определение стиля помещается в отдельный файл *.css, который содержит набор правил таблицы стилей и подключается тегом link в теге head нескольких документов, которые должны иметь общие правила оформления, такой способ задания стиля называется связывание:
<head>
......
<link rel="stylesheet" type="text/css" href="my.css">
</head>
Применение правил таблицы стилей:
<html>
<head>
.......
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
Приоритеты таблиц стилей, начиная с наивысшего: встроенная, внедрённая, импортированная, связанная, по умолчанию (настройки браузера).
Виды селекторов
Селектор типа элемента – переопределяет атрибуты любого тега:
h2 { color:blue }
p {font-size:16pt }
Применение:
<h2>Заголовок</h2>
<p>Абзац</p>
Селектор класса – позволяет для одного и того же тега определить несколько вариантов оформления:
h2.red {color:red }
h2.green {color:green }
Применение:
<h2 class="red">Это красный заголовок</h2>
<h2 class="green">А это зелёный заголовок</h2>
Также селектор класса позволяет создать стиль, который можно применить для различных тегов:
.style1 {color:blue; font-size:22pt}
.style2 {color:lime; background-color:gray}
Применение:
<p class="style1">Большие синие буквы, фон – по умолчанию</p>
<p class="style2">Зелёные буквы, фон – серый, размер букв - по умолчанию</p>
<h1 class="style1">Заголовок - большие синие буквы, фон – по умолчанию</h1>
<h1 class="style2">Заголовок - зелёные буквы, фон – серый, размер букв - по умолчанию</h1>
Имя класса чувствительно к регистру символов!
