Kodokon kodokon.com

Подключение CSS к странице

Узнай, что такое CSS, как подключить его к HTML-странице и как написать своё самое первое правило.

8 мин · 3 вопросов

Открыть этот урок в Kodokon

HTML описывает содержимое веб-страницы: заголовки, абзацы, изображения. CSS (сокращение от Cascading Style Sheets, каскадные таблицы стилей) описывает её внешний вид: цвета, размеры, отступы. Представь дом: HTML - это стены и комнаты, а CSS - краска, мебель и декор. Без CSS все веб-страницы выглядели бы одинаково: чёрный текст на белом фоне.

Правило CSS состоит из трёх частей. Сначала идёт селектор: он говорит, какие элементы страницы затронуты (например, все абзацы). Затем внутри фигурных скобок { } идут одно или несколько объявлений. Каждое объявление связывает свойство (то, что ты хочешь изменить, например цвет) со значением (твой выбор, например красный); они разделены двоеточием : и заканчиваются точкой с запятой ;.

CSS
p {
  color: red;
  font-size: 18px;
}
Правило CSS: все абзацы красного цвета, размер 18 пикселей.

Прочитаем это правило слово за словом. p - это селектор: он нацелен на каждый элемент <p> на странице, то есть на абзацы. color - свойство, которое задаёт цвет текста, а red - его значение. font-size задаёт размер текста, здесь 18px (18 пикселей, единица измерения экранов). Подключить этот CSS к HTML-странице можно тремя способами. Рекомендуемый - внешний файл: CSS живёт в отдельном файле, например styles.css, который ты подключаешь к HTML тегом <link>, размещённым внутри <head>.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This text will be red.</p>
  </body>
</html>
Тег <link> подключает файл styles.css к странице.

Второй способ: внутренний CSS. Ты пишешь правила прямо в HTML, внутри тега <style>, размещённого в <head>. Это удобно для быстрой проверки, но стили применяются только к этой одной странице. Третий способ: инлайновый CSS. Ты пишешь объявления прямо на теге, в атрибуте style. Обрати внимание: здесь нет ни селектора, ни фигурных скобок, ведь стиль применяется только к этому тегу.

HTML
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p style="color: blue;">I am blue.</p>
  <p>I am red.</p>
</body>
Внутренний CSS внутри <style> и инлайновый CSS на первом <p>.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

  1. В правиле p { color: red; } чем является color?
    • Селектором
    • Свойством
    • Значением
    • Точкой с запятой
  2. Какой тег подключает внешний файл CSS к HTML-странице?
    • <style>
    • <css>
    • <link rel="stylesheet" href="styles.css">
  3. Почему внешний файл CSS - рекомендуемый способ?
    • Только он работает на мобильных устройствах
    • Один файл может оформлять сразу несколько страниц
    • Он автоматически ускоряет написание кода сайта