Создание первой таблицы стилей
Чтение — около 7 минут· без учёта практики
В предыдущем уроке мы разобрали, из чего состоит CSS-правило и где записывают стили. Теперь создадим таблицы стилей сами: сначала внутреннюю, затем внешний файл, а в задании подключим общий файл ко всем страницам сайта Тони.
Файлы мы создаём в редакторе VS Code, с которым работали в уроке учебника HTML «Создание первой страницы». Подойдёт и любой другой редактор кода: CSS-файл — обычный текстовый файл.
Создание внутренней таблицы стилей
Внутренняя таблица стилей записывается в элементе <style>
внутри <head>. В примере ниже заголовок первого уровня выровнен по центру и окрашен в
коричневый цвет, абзацы — в серый. Для элемента <body>, который содержит всё видимое содержимое
страницы, заданы отступ, граница и шрифт. Проверьте, что в каждом объявлении свойство отделено от значения
двоеточием, а в конце стоит точка с запятой.
Внутренняя таблица стилей: попробуйте сами
Правила записаны в элементе style. Замените значение green у свойства border на orange и посмотрите на рамку страницы.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Внутренняя таблица стилей</title>
<style>
h1 {
text-align: center; /* выравнивание текста по центру */
color: saddlebrown; /* цвет текста */
}
p {
color: dimgray; /* цвет текста */
}
body {
margin-top: 50px; /* внешний отступ сверху */
border: 5px solid green; /* сплошная зелёная граница толщиной 5px */
font-family: "Courier New", monospace; /* моноширинный шрифт */
}
</style>
</head>
<body>
<h1>Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер, и у меня есть свой сайт.</p>
</body>
</html>
Для элемента <body> мы указали новые для вас CSS-свойства:
-
margin-top: 50px— внешний отступ от верхнего края элемента, равный 50 пикселям; -
border: 5px solid green— сокращённое свойство, которое задаёт толщину, стиль и цвет границы одним объявлением: сплошную (solid) зелёную границу толщиной 5 пикселей; -
font-family: "Courier New", monospace— шрифт Courier New, а если его нет на компьютере — любой моноширинный шрифт.
Сокращённое свойство меняет сразу несколько составляющих, даже если некоторые значения не записаны.
Например, замените в редакторе border: 5px solid green на border: 5px green:
рамка исчезнет, потому что пропущенный стиль границы получит начальное значение none.
Браузер не сохраняет прежнее solid. Верните его, чтобы снова увидеть рамку.
Не беспокойтесь, если сейчас непонятно, как работают эти свойства: мы ещё не раз будем использовать их в примерах и подробно разберём каждое в отдельных уроках:
- как управлять шрифтами — в уроке «Работа со шрифтами в CSS»;
- как работать с отступами элемента — в уроке «Блочная и строчная модель в CSS»;
- как использовать границы элемента — в уроке «Границы элемента в CSS».
Внутренняя таблица оформляет только свою страницу. Чтобы те же правила действовали на нескольких страницах, их выносят во внешний файл.
Подключение внешней таблицы стилей
Перенесём правила из примера выше в отдельный файл. Содержимое элемента <style> переходит в файл
без изменений, а сам элемент <style> из документа удаляется: пустой неиспользуемый элемент
странице не нужен. Вместо него в <head> появляется элемент
<link>,
который подключает файл:
Внешняя таблица стилей: попробуйте сами
Правила находятся в файле css/style.css, а страница подключает его элементом link. Измените цвет заголовка в файле стилей, затем удалите строку с link в index.html и посмотрите на результат.
css/style.css
h1 {
text-align: center;
color: saddlebrown;
}
p {
color: dimgray;
}
body {
margin-top: 50px;
border: 5px solid green;
font-family: "Courier New", monospace;
}
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Внешняя таблица стилей</title>
<link rel="stylesheet" href="css/style.css"> <!-- подключаем таблицу стилей -->
</head>
<body>
<h1>Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер, и у меня есть свой сайт.</p>
</body>
</html>
В файле style.css только CSS-код — без тегов <style> и других HTML-тегов. Результат
тот же, что у внутренней таблицы стилей. Если удалить <link> или указать неверный путь, страница
откроется без оформления из этого файла. В нашем примере останутся стили браузера по умолчанию;
если на странице есть другие подключённые или встроенные стили, они продолжат действовать.
При неверном пути ошибка загрузки видна в инструментах разработчика, а не вместо содержимого страницы.
Путь к файлу стилей
Атрибут href элемента <link> задаёт путь к файлу так же, как у ссылок и изображений
(урок учебника HTML «Ссылки»).
Относительный путь отсчитывается от папки страницы, в которой записан <link>. Файлы стилей принято
хранить в отдельной папке css, поэтому в сайте Тони пути будут разными:
my-site/
css/
style.css
pages/
signup.html
toys.html
walks.html
index.html
-
в
index.htmlпапкаcssлежит рядом:<link rel="stylesheet" href="css/style.css">; -
в файлах из папки
pagesсначала нужно подняться на уровень выше:<link rel="stylesheet" href="../css/style.css">.
Создание файла в VS Code
-
Откройте в VS Code папку
my-site: Файл → Открыть папку (File → Open Folder).
Проверка: в левой панели видныindex.htmlи папкаpages. -
В панели «Проводник» (Explorer) наведите указатель на название папки
my-siteи нажмите значок «Новая папка» (New Folder). Введите имяcssи нажмите Enter. -
Наведите указатель на папку
css, нажмите значок «Новый файл» (New File), введите имяstyle.cssи нажмите Enter.
Проверка: в правом нижнем углу окна VS Code написано CSS — редактор узнал тип файла по расширению и будет подсвечивать CSS-код. - Запишите в файл правила и сохраните его: Ctrl+S (на macOS — Cmd+S).
-
Добавьте
<link>в<head>страницы, сохраните её и обновите страницу в браузере (F5, на macOS — Cmd+R).
Чтобы проверить правильность пути к файлу, откройте страницу в браузере и выберите в контекстном меню «Просмотр кода
страницы» (View page source). Путь в <link> отображается ссылкой: если по клику открывается
ваш CSS-код, путь верный. Доступность файла ещё не означает, что его стили применились: проверьте также
rel="stylesheet" у элемента <link>. Подробнее искать такие ошибки мы научимся в
следующем уроке с помощью инструментов
разработчика.
Проверьте себя
Выберите ответ — объяснение появится сразу. Ответ можно менять.
Задание
Ожидаемый результат: главная выглядит так же, как до правки, но в её HTML нет атрибутов style.
Перейдите по меню на «Мои игрушки» и «Запись на прогулку»: у этих страниц тоже фон linen, коричневые
заголовки и подвал с цветным фоном. Если изменить цвет в правиле h2, заголовки разделов изменятся на всех
страницах сразу.
Выполните задание
Условие задания
css/style.css
/* Общие стили сайта Тони */
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
<title>Сайт Тони</title>
</head>
<body style="background-color: linen">
<header>
<!-- Меню сайта -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="pages/toys.html">Мои игрушки</a></li>
<li><a href="pages/signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1 id="top" style="color: saddlebrown; text-align: center">Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
<p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
<p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
<ul>
<li><a href="#toy">Моя любимая игрушка</a></li>
<li><a href="#commands">Команды, которые я знаю</a></li>
<li><a href="#schedule">Мой режим дня</a></li>
<li><a href="#walks">Где я гуляю</a></li>
<li><a href="#song">Песня для прогулок</a></li>
</ul>
<section>
<h2 id="toy" class="section-title" style="color: #8B4513">Моя любимая игрушка</h2>
<p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
<figure>
<img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат "Удав"">
<figcaption style="color: dimgray">Я и мой канат «Удав»</figcaption>
</figure>
<p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
<p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
<hr>
<p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
</section>
<section>
<h2 style="color: #8B4513">Мой стишок</h2>
<p>
Я маленький, но смелый,<br>
Гуляю целый день,<br>
А вечером на кресле<br>
Сплю — и мне не лень.
</p>
</section>
<section>
<h2 id="commands" class="section-title" style="color: #8B4513">Команды, которые я знаю</h2>
<p>Хозяин научил меня командам на немецком:</p>
<dl>
<dt lang="de">Sitz!</dt>
<dd>сидеть</dd>
<dt lang="de">Platz!</dt>
<dd>лежать</dd>
<dt lang="de">Fuß!</dt>
<dd>рядом</dd>
</dl>
<details>
<summary>Почему команды на немецком?</summary>
<p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
</details>
</section>
<section>
<h2 id="schedule" style="color: #8B4513">Мой режим дня</h2>
<table>
<caption>Режим дня Тони</caption>
<thead>
<tr>
<th scope="col">Время</th>
<th scope="col">Будни</th>
<th scope="col">Выходные</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">07:00</th>
<td>Прогулка, 20 минут</td>
<td>Сплю</td>
</tr>
<tr>
<th scope="row">08:00</th>
<td colspan="2">Завтрак</td>
</tr>
<tr>
<th scope="row">13:00</th>
<td>Жду хозяина и сплю</td>
<td>Прогулка в парке, 1 час</td>
</tr>
<tr>
<th scope="row">19:00</th>
<td colspan="2">Ужин</td>
</tr>
<tr>
<th scope="row">21:00</th>
<td colspan="2">Вечерняя прогулка</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="progress" style="color: #8B4513">Мои успехи</h2>
<p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
<p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
</section>
<section>
<h2 id="walks" style="color: #8B4513">Где я гуляю</h2>
<p>Я люблю гулять в сквере у дома.</p>
<p>
<a href="pages/walks.html" target="walk">Маршрут</a> |
<a href="assets/tony.png" target="walk">Фото с прогулки</a>
</p>
<iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
<h3>Видео с прогулки</h3>
<p>Субтитры помогут, если вы смотрите видео без звука.</p>
<video width="180" height="320" poster="assets/walk.jpg" controls>
<source src="assets/walk.mp4" type="video/mp4">
<track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
<p><a href="assets/walk.mp4">Скачать видео</a></p>
</video>
<h3>Как я лаю</h3>
<p>Так я разговариваю с хозяином — у нас целый диалог!</p>
<audio controls>
<source src="assets/bark.mp3" type="audio/mpeg">
<p><a href="assets/bark.mp3">Скачать запись</a></p>
</audio>
</section>
<section>
<h2 id="song" style="color: #8B4513">Песня для прогулок</h2>
<p>Хозяин включает эту песню, когда мы выходим гулять.</p>
<iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
<p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
</section>
<section>
<h2 style="color: #8B4513">Моя любимая книга</h2>
<p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
<figure>
<blockquote>
<p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
</blockquote>
<figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
</figure>
</section>
<p><a href="#top">Наверх</a></p>
</main>
<footer style="background-color: hsl(30, 50%, 90%)">
<p style="text-align: center"><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/signup.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
<title>Запись на прогулку с Тони</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Запись на прогулку</h1>
<p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
<p><a href="../index.html#walks">Где мы гуляем</a></p>
<form>
<fieldset>
<legend>О вас</legend>
<p>
<label for="owner">Ваше имя</label>
<input type="text" id="owner" name="owner" autocomplete="name" required>
</p>
<p>
<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
</p>
</fieldset>
<fieldset>
<legend>Ваша собака</legend>
<p>
<label for="breed">Порода</label>
<input type="text" id="breed" name="breed" list="breeds">
<datalist id="breeds">
<option value="Карликовый пинчер"></option>
<option value="Такса"></option>
<option value="Йоркширский терьер"></option>
<option value="Беспородная"></option>
</datalist>
</p>
<p>
<label for="dogs">Сколько собак придёт</label>
<input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
</p>
</fieldset>
<fieldset>
<legend>Когда гулять</legend>
<p>
<label for="date">Дата</label>
<input type="date" id="date" name="date" required>
</p>
<label><input type="radio" name="time" value="morning" checked> Утром</label>
<label><input type="radio" name="time" value="evening"> Вечером</label>
</fieldset>
<fieldset>
<legend>Прогулка</legend>
<p>
<label for="leader">Ведёт прогулку</label>
<input type="text" id="leader" name="leader" value="Тони" readonly>
</p>
<p>
<label for="route">Маршрут</label>
<select id="route" name="route">
<optgroup label="В городе">
<option value="square">Сквер у дома</option>
<option value="pond" selected>Пруд с утками</option>
</optgroup>
<optgroup label="За городом">
<option value="forest">Лес</option>
<option value="river" disabled>Берег реки — закрыт до весны</option>
</optgroup>
</select>
</p>
<p>
<label for="wishes">Пожелания</label><br>
<textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
</p>
</fieldset>
<fieldset>
<legend>Что взять с собой</legend>
<label><input type="checkbox" name="take" value="ball"> Мячик</label>
<label><input type="checkbox" name="take" value="rope"> Канат</label>
</fieldset>
<p>
<button type="submit">Записаться на прогулку</button>
<button type="reset">Очистить форму</button>
</p>
</form>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/toys.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
<title>Игрушки Тони</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Мои игрушки</h1>
<ul>
<li>Канат с мячиком «Удав» — моя любимая игрушка</li>
<li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
<li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
</ul>
<img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
<h2>Как играть со мной в канат</h2>
<ol>
<li>Покажите мне канат.</li>
<li>Бросьте его подальше.</li>
<li>Подождите, пока я принесу его обратно.</li>
<li>Похвалите меня — и всё сначала!</li>
</ol>
<section>
<h2 id="album">Мой фотоальбом</h2>
<ul>
<li>
<figure>
<img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
<figcaption>Я в детстве</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
<figcaption>С плюшевой белкой</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
<figcaption>В худи для холодной погоды</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
<figcaption>Шлейка надета — идём гулять!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
<figcaption>Смеюсь над шуткой хозяина</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
<figcaption>После прогулки</figcaption>
</figure>
</li>
</ul>
</section>
<p><a href="../index.html#commands">Какие команды я знаю</a></p>
<p><a href="../index.html">Вернуться на главную</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/walks.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
<title>Где гуляет Тони</title>
</head>
<body>
<h1>Мой маршрут</h1>
<ol>
<li>Сквер у дома.</li>
<li>Пруд с утками.</li>
<li>Поляна для игры с канатом.</li>
</ol>
</body>
</html>
Продолжите в VS Code
-
Выполните те же шаги в своей папке
my-site: создайтеcss/style.css, как описано в разделе «Создание файла в VS Code», перенесите правила, удалите атрибутыstyleи подключите файл к четырём страницам. - Сохраните все файлы и откройте
index.htmlв браузере, затем перейдите по меню на другие страницы.
Ожидаемый результат: все страницы сайта в браузере оформлены одинаково, а «Просмотр кода страницы» на странице
игрушек открывает по ссылке ../css/style.css ваш файл стилей.
Если папки my-site нет, скачайте сайт кнопкой «Скачать ZIP» в редакторе выше и распакуйте архив, сохранив
структуру папок. Если результат отличается и найти ошибку не получается, нажмите «Показать решение», сравните его со
своим кодом и снова скачайте архив — уже с решением. В следующих уроках мы будем дополнять этот файл стилей.
Дополнительная задача
Оформите страницу о фенеке, сочетая оба способа: стили заголовков запишите во внешнем файле
css/headings.css и подключите его, а остальные стили — во внутренней таблице стилей в
<style>:
- в файле: заголовок
h1цветаdimgrayпо центру, заголовкиh2цветаgray; -
во внутренней таблице: фон абзацев
aliceblue, цвет выделенного текста<b>—orange, у изображения — сплошная оранжевая граница толщиной 3 пикселя.
Ожидаемый результат: заголовки серые, главный — по центру; абзацы на светло-голубом фоне, слово «Фенек» в
начале абзацев оранжевое, фотография в оранжевой рамке. Если удалить <link>, заголовки станут
чёрными, а остальное оформление сохранится.
Выполните дополнительную задачу
Условие задания
css/headings.css
/* Стили заголовков */
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Фенек</title>
</head>
<body>
<h1>Фенек</h1>
<p><b>Фенек</b> (лат. Vulpes zerda) — миниатюрная лисица своеобразной внешности, которая живёт в пустынях Северной Африки.</p>
<h2>Внешний вид</h2>
<p><b>Фенек</b> — самый маленький представитель семейства псовых, по размерам он меньше домашней кошки. Высота в холке 18—22 см, длина тела — 30—40 см, хвоста — до 30 см, весит он до 1,5 кг. Морда короткая, заострённая. Глаза большие. Уши фенека — самые большие среди хищников по отношению к величине головы; они достигают 15 см в длину.</p>
<img src="assets/fenek.png" alt="Фенек с большими ушами">
<h2>Распространение</h2>
<p>Самая многочисленная популяция фенеков обитает в центральной Сахаре, хотя они встречаются от северного Марокко до Синайского и Аравийского полуостровов, а на юге — до Нигера, Чада и Судана.</p>
</body>
</html>