Как подключить CSS файл к HTML странице?
Пока стили CSS не подключить к HTML странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.
Для тех, кто любит смотреть в формате видео.
Для тех, кто любит читать, инструкция ниже.
Для того, чтобы продемонстрировать, как работает каждый из этих способов, возьмем, для примера, html-файл со следующим содержимым.
Задача стилей CSS, которые будут подключаться, сделать элемент абзаца
красным цветом.
Документ без названия Абзац
Во всех примерах, результат на веб-странице будет один и тот же. Вы увидите вот такой красный абзац текста.
1 вариант. Внутри открывающего тега с помощью атрибута style.
Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.
Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента
.
Документ без названия Абзац
Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.
2 вариант. Внутри элемента style.
Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type=»text/css». Указание этого атрибута обязательно.
Давайте посмотрим, как это выглядит на конкретном примере.
p Документ без названия Абзац
3 вариант. Подключение внешнего файла стилей.
И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.
Обратите внимание на атрибуты, которые указываются у этого элемента.
Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.
Документ без названия Абзац
Файл style.css содержит следующих код:
Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Сайт не видит код css, что делать?
Сайт делала сначала без php. Потом перенесла его на диск С в папку xampp, стала доделывать там, чтобы использовать php. Точнее не перенесла, а скопировала всю папку с сайтом. Все работает, если меняю в html, а в файле style.css изменения не работают. Путь к файлу проверила. На сайте со старого места на диске D изменения проходят, с диска C нет, почему так?
15 ответов
Код ваш покажите полностью и названия файлов, а также по каким путям лежат файлы относительно рабочей папки с проектом.
Может кэширование? Попробуйте в другом браузере открыть
не помогло. я не так сформулировала вопрос. сайт видит код css, но когда вношу изменения в файл style.css, то ничего не меняется.
Помогите пожалуйста!
код длинный. файлы: здесь файл style.css — C:\xampp\htdocs\Khvoya\assets\css файл rand_otzyvy.php в корне, то есть — C:\xampp\htdocs\Khvoya
Хвоя -->