Браузер форматирует документ в соответствии с css стилем.
Способы вставки стиля CSS
Существует три способа вставки стиля css:
- Внешние таблицы стилей (css файл)
- Внутренние таблицы стилей (стиль в элементе head)
- Строчный стиль
Внешние таблицы стилей
Внешние таблицы стилей отлично подходят для стилей, которые применяются к множеству страниц. С помощью внешних таблиц стилей вы можете изменить оформление всего веб-сайта, изменяя только один файл. На каждой странице сайта вы должны сделать ссылку на внешние таблицы стилей (css файл/файлы) с помощью тега . Тег помещается в элементе head:
Внешние таблицы стилей можно создать в любом текстовом редакторе (хотя лучше использовать специальные текстовые редакторы, например, Notepad ++). В этом файле не должно быть тегов html. Файл внешних стилей надо сохранить с расширением .css. Смотрите пример файла css:
hr {color:sienna;} p {margin-left:20px;}
body {background-image:url(«images/back40.gif»);}
Совет: следите за тем, чтобы между значением свойства и единицами измерения не оставалось пробелов, «margin-left:20 px» вместо «margin-left:20px». Такая запись будет работать только в IE.
Внутренние таблицы стилей
Внутренние таблицы стилей обычно используют в том случае, когда единственная страница сайта имеет уникальный стиль. Внутренний стиль записывается в элементе head между тегами , :
hr {color:sienna;} p {margin-left:20px;} body {background-image:url(«images/back40.gif»);}
Строчный стиль css
Строчный стиль CSS противоречит идеологии разделения оформления и содержания, поэтому используйте его осторожно. Кстати, о том, почему надо разделять содержимое и оформление, вы можете почитать здесь.
Для вставки строчного стиля используется атрибут style соответствующего элемента html. Атрибут style может содержать любое свойство CSS. В примере ниже показано, как изменить отступ слева и цвет текста параграфа:
Это параграф.
Сложение стилей
Что произойдет, если для одного и того же элемента html заданы различные значения одного и того же свойства в различных таблицах стилей (внешних, внутренних и строчных)?
В этом случае, к элементу будет применен стиль более конкретной таблицы стилей (мне проще запомнить, что будет применен стиль, который находится ближе к форматируемому элементу).
Например, во внешней таблице стилей для элемента h3 указаны следующие свойства:
h3 { color:red; text-align:left; font-size:8pt;
}
Во внутренней таблице стилей для этого же элемента указаны такие свойства:
h3 { text-align:right; font-size:20pt;
}
Если кроме внутреннего стиля, на странице будет ссылка на внешний файл css, тогда у элемента h3 будет такой стиль:
color:red; text-align:right;
font-size:20pt;
Цвет заголовка наследуется из внешней таблицы стилей, а выравнивание текста (text-align) и размер шрифта (font-size) — из внутренней таблицы стилей.
Конфликт стилей
Как уже указывалось выше, стили могут быть записаны в:
- элементе HTML
- элементе head документа HTML
- внешнем файле CSS
Совет: в html документе может быть несколько ссылок на внешние файлы css.
Приоритет стилей
Какой стиль будет применен к html элементу, если для него указаны различные свойства в различных таблицах стилей?
Кратко можно сказать, что все стили для элемента складываются в новый «виртуальный» стиль в соответствии со следующим списком, где номер четыре имеет самый высший приоритет:
- Установки браузера
- Внешний стиль
- Внутренний стиль (в элементе head)
- Строчный стиль (в html элементе)
Таким образом, строчный стиль имеет наивысший приоритет, что означает то, что он отменит стили внутренних и внешних стилевых таблиц, а также настройки браузера.
Совет: помните о том, что если ссылка на внешний файл css записана после внутренней таблицы стилей, то внешний стиль отменит внутренний стиль.