Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Подключите стили с именем
thr, которые лежат в папкеmain. Папкаmainнаходится на уровень ниже, чем файл к которому подключаем (возможно, нужно использовать../)
В предыдущем уроке узнали про тег <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 по тегу HTML.
