Как подключить таблицу стилей css к html

Простейший вопрос: “Как подключить таблицу стилей css к html-странице?” Для этого в содержимое тега head нужно вставить следующую строку:

<link rel="stylesheet" href="путь к таблице стилей">

Тег link позволяет подключать к странице внешние файлы. Атрибут rel="stylesheet" дает инструкции, что подключаемым файлом является именно таблица стилей. Href – это путь к файлу стилей. Как правило его значение "style.css" если таблица стилей называется именно так и лежит в одной папке с html-страничкой, для которой она подключается.

Как прописать путь к файлу

Соответственно, если css-файл лежит где-то в другом месте, то путь к нему прописывается по другому. Примеры, чтобы вам было понятней:

  • Файл table.css лежит в папке styles, которая находится в той же папке, что и html-страница: href="styles/table.css"
  • Файл fonts.css лежит в папке styles, которая находится в папке css, а та в свою очередь находится там, где и html-страница: href="styles/css/fonts.css"

Две точки позволяют в указании пути вернуться назад от изначального места (от места, где находится наша html-страничка). Так что дотянуться можно так:
href="../style.css" – файл лежит на один уровень выше html-файла.
href="../../style.css" – на два уровня выше.
href="../../../css/style.css" – на три уровня выше + сам файл стилей лежит еще и в папке css.
Надеюсь, этих простых примеров вам понятно, чтобы полностью разобраться с тем, как задать путь к файлу.

Устаревший атрибут

Раньше при подключении таблицы стилей нужно было также указывать в теге link атрибут type="text/css", но сегодня это уже не является обязательным требованием – браузеры и так прекрасно все понимают. Впрочем, для полноценной поддержки в старых браузерах можно перестраховаться и все же дописать его.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий