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:

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

Внешний CSS

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

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

Для проведения эксперимента по подключению внешнего файла CSS, создайте файл style.css со следующим кодом:

Поместите файл style.css в ту же папку, где находится html-файл для тестов, и CSS должен заработать. Если файл style.css будет размещен в другой папке, необходимо будет указать абсолютный или относительный путь к этому файлу.

Добавить комментарий

Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора.