Внутренняя Таблица Стилей
Внутренняя таблица стилей используется, когда отдельный документ имеет уникальный стиль. Вы определяете внутренние стили в head-секции страницы HTML, используя тег <style>, например:
|
<head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> |
ПРИМЕР:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Работаем со стилями</title> <style type="text/css"> h1{color:blue;font-size:14px} </style> </head> <body> <h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1> </body> </html>
Встроенные Стили
Встроенный стиль теряет много преимуществ таблиц стилей, смешивая содержание с оформлением. Этот метод используется в исключительных случаях!
Чтобы добавить встроенные стили, вы используете атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS.
Пример показывает как изменить цвет и левый отступ параграфа:
|
<p style="color:sienna;margin-left:20px">Это параграф.</p> |
ПРИМЕР:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Работаем со стилями</title></head><body><h1style="color:blue;font-size:14px">Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1></body> </html>
Внутренняя таблица стилей и встроенные стили не дают особых преимуществ перед html . Ведь при попытке изменить дизайн всего сайта, построенного по их принципу, придется изменять стили на всех страницах, а это опять же время...
Несколько Таблиц Стилей
Если некоторые свойства были установлены для одного и того же селектора в различных таблицах стилей, значения будут браться из более специфической таблицы стилей.
Например, внешняя таблица стилей имеет три свойства для селектора h3:
|
h3 { color:red; text-align:left; font-size:8pt; } |
И внутренняя таблица стилей имеет такие свойства для селектора h3:
|
h3 { text-align:right; font-size:20pt; } |
Если страница с внутренней таблицей стилей ссылается также и на внешнюю таблицу стилей, то свойства для h3 будут:
|
color:red; text-align:right; font-size:20pt; |
Цвет берется из внешней таблицы стилей, а выравнивание текста и размер шрифта заменяются значениями из внутренней таблицы стилей.
Как Несколько Стилей Соединяются в Один
Стили могут быть указаны:
внутри HTML элемента
внутри head-секции страницы HTML
во внешнем CSS файле
Совет:Даже несколько внешних таблиц стилей могут использоваться одним HTML документом.
Порядок соединения
Какой стиль будет использоваться, когда указано более одного стиля для HTML элемента?
Вообще говоря, можно сказать, что все стили "сольются" в новую "фактическую" таблицу стилей по следующим правилам, четвертое из которых имеет наивысший приоритет:
Стиль браузера по умолчанию
Внешняя таблица стилей
Внутренняя таблица стилей (в head-секции)
Встроенный стиль (внутри HTML элемента)
Таким образом, встроенный стиль (внутри HTML элемента) имеет наивысший приоритет, что означает, что этот стиль перепишет стиль указанный в теге <head>, или во внешней таблице стилей, или в браузере (значение по умолчанию).
Замечание:Если ссылка на внешнюю таблицу стилей
помещается после внутренней таблицы
стилей в секции <head>, внешний стиль
перепишет внутрннюю таблицу стилей!