Загрузка...

Как подключить CSS

Можно написать безупречные CSS-правила и всё равно не увидеть никаких изменений — если браузер их так и не загрузил. На этом занятии вы узнаете три обычных способа подключить CSS к HTML и выберете, какой из них брать по умолчанию.

Как добавить CSS на HTML-страницу?

Способов три: внешняя таблица стилей, подключённая из head, внутренний блок <style> в head или встроенный атрибут style у одного элемента. Для настоящих сайтов и проектов из нескольких страниц начинайте с отдельного файла .css.

Три способа коротко

Эта таблица поможет выбрать способ ещё до того, как вы начнёте писать код. Дальше у каждого способа будет короткий пример.

📊 Способы добавить CSS

Способ Где находится Повторное использование на разных страницах Лучшее применение
Внешняя таблица стилей Отдельный файл .css + <link> в head Отлично Выбор по умолчанию для проектов и этого курса
Внутренний CSS <style> … </style> в head HTML-файла Только одна страница Быстрые демо и практика в одном файле
Встроенный CSS style="…" у одного HTML-элемента Нет Мелкая разовая правка (использовать редко)

Внешняя таблица стилей (рекомендуемый вариант по умолчанию)

Храните HTML и CSS в разных файлах. В head укажите путь к таблице стилей элементом link: браузер загрузит CSS-файл и применит его правила.

Подключение внешней таблицы стилей

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

Правила пишите в styles.css рядом с HTML-файлом (если файл лежит в подпапке, поправьте href):

Внешний файл styles.css

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

Почему во внешнем файле работать удобнее

  • Одна таблица стилей оформляет много HTML-страниц
  • Менять внешний вид можно, не разыскивая стили среди разметки
  • Браузер может кэшировать .css-файл и не скачивать его заново на каждой странице
  • Следите за rel="stylesheet" и правильным href: опечатка в пути оставит страницу без оформления, и никакой ошибки вы не увидите

Внутренний CSS (<style> в head)

Для одной учебной страницы правила можно записать внутри элемента <style> в head. На занятиях «Введение» и Syntax мы делали именно так, чтобы HTML и CSS лежали в одном файле.

Внутренний блок style

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

Когда внутренний CSS уместен

Для демо и домашних заданий, которые нужно сдать одним файлом, внутренний CSS вполне подходит. Но с ростом проекта он перестаёт справляться: если копировать один и тот же блок <style> в каждую страницу, версии расходятся, а обновлять всё приходится вручную. Переходите на внешний файл, как только страниц становится больше одной, или когда хотите аккуратнее разделить содержимое и оформление.

Встроенный CSS (атрибут style)

Во встроенном CSS объявления записываются прямо в элемент через атрибут style. Ни селектора, ни отдельного файла — оформляется только этот один элемент.

Встроенный атрибут style

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

Используйте редко

Встроенные стили удобны для быстрой временной проверки, но они смешивают оформление с разметкой, плохо переиспользуются, а позже их трудно переопределить, когда в дело вступают каскад и специфичность. Лучше применять классы в таблице стилей. Правила разрешения конфликтов каскада вы разберёте на следующих занятиях; пока считайте встроенные стили исключением, а не привычкой.

Какой способ выбрать?

  • Строите сайт или выполняете проекты курса: внешняя таблица стилей
  • Короткий демо-файл на занятии: внутренний <style> допустим
  • Нужно на пару секунд изменить один элемент при отладке: встроенный стиль выручит — потом перенесите правило в таблицу стилей
    Способы можно сочетать. Если одно и то же свойство задано в нескольких местах, браузер выбирает по правилам каскада (о них позже). Хорошая привычка: постоянные стили держать во внешнем файле и не разбрасывать одно свойство по всем трём способам.

Попробуйте сами

  1. Создайте howto.html и styles.css в одной папке.
  2. В howto.html добавьте head с <link rel="stylesheet" href="styles.css">, а в body — заголовок: <h1 class="hero">How-to practice</h1>.
  3. В styles.css напишите: .hero { color: #0f766e; }. Откройте HTML-файл в браузере.
  4. Замените цвет на #1d4ed8, сохраните CSS-файл и обновите страницу — цвет заголовка должен измениться.
  5. Временно добавьте к h1 атрибут style="color: #b45309;" и обновите страницу. Затем удалите атрибут, чтобы цвет снова задавала таблица стилей.

Типичные ошибки

  • По привычке ставить <link rel="stylesheet" …> в body — его место в head, вместе с остальными служебными данными документа
  • Опечатка в href (style.css вместо styles.css): файл не загружается, и страница остаётся без оформления
  • Забыть rel="stylesheet" в элементе link
  • Вставлять целый блок <style> в каждую страницу вместо одного общего внешнего файла
  • Задавать каждый цвет и шрифт встроенным style — разметка засоряется, и её тяжело поддерживать

Итоги

  • Три способа: внешняя таблица стилей, внутренний <style>, встроенный атрибут style
  • Для настоящих страниц по умолчанию — внешний файл и <link rel="stylesheet" href="…"> в head
  • Внутренний CSS подходит для практики в одном файле, встроенный — для редких разовых правок
  • Опечатка в пути и пропущенный rel — частые причины, почему стили «не действуют»
  • Потренируйтесь: подключите настоящий .css-файл, измените значение и обновите страницу

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок