Способы определения стилей
· Собственный стиль для конкретного элемента документа определяется атрибутом 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>; Имя класса чувствительно к регистру символов!
|
