15. Подключение внешних файлов в HTML - стили CSS

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

Дополнительное видео по теме

Подключение файла CSS

Это второй способ использования стилей CSS. С первым способом вы познакомились в предыдущем уроке.

Этот способ более эффективный и удобный. Итак, нам поможет тег <link>. Он имеет три важных атрибута: type, rel и href: 

• Атрибут type – указывает тип подключаемого документа;
• Атрибут rel – сообщает отношение между файлами;
• Атрибут href – ссылка на файл.

Далее на примерах будем разбираться.

Примеры подключения файла CSS

Рассмотрим следующую структуру проекта:

Подключение файла стилей CSS для документа index.html

Подключение файла стилей, находящегося в той же директории:

<link type = "text/css" rel = "stylesheet" href = "style_index.css"> 

Подключение CSS-стилей, находящихся в папке css:

<link type = "text/css" rel = "stylesheet" href = "css/style_index.css"> 

Подключение файла стилей CSS для документа blog.html

Файл blog.html находится в директории blog. Подключение файла style_index.css возможно тремя способами:

<link type = "text/css" rel = "stylesheet" href = "/style_index.css"> 

Слеш / перед названием файла указывает относительный путь от корня сайта (проекта).

Мы могли сразу указать абсолютный путь:

<link type = "text/css" rel = "stylesheet" href = "https://codebra.ru/style_index.css"> 

Или с помощью символа ../ «подняться на уровень выше» и подключить файл style_index.css:

<link type = "text/css" rel = "stylesheet" href = "../style_index.css"> 

Теперь подключим файл blog_style.css:

<link type = "text/css" rel = "stylesheet" href = "../css/css_blog/blog_style.css"> 

Еще потренируйтесь с подключением файлов и переходите к следующему уроку, в котором вы познакомитесь с мета-тегами.

Похожие уроки Codebra

1. Подключите стили с именем thr, которые лежат в папке main. Папка main находится на уровень ниже, чем файл к которому подключаем (возможно, нужно использовать ../)

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.