Книга по CSS
2. Добавление стилей на страницу
Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
- применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента
link
- встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента
style
- применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута
style
Разберём эти способы подробнее.
Внешние стили (external style sheets)
Применяются с помощью элемента link
, который должен располагаться внутри элемента head
и нигде более.
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.
Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link
.
Таблицы стилей документа (document style sheets)
Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).
CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style
:
...
</style>
Сам тег style
(в отличие от link
) может находиться в любой части документа, но обычно его размещают внутри элемента head
.
Встроенные стили (inline styles)
Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style
. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style
(именно атрибутом элементов, а не элементом!):
Атрибут style
есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.
Внутри атрибута style
можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.
Замечание: избегайте использования вышеописанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.