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 будет размещен в другой папке, необходимо будет указать абсолютный или относительный путь к этому файлу.

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

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