|
Как подключить CSS
таблицу к HTML документу?
Как вы уже знаете, вся фишка
css в том, что меняя стилевые правила во внешней таблице стилей, мы можем
управлять дизайном сколь угодно большого количества страниц.
Существует три способа
вставки таблицы стилей:
Внешняя Таблица Стилей
Внешняя таблица стилей идеально подходит, когда
стили должны применяться ко многим страницам. С помощью внешней таблицы
стилей, вы можете изменить всего сайта путем
редактирования одного файла. Каждая страница должна ссылаться на таблицу
стилей, используя тег <link>. Тег <link> находится
в head-секции.
Пример:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Внешняя таблица стилей может быть написана в
любом текстовом редакторе. Файл не должен содержать какие-либо html теги.
Вашу таблицу стилей следует сохранить в файле с расширением ".css".
Пример файла таблицы стилей приведен
ниже:
hr
{color:sienna;}
p
{margin-left:20px;}
body {background-image:url("images/back40.gif");}
Не оставляйте пробелов между значением свойства
и его единицами измерения! "margin-left:20 px" (вместо "margin-left:20px")
будет работаеть в IE (браузере Internet Explorer), но не
будет работать в браузерах Firefox или Opera.
Встроенные Стили
Встроенный стиль теряет
много преимуществ таблиц стилей, смешивая содержание с оформлением.
Используйте этот метод в исключительных случаях!
Чтобы добавить встроенные
стили, вы используете атрибут style в соответствующем теге. Атрибут style
может содержать любое свойство CSS.
Пример показывает как
изменить цвет и левый отступ параграфа:
<p
style="color:sienna;margin-left:20px">Это
параграф.</p>
Несколько Таблиц Стилей
Если некоторые свойства были установлены для
одного и того же селектора в различных таблицах стилей, значения будут
браться из более специфической таблицы стилей.
Пример, внешняя
таблица стилей имеет три свойства для селектора 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 документом.
Порядок соединения
Какой стиль будет использоваться, когда указано
более одного стиля для HTML элемента?
Вообще говоря, можно сказать, что все стили
"сольются" в новую "фактическую" таблицу стилей по следующим правилам,
четвертое из которых имеет наивысший приоритет:
-
стиль браузера по умолчанию;
-
внешняя таблица стилей;
-
внутренняя таблица стилей (в head-секции);
-
встроенный стиль (внутри HTML элемента).
Таким образом, встроенный стиль (внутри HTML
элемента) имеет наивысший приоритет, что означает, что этот стиль перепишет
стиль указанный в теге <head>, или во внешней таблице стилей, или в браузере
(значение по умолчанию).
Замечание: Если ссылка на внешнюю таблицу
стилей помещается после внутренней таблицы стилей в секции <head>, внешний
стиль перепишет внутреннюю таблицу стилей!
|