HTML задаёт структуру. CSS задаёт оформление.
CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.
CSS расшифровывается как Cascading Style Sheets. Сейчас мы разберёмся, как задавать стили и причём тут слово «каскад».
Допустим, у нас есть такой HTML:
<p>На территории, где ныне расположен Нью-Йорк, задолго
до появления здесь европейцев жили индейские племена
Манахаттоу и Канарси.</p>
Это всё — один абзац, но я добавил переводы строк, чтобы текст просто удобнее было читать на этой странице. В HTML перевод строки не транслируется в реальный перевод строки в итоговой странице. Вместо этого он превратится в один пробел. Несколько переводов строки также превратятся в лишь один пробел. Ну, и несколько пробелов тоже превратятся в один пробел.
Все варианты ниже приведут к одному результату:
<p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p>
<p>На территории, где ныне расположен Нью-Йорк, задолго
до появления здесь европейцев жили индейские племена
Манахаттоу и Канарси.</p>
<p>На территории, где ныне расположен Нью-Йорк, задолго
до появления здесь европейцев жили индейские племена
Манахаттоу и Канарси.</p>
<p>На территории, где ныне расположен Нью-Йорк, задолго
до появления здесь европейцев жили индейские племена
Манахаттоу и Канарси.</p>
Для реального перевода строки можно использовать одиночный тег <br>.
Мы отвлеклись. Итак, мы хотим добавить к нашему HTML-коду стиль. С помощью CSS-кода ниже мы сделаем так, что у всех элементов p текст внутри будет красным, а размер шрифта будет 20 пикселей:
p {
color: red;
font-size: 20px;
}
Вот живой пример:
See the Pen Basic CSS by Hexlet (@hexlet) on CodePen.
- Первая часть — это селектор (selector). Им мы выбираем то, к чему применять стиль.
- Набор стилей указан после селектора в фигурных (
{,}) скобках. - Набор состоит из пар свойство: значение (property: value).
Классы и идентификаторы
Но что если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).
<p class="red">На территории, где ныне расположен Нью-Йорк,
задолго до появления здесь европейцев жили индейские
племена Манахаттоу и Канарси.</p>
<p>Это подтверждают находки наконечников стрел и
других артефактов в районах города, не застроенных
зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк.
</p>
<p class="red">Европейские поселения появились здесь в 1624 году.</p>
Мы указали класс у двух абзацев. Теперь нам нужно обновить CSS, потому что сейчас он не учитывает класс и применяет стили ко всем абзацам. Укажем класс:
p.red {
color: red;
font-size: 20px;
}
Селектор p.red означает «все элементы типа p с классом red».
То есть если мы добавим класс red к элементу другого типа, например, <a class="red" href="https://goo.gl">Goo</a>, то такой элемент не станет красным: стиль работает строго для p.
Можно освободить стиль от такого ограничения:
.red {
color: red;
font-size: 20px;
}
Селектор .red означает «все элементы любого типа с классом red».
Допустим, визуальный стиль нашей страницы изменился, и важные куски текста теперь выделяются не красным цветом с увеличенным шрифтом, а зелёным цветом и курсивом.
.red {
color: green;
font-style: italic;
}
Отлично, но название класса теперь не имеет особого смысла. Это больше не red на самом деле. Придётся поменять его на green и изменить класс в HTML у всех соответствующих элементов.
Но идея лучше — изначально использовать в названиях классов семантический смысл, а не особенность реализации. Например, если таким образом мы выделяли более важные части текста, то стоило назвать класс important:
.important {
color: green;
font-style: italic;
}
Теперь при изменении цветов или любых других деталей этого стиля нам не нужно волноваться о названии: смысл не поменяется, поменяется лишь конкретная реализация.
Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи.
Другой пример — логотип сайта где-нибудь наверху.
Для уникальных «разовых» элементов стоит использовать идентификатор:
<h1 id="article-title">История города Нью-Йорк</h1>
<p class="red">На территории, где ныне расположен Нью-Йорк,
задолго до появления здесь европейцев жили индейские
племена Манахаттоу и Канарси.</p>
<p>Это подтверждают находки наконечников стрел и
других артефактов в районах города, не застроенных
зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк.
</p>
А так можно указать стиль:
h1#article-title {
font-family: Georgia, serif;
color: #1050ff;
}
Структура и идея такие же, как с классами, но вместо точки . используется решётка #. В этом стиле мы задали шрифт с засечками Georgia и синий цвет в HEX-формате. Введите в гугле "color picker", чтобы поработать с интерактивной палитрой, где можно сгенерировать коды для разных цветов.
Последний пример немного избыточен, потому что по правилам (спецификации HTML) элемент с идентификатором должен быть уникальным на странице. То есть нет необходимости выбирать именно h1, достаточно сделать так:
#article-title {
font-family: Georgia, serif;
color: #1050ff;
}
Но следить за тем, чтобы идентификаторы были уникальными и не повторялись — ваша задача. Браузер никак не "пожалуется" на нарушение этого правила.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
