HTML. Подключение CSS

Подключение каскадных таблиц стилей (CSS) в HTML. Добавление CSS в html-элементы и html-документы. Подключение внешнего файла style.css.

Содержание

Подключение CSS

Каскадные таблицы стилей (CSS) — это инструмент, который используется для форматирования макета веб-страницы. CSS позволяет управлять цветом, шрифтом, размером текста, расположением html-элементов, фоновыми изображениями, фоновыми цветами, различными дисплеями для разных устройств и размеров экрана и т.д.

Слово «каскадные» означает, что стили, примененные к родительскому элементу, будут применяться и ко всем дочерним элементам, расположенным внутри этого родителя.

Добавить CSS в html-документ можно тремя способами:

Встроенный CSS — добавление стилей внутри html-элементов.
Внутренний CSS — размещение каскадных таблиц стилей в разделе <head> документа HTML.
Внешний CSS — подключение внешнего файла каскадных таблиц стилей style.css.

Встроенный CSS

Встроенный CSS используется для применения уникального стиля к одному html-элементу. Встроенный стиль добавляется внутри html-элементов с помощью атрибута <style>.

Примеры встроенного CSS:

Пример	Результат
<span style="color: blue;">Встроенный CSS (синий цвет)</span>	Встроенный CSS (синий цвет)
<span style="font-family: courier;">Встроенный CSS (courier)</span>	Встроенный CSS (courier)

Внутренний CSS

Внутренний CSS используется для определения стиля отдельной html-страницы. Внутренняя каскадная таблица стилей добавляется в раздел <head> документа HTML с помощью элемента <style>.

Пример внутреннего CSS:

<!DOCTYPE html>

<html>

<head>

<style>

p {

color: blue;

}

p:hover {

background-color: yellow;

}

</style>

</head>

<body>

<p>Наведите курсор на этот синий текст ...</p>

</body>

</html>

Вы можете создать файл HTML для проверки этого кода. Его же вы сможете использовать и для экспериментов с подключением внешнего файла style.css.

Внешний CSS

Внешняя каскадная таблица стилей используется для определения стиля многих html-страниц. Она подключается с помощью элемента <link> путем указания ссылки на внешний файл CSS (style.css).

Пример подключения внешнего файла CSS: