15. Подключение внешних файлов в HTML - стили CSS
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
В предыдущем уроке узнали про тег <style>
и научились его применять для описания стилей CSS. В этом уроке научимся подключать отдельные файлы с помощью тега <link>
.
Дополнительное видео по теме
Подключение файла CSS
Это второй способ использования стилей CSS. С первым способом вы познакомились в предыдущем уроке.
Этот способ более эффективный и удобный. Итак, нам поможет тег <link>
. Он имеет три важных атрибута: type
, rel
и href
:
- Атрибут
type
– указывает тип подключаемого документа; - Атрибут
rel
– сообщает отношение между файлами; - Атрибут
href
– ссылка на файл.
Далее на примерах будем разбираться.
Примеры подключения файла CSS
Рассмотрим следующую структуру проекта:
Для доступа необходимо авторизоваться на сайте Codebra.
Подключение файла стилей 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
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Подключите стили с именем
thr
, которые лежат в папкеmain
. Папкаmain
находится на уровень ниже, чем файл к которому подключаем (возможно, нужно использовать../
)
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.