Знакомство с css

*/
color: blue; /* устанавливаем цвет текста */
}
p { /* выбираем все элементы

*/
color: green; /* устанавливаем цвет текста */
}

Заголовок первого уровня.

/* заголовок получит синий цвет */

И один абзац для примера.

/* абзац получит зеленый цвет */
Какой-то текст после абзаца./* текст, для которого не установлены стили */


В этом примере мы использовали два селектора типа, которые задают определенный цвет для заголовков первого уровня (

) и абзацев (

).

Результат нашего примера:

Рис. 1 Пример использования внутренней таблицы стилей.

Рис. 1 Пример использования внутренней таблицы стилей.
Предыдущие версии HTML (до пятой версии) требуют в открывающем теге



В некоторых случаях допускается добавлять стили непосредственно к каждому конкретному HTML тегу без применения внешней или внутренней таблицы стилей (встроенным CSS мы пользовались при изучении HTML 5).

Еще раз для понимания: внешняя таблица стилей это обычный текстовый файл с разрешением *.css. Название этого файла всегда должно иметь вид *.css (например, main.css, site.css, styles.css, print.css и так далее). Файл внутри себя должен содержать только синтаксис CSS (никаких HTML тегов в нем быть не может).

Связывание таблиц стилей с HTML-кодом

Подключение с использованием тега
Самым распространенным методом добавления (связывания) внешней таблицы стилей с документом является использование тега . Элемент определяет связь между документом и внешним ресурсом.

Обращаю Ваше внимание, что элемент размещается всегда внутри элемента (как правило, перед его закрывающим тегом), при этом он может быть использован любое количество раз (содержать различные таблицы стилей). Элемент не требует закрывающего тега и содержит внутри себя только атрибуты.

HTML тег имеет следующий синтаксис:

/* синтаксис HTML 5 */
/* синтаксис HTML 4.01 */
Сразу хочу обратить ваше внимание на то, что атрибут type, который определяет MIME-тип, используемого файла (в нашем случае текстовый файл таблиц стилей) не является обязательным в HTML 5. Для всех типов документов в HTML 5 необходимы лишь два обязательных атрибута:

rel = "stylesheet" - определяет отношение между текущим документом и связанным документом на который ведёт ссылка (в нашем случае таблица стилей).

href - задает URL-адрес местонахождения внешнего файла. Адрес может быть как относительный, так и абсолютный.
Подключение с использованием правила @import
CSS правило @import используется для импорта содержимого CSS файла в текущую таблицу стилей. Это правило должно предшествовать всем другим видам правил, за исключением правила @charset, которое задает кодировку символов, используемую в таблице стилей.

Внешняя таблица стилей может быть подключена к веб-странице с помощью HTML тега , или с использованием встроенного в CSS правила @import, которое по-большому счету делает то же самое. Оба варианта позволяют присоединить таблицы стилей к веб странице.

Основное отличие правила @import заключается в том, что с использованием этого правила вы можете присоединить одну внешнюю таблицу стилей к другой.

Импортирование к внешней таблице стилей

Давайте рассмотрим пример, который позволит нам присоединить несколько таблиц стилей к одной внешней таблице стилей:

/* Содержимое файла anyname.css */

@import url("color.css"); /* импортируем в основной файл содержимое первого файла css */
@import url("fonts.css"); /* импортируем в основной файл содержимое второго файла css */
/* стили, которые находятся в основном файле css */
селектор {
свойство: значение;
}
...
/* Конец содержимого файла anyname.css */
Чтобы присоединить один внешний файл таблиц стилей к другому, необходимо внутри файла к которому добавляется содержимое объявить правило @import и указать URL путь к этому файлу. Чтобы задать путь необходимо после правила @import указать url("path/to/file"). При этом путь, который указывается в круглых скобках может быть как абсолютным, так и относительным. Информацию о том как задавать абсолютные и относительные пути вы можете узнать в статье учебника HTML 5 "HTML ссылки".

Как и с помощью нескольких тегов вы можете разместить несколько правил @import, чтобы присоединить необходимое количество внешних таблиц стилей.

Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе таблицы стилей будут проигнорированы браузерами и не импортированы в файл.

Импортирование к внутренней таблице стилей

Кроме того, с использованием правила @import существует возможность привязать внешние таблицы стилей к внутренней таблице стилей документа. Для этого необходимо объявить правило или правила сразу после открывающего тега