Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Основы CSS

В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то своё визуальное оформление: параграфы имеют отступы, ссылки выделяются подчёркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML элементы будут выведены пользователю в браузере.

CSS и HTML на странице

В этом уроке мы разберём ту часть, которая про таблицы стилей. Что такое каскадность и как это работает вы сможете прочитать в следующем уроке.

Стили CSS

Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название стиля: значение;.

Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу (или элементам) нужно добавить наши стили. Для примера возьмём следующую HTML разметку:

<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS записью:

p {
  color: red;
  font-size: 20px;
}

Что означает эта таинственная запись выше? Её можно условно разбить на три основные составляющие:

  1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы мы поговорим чуть позже.
  2. Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
  3. Свойства. Они записываются по схеме, которая представлена выше. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Схема селектора CSS

Разберём некоторые свойства, которые помогут вам оформлять текст:

  • font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие ещё стили указаны у текста.
  • color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно здесь.
  • text-align. Свойство, устанавливающее положение текста. Может принимать одно из следующих значений: left, right, center, justify.

Подключение CSS

Использовать CSS на своей странице можно с помощью нескольких способов:

  • использование специального файла;
  • использование тега <style> внутри HTML разметки;
  • записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберёмся с каждым способом отдельно.

Использование отдельного CSS файла.

Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML файле не очень удобно. Связано это с тем, что HTML файл становится очень большим и ориентироваться в нём становится невозможно. Чтобы этого избежать можно создать отдельный CSS файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

Добавим основную информацию в файл index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>

</body>
</html>

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег link. У данного тега необходимо указать атрибут href значением которого будет путь до файла main.css. Тег link указывается в секции head.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>

</body>
</html>

Дополнительно разберём эту запись: ../css/main.css. Её можно условно разбить на три составляющие:

  1. ../ — переход в директорию выше. Изначально файл index.html находится в директории HTML, поэтому мы «выходим» из неё в директорию site.
  2. css/ — переход в директорию CSS.
  3. main.css — указание имени и расширение файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".

После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

Использование тега style

Вторым способом использования CSS является использование стилей в специальном теге style. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег style обычно указывается внутри секции head. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>

    <style>
        p {
          color: red;
          font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили ещё до того, как загрузится CSS файл. Какие стили рекомендовано так выносить вы сможете узнать в процессе становления вас как профессионала.

Inline стили

Последним вариантом использования CSS являются инлайн стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придётся для каждого указывать отдельно. Это приведёт к постоянному копированию стилей.

Возьмём прошлый пример и добавим inline стили:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>
    <p style="color: red; font-size: 20px">Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведении мыши, разным атрибутам, выбирать только чётный или нечётные элементы и так далее.

Разбор каждого селектора — это задел для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

  1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
  2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и используя конструкцию .название-класса добавить стили.
  3. Селектор по идентификатору. Ещё один случай выборки по дополнительному атрибуту тега. Главная разница лежит в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора

Посмотрим все три селектора на реальном примере:

Файл index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <main class="content">
        <h1 id="main-title">Заголовок с идентификатором</h1>
        <p>Просто параграф без класса или идентификатора</p>
    </main>
</body>
</html>

Файл main.css

#main-title {
  color: white;
  font-size: 20px;
  text-align: center;
}

.content {
  background-color: black;
}

p {
  color: white;
}

После применения этих стилей получится следующая картина:

  • Чёрный фон секции main. Для этого использовали класс content и селектор .content;
  • Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. Заголовок имеет идентификатор main-title и для добавления стилей использовался селектор по идентификатору #main-title;
  • Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

В реальной разработке не всегда удаётся пользоваться только этими тремя видами селекторов в том виде, в которых вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберём на примере.

<section class="news">
    <h2>Новости</h2>

    <article>
        <h2>Новость 1</h2>
        <p>Текст новости</p>
    </article>

    <article>
        <h2>Новость 2</h2>
        <p>Текст новости</p>
    </article>
</section>

<section class="stories">
    <h2>Интересные истории</h2>

    <article>
        <h2>История 1</h2>
        <p>Текст истории</p>
    </article>

    <article>
        <h2>История 2</h2>
        <p>Текст истории</p>
    </article>
</section>

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h2 {
  font-size: 32px;
}

Разберём, что за селектор был указан. Здесь мы указали комбинацию трёх селекторов: .news, article и h2. Каждый из них по отдельности вы уже знаете. Разделив их пробелом мы сказали браузеру: «Возьми все заголовки h2 из article, который лежит внутри элемента с классом news и примени к нему стили». Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов.

Важно понимать, что такая запись .news article h2 выберет все заголовки второго уровня во всех article, которые лежат внутри блока с классом .news. Давайте немного видоизменим вёрстку, что бы это проверить.

<section class="news">
    <h2>Новости</h2>

    <article>
        <h2>Новость 1</h2>
        <p>Текст новости</p>
    </article>

    <article>
        <h2>Новость 2</h2>
        <p>Текст новости</p>
        <section>
            <h2>Похожие новости</h2>

            <article>
                <h2>Похожая новость 1</h2>
                <p>Текст новости</p>
            </article>
        </section>
    </article>

</section>

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости» и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри article, которые находятся в блоке с классом .news.

Такой тип селекторов называется контекстным или селектор потомков. С помощью него мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

селектор потомков

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придёт дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учёта всех остальных вложенностей. Чтобы указать такой селектор используется символ >. Укажем, что нам нужны только те article, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих article. Это делается следующим образом:

.news > article > h2 {
  font-size: 24px;
}

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

Дочерний селектор

Дополнительное задание

  • Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке попробуйте оформить текст.

  • Попробуйте скопировать примеры из этого урока.


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».