CSS стили предназначены для визуального форматирования страницы. Они могут быть встроены в элемент, в саму страницу или находится во внешнем файле. Рассмотрим, как подключить и использовать css-форматирование.
Стиль как атрибут элемента
Стиль можно добавить непосредственно к элементу, использовав атрибут style. Этот стиль имеет, как правило, более высокий приоритет, но, если его нужно изменить в нескольких местах, это будет сделать достаточно трудно. Поэтому применяют такое решение редко. Такое стилевое оформление называется внутренним, встроенным или инлайновым:
|
1 |
<h2 style="font-size: 3em; font-family: Georgia, serif;">Встроенный стиль</h2> |
Встраивание тегов на страницу
Стили также могут быть встроены на страницу. Для этого в блоке head размещают теги style:
|
1 2 3 4 5 6 7 8 9 10 |
<style> body { width: 80%; margin: 20px auto; font-family: Verdana, Geneva, sans-serif; } h2 { font-family: Georgia, 'Times New Roman', serif; } </style> |
Внимание! Тег style обязательно должен быть закрыт. Иначе вы не увидите текста страницы!
Такого рода форматирование касается только данной конкретной страницы. Чтобы аналогичным образом отформатировать другую страницу, необходимо будет скопировать все, что есть в тегах style и добавить в <head> другой страницы. Т.е. этот способ подходит для создания тестовых страниц, но не подходит для использования на сайте, где большинство страниц имеет одинаковое форматирование.
Подключение внешнего файла стилей
Весь css-код размещают в отдельном css-файле. По сути это обычный текстовый файл, который содержит код в формате css и имеет расширение .css.
|
1 |
<link rel="stylesheet" href="somefile.css"> |
В атрибуте href записывается путь к css-файлу, как правило, относительный. Например, если файл называется style.css и находится в папке css, то в теге link будет такая запись:
|
1 |
<link rel="stylesheet" href="css/style.css"> |
Внимание! В css-файле можно размещать только код и комментарии в css-синтаксисе, но не в HTML-синтаксисе!
Запись css-правил
Внутри css-файла все правила записывают в следующем виде:
|
1 2 3 4 5 |
селектор { свойство1: значение; свойство2: значение; свойство3: значение; } |
Т.е. правила пишутся внутри фигурных скобок в виде пар свойство: значение свойства, разделенных точкой с запятой. После последнего правила ставить точку с запятой необязательно.
В качестве селектора может выступать какой-нибудь элемент, группа элементов, класс или id (см. статью о селекторах css). Более сложные селекторы рассмотрим позже.
Импорт css-файла
Определяется директивой @import, которую записывают либо внутри основного css-файла, либо в тегах style. Строка с импортом всегда должна быть в самом начале css-файла или сразу за открывающимся тегом <style>. После нее можно записывать другие css-правила.
|
1 2 3 4 5 6 7 |
<style> @import url("somefile.css"); .rules { border: 3px double #900; padding: 10px; } </style> |
Комментарии в CSS
Комментарии в CSS предназначены для того, чтобы скрыть часть css-кода. Код в комментариях не влияет на форматирование. Записываются комментарии так:
|
1 |
/* CSS Комментарий */ |
Так, например, в приведенном ниже коде не будут применяться для body правила, касающиеся цвета фона и семейства шрифта, хоть они и описаны, т.к. для них был использован комментарий.
|
1 2 3 4 5 6 7 8 |
<style> body { width: 80%; margin: 20px auto; /* background: #cde; font-family: Verdana, Geneva, sans-serif; */ } </style> |
Очень часто комментарии используют, чтобы указать разделы сайта в css-файле, для которых пишутся правила форматирования. Такой код становится намного читабельней:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*-- Menu --*/ #menu { ... } #menu ul { ... } /*-- About Section --*/ #about { ... } .about-block { ... } |
Все, что находится между /* */ не интерпретируется браузером, как css, поэтому внутри этих знаков можно использовать дополнительные пробелы, черточки и т.д. для улучшения зрительного восприятия.
Мне все понравилось, потому что все хорошо объяснено. Спасибо.
Просто и понятно. Буду пользоваться всеми способами подключения стилей.
Спасибо. Все понятно.