Структура CSS
Для написания таблиц стилей CSS используется свой синтаксис. Общий вид задания свойств элементу выглядит так:
селектор {свойство1: значение1; свойство2: значение2}
Для удобства чтения и редактирования каждое свойство принято указывать отдельной строкой.
селектор {
свойство1: значение1;
свойство2: значение2;
}
Селектор определяет элемент (или элементы), для которого применяются свойства.
Свойства - это параметры, которые можно изменить у элемента страницы. Для каждого тега доступны различные свойства.
В качестве значений можно использовать ключевые слова (специально определённые в CSS), числа с использованием единиц измерения или функции с параметрами. Пример:
h1 {
font-size: 20px;
color: red;
}
В результате для всех заголовков <h1> в документе будет установлен размер шрифта 20 пикселей и цвет шрифта красный.
Чтобы выделить комментарий, необходимо использовать сочетание символов
и /*
. Например:*/
/* Заголовки */
h1 {
color: red;
}
Как подключить стили к документу?
Таблицы стилей CSS могут располагаться в самом документе или в отдельном файле с расширением .css. Всего существует 4 способа подключения стилей к документу.
Подключение внешнего файла стилей к документу
Подключение файла осуществляется с помощью тега <link>. Если создать файл style.css в одном каталоге с файлом index.html, тогда этот файл подключается так:
<link type="text/css" rel="stylesheet" href="style.css">
Описание стилей в начале документа
Описание стилей непосредственно в документе выполняется с помощью тега <style> в заголовке <head>.
<style>
h1 {
font-size: 20px;
color: red;
}
</style>
Импорт свойств из внешнего файла
Импорт свойств из внешнего файла выполняется с помощью директивы @import в теге <style>.
<style type="text/css"> @import url(style.css); </style>
Описание стилей отдельно в каждом элементе
Описание стилей отдельно для каждого элемента производится с помощью глобального атрибута style. В этом случае запись стилей имеет несколько иной вид. Так как стиль применяется только к данному элементу, то селектор указывать не нужно.
<h1 style="font-size: 20px; color: red;">Текст</h1>