Подключение внешних CSS (link rel='stylesheet') [Модуль 10: Метаданные и head]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Чтобы сайт выглядел красиво и современно, ему нужны стили. Держать весь CSS-код в одном HTML-файле неудобно, особенно если сайт большой. Гораздо эффективнее вынести стили в отдельный файл. Это делает код чище, его легче поддерживать и позволяет использовать одни и те же стили на разных страницах, что ускоряет загрузку. Для подключения такого внешнего файла используется специальный тег `<link>`, который размещается внутри `<head>`. В этой серии заданий мы отработаем его использование на практике: разберемся с его основными атрибутами, научимся правильно указывать путь к файлу и увидим, как HTML-документ 'связывается' с файлом каскадных таблиц стилей (CSS). Это базовый навык, без которого не обходится ни одна современная веб-страница.

Список тем

Тег для подключения внешних ресурсов

id: 37895_link-css-01

Чтобы страница получила стильное оформление, необходимо подключить внешний CSS-файл. Это делается с помощью специального одиночного тега, который размещается в секции `<head>`. Ваша задача — вставить имя этого тега, чтобы стили применились.

CSS

body {
  background-color: #e6f7ff;
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

h1 {
  color: #0056b3;
}

                     <head>
  <title>Подключаем стили</title>
  <input1 rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Стили подключены!</h1>
</body>

HTML

<head>
  <title>Подключаем стили</title>
  <input1 rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Стили подключены!</h1>
</body>

Для создания связи с внешними ресурсами, такими как таблицы стилей или иконки, используется одиночный тег `<link>`. Он не требует закрывающего тега.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибут отношения (rel)

id: 37895_link-css-02

Тегу `<link>` нужно объяснить, как именно связан подключаемый файл с текущим документом. Для этого используется специальный атрибут 'отношения'. Вставьте пропущенное имя этого атрибута.

CSS

body {
  background-color: #fffbe6;
}

p {
  color: #8a6d3b;
  font-size: 18px;
  padding: 15px;
  border: 1px solid #f0e68c;
}

                     <head>
  <title>Атрибут отношения</title>
  <link input1="stylesheet" href="style.css">
</head>
<body>
  <p>Этот текст должен стать цветным.</p>
</body>

HTML

<head>
  <title>Атрибут отношения</title>
  <link input1="stylesheet" href="style.css">
</head>
<body>
  <p>Этот текст должен стать цветным.</p>
</body>

Атрибут, который определяет отношение между текущим документом и связанным ресурсом, называется `rel` (от англ. relationship).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Значение для таблицы стилей

id: 37895_link-css-03

Теперь, когда браузер знает, что у нас есть какая-то связь, нужно уточнить, что мы подключаем именно таблицу стилей. Для этого атрибуту `rel` присваивается определенное значение. Укажите его.

CSS

h1 {
  color: crimson;
  text-decoration: underline;
}

body {
  font-family: monospace;
  padding: 15px;
}

                     <head>
  <title>Тип ресурса</title>
  <link rel="input1" href="style.css">
</head>
<body>
  <h1>Я - красный и подчеркнутый!</h1>
</body>

HTML

<head>
  <title>Тип ресурса</title>
  <link rel="input1" href="style.css">
</head>
<body>
  <h1>Я - красный и подчеркнутый!</h1>
</body>

Чтобы указать, что вы подключаете именно таблицу стилей, атрибуту `rel` необходимо задать значение `stylesheet`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибут для указания пути

id: 37895_link-css-04

Мы указали, что подключаем стили, но не сказали, где находится сам файл. Для указания пути к файлу используется атрибут, аналогичный тому, что и в ссылках `<a>`. Добавьте этот атрибут.

CSS

body {
  background: #f0f8ff;
}

div {
  padding: 20px;
  border-left: 5px solid #4682b4;
  color: #333;
}

                     <head>
  <title>Путь к файлу</title>
  <link rel="stylesheet" input1="style.css">
</head>
<body>
  <div>Блок с рамкой слева.</div>
</body>

HTML

<head>
  <title>Путь к файлу</title>
  <link rel="stylesheet" input1="style.css">
</head>
<body>
  <div>Блок с рамкой слева.</div>
</body>

Путь к файлу (URL) указывается в атрибуте `href` (hypertext reference).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Собираем всё вместе

id: 37895_link-css-05

Давайте закрепим знания. В теге `<link>` пропущены оба ключевых атрибута: один для указания типа связи, другой — для пути к файлу. Заполните оба пропуска, чтобы применить стили к карточке.

CSS

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}
.card-title {
  font-size: 20px;
  color: #333;
  margin: 0;
}

                     <head>
  <title>Полная конструкция</title>
  <link input1="stylesheet" input2="style.css">
