Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 HTMLзадаётструктуру.CSSзадаётоформление.

2 CSS - это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.

3 CSS расшифровывается как Cascading Style Sheets. Сейчас мы разберёмся, как задавать стили и причём тут слово "каскад".

4 Допустим, у нас есть такой HTML:

5 Это всё - один абзац, но я добавил переводы строк, чтобы текст просто удобнее было читать на этой странице. В HTML перевод строки не транслируется в реальный перевод строки в итоговой странице. Вместо этого он превратится в один пробел. Несколько переводов строки также превратятся в лишь один пробел. Ну, и несколько пробелов тоже превратятся в один пробел.

6 Все варианты ниже приведут к одному результату:

7 Для реального перевода строки можно использовать одиночный тег .

8 Мы отвлеклись. Итак, мы хотим добавить к нашему HTML-коду стиль. С помощью CSS-кода ниже мы сделаем так, что у всех элементов p текст внутри будет красным, а размер шрифта будет 20 пикселей:

9 Вот живой пример:

10 <a>https://codepen.io/hexlet/pen/yzGrvX</a>

11 <ol><li>Первая часть - этоселектор(selector). Им мы выбираем то, к чему применять стиль.</li>

12 <li>Набор стилей указан после селектора в фигурных ({, }) скобках.</li>

13 <li>Набор состоит из парсвойство: значение(property: value).</li>

14 </ol><h3>Классы и идентификаторы</h3>

15 Но что если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).

16 Мы указали класс у двух абзацев. Теперь нам нужно обновить CSS, потому что сейчас он не учитывает класс и применяет стили ко всем абзацам. Укажем класс:

17 Селектор p.red означает "все элементы типа p с классом red".

18 То есть если мы добавим класс red к элементу другого типа, например, <a class="red" href="https://goo.gl">Goo</a>, то такой элемент не станет красным: стиль работает строго для p.

19 Можно освободить стиль от такого ограничения:

20 Селектор .red означает "все элементы любого типа с классом red".

21 Допустим, визуальный стиль нашей страницы изменился, и важные куски текста теперь выделяются не красным цветом с увеличенным шрифтом, а зелёным цветом и курсивом.

22 Отлично, но название класса теперь не имеет особого смысла. Это больше неredна самом деле. Придётся поменять его на green и изменить класс в HTML у всех соответствующих элементов.

23 Но идея лучше - изначально использовать в названиях классовсемантический смысл, а неособенность реализации. Например, если таким образом мы выделяли более важные части текста, то стоило назвать класс important:

24 Теперь при изменении цветов или любых других деталей этого стиля нам не нужно волноваться о названии: смысл не поменяется, поменяется лишь конкретная реализация.

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

26 Другой пример - логотип сайта где-нибудь наверху.

27 Для уникальных "разовых" элементов стоит использовать идентификатор:

28 А так можно указать стиль:

29 Структура и идея такие же, как с классами, но вместо точки . используется решётка #. В этом стиле мы задали шрифт с засечками Georgia и синий цвет в HEX-формате. Введите в гугле "color picker", чтобы поработать с интерактивной палитрой, где можно сгенерировать коды для разных цветов.

30 Последний пример немного избыточен, потому что по правилам (спецификации HTML) элемент с идентификатором должен быть уникальным на странице. То есть нет необходимости выбирать именно h1, достаточно сделать так:

31 Но следить за тем, чтобы идентификаторы были уникальными и не повторялись - ваша задача. Браузер никак не "пожалуется" на нарушение этого правила.