</head>
<body>
  <div class="card">
    <h2 class="card-title">Карточка товара</h2>
  </div>
</body>

HTML

<head>
  <title>Полная конструкция</title>
  <link input1="stylesheet" input2="style.css">
</head>
<body>
  <div class="card">
    <h2 class="card-title">Карточка товара</h2>
  </div>
</body>

Вам нужно добавить два атрибута: `rel="stylesheet"` для указания типа ресурса и `href="style.css"` для указания пути к файлу.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Местоположение тега <link>

id: 37895_link-css-06

Тег `<link>` для подключения стилей должен находиться в строго определенной части HTML-документа, чтобы браузер успел загрузить и применить стили до отображения содержимого. Укажите тег-контейнер, в который нужно поместить `<link>`.

CSS

body {
  font-family: Georgia, serif;
  color: #444;
  background: #fafafa;
}

                     <html>
  <input1>
    <title>Место для Link</title>
    <link rel="stylesheet" href="style.css">
  </input1>
  <body>
    <p>Текст с элегантным шрифтом.</p>
  </body>
</html>

HTML

<html>
  <input1>
    <title>Место для Link</title>
    <link rel="stylesheet" href="style.css">
  </input1>
  <body>
    <p>Текст с элегантным шрифтом.</p>
  </body>
</html>

Все мета-теги, включая `<link>`, `<title>`, `<meta>`, должны располагаться внутри контейнера `<head>`, который идет перед `<body>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Подключение нескольких файлов стилей

id: 37895_link-css-07

В реальных проектах часто используют несколько CSS-файлов: один для общих стилей (сброс, шрифты), а другой — для стилей конкретного компонента. Подключите второй файл `theme.css`, чтобы завершить оформление кнопки.

CSS

/* В base.css */
.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}

/* В theme.css */
.button {
  background-color: #28a745;
  color: white;
  border: 1px solid #218838;
}

                     <head>
  <title>Несколько файлов</title>
  <link rel="stylesheet" href="base.css">
  <input1 rel="stylesheet" href="theme.css">
</head>
<body>
  <a href="#" class="button">Нажми меня</a>
</body>

HTML

<head>
  <title>Несколько файлов</title>
  <link rel="stylesheet" href="base.css">
  <input1 rel="stylesheet" href="theme.css">
</head>
<body>
  <a href="#" class="button">Нажми меня</a>
</body>

Чтобы подключить несколько файлов, просто добавьте еще один тег `<link>` со своими атрибутами `rel` и `href` после первого. Порядок подключения важен: стили из нижнего файла могут переопределять стили из верхнего.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Уточняющий атрибут type

id: 37895_link-css-08

Хотя современные браузеры и так понимают, что `.css` — это файл стилей, раньше было хорошей практикой явно указывать MIME-тип файла с помощью атрибута `type`. Добавьте этот атрибут и его значение.

CSS

p {
  padding: 10px;
  background: #eee;
  border: 1px dotted #999;
}

                     <head>
  <title>Атрибут Type</title>
  <link rel="stylesheet" input1="text/css" href="style.css">
</head>
<body>
  <p>Этот абзац стилизован с помощью CSS, тип которого указан явно.</p>
</body>

HTML

<head>
  <title>Атрибут Type</title>
  <link rel="stylesheet" input1="text/css" href="style.css">
</head>
<body>
  <p>Этот абзац стилизован с помощью CSS, тип которого указан явно.</p>
</body>

Чтобы явно указать тип контента, используется атрибут `type`. Для CSS-файлов его значением является `text/css`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку