<commit_before># 2. Таблицы стилей. Списки

## Темы занятия

- Элемент [`<style>`](https://webref.ru/html/style).
- Универсальные атрибуты [`id`](https://webref.ru/html/attr/id) и
[`class`](https://webref.ru/html/attr/class).
- Универсальный селектор, cелекторы типа, идентификатора и класса.
- Свойства CSS для стилизации текста.
- Элементы для создания списков и свойства CSS для стилизации списков.

## Теоретические сведения

### HTML

- Таблицы стилей для всего документа [`<style>`](https://webref.ru/html/style).
- Идентификатор элемента - универсальный атрибут
[`id`](https://webref.ru/html/attr/id).
- Класс элемента - универсальный атрибут
[`class`](https://webref.ru/html/attr/class).

- Элементы списков:

  - Маркированный список [`<ul>`](https://webref.ru/html/ul).
  - Нумерованный список [`<ol>`](https://webref.ru/html/ol) и его атрибуты 
  [`reversed`](https://webref.ru/html/ol/reversed) и
  [`start`](https://webref.ru/html/ol/start).
  - Пункт списка [`<li>`](https://webref.ru/html/li).

### CSS

- Селекторы:

  - [Селектор типа](https://webref.ru/css/selector/tag).
  - [Универсальный селектор](https://webref.ru/css/selector/universal).
  - [Селектор идентификатора](https://webref.ru/css/selector/id).
  - [Селектор класса](https://webref.ru/css/selector/class).
  - [Группирование селекторов](http://htmlbook.ru/samcss/gruppirovanie). 

- Характеристики шрифта:

  - Начертание шрифта [`font-style`](https://webref.ru/css/font-style).
  - Способ отображения строчных букв
  [`font-variant`](https://webref.ru/css/font-variant).
  - Насыщенность шрифта [`font-weight`](https://webref.ru/css/font-weight).
  - Размер шрифта [`font-size`](https://webref.ru/css/font-size).
  - Минимальная высота строки текста
  [`line-height`](https://webref.ru/css/line-height).
  - Семейство шрифта [`font-family`](https://webref.ru/css/font-family).
  - Универсальное свойство для установки различных характеристик шрифта и 
  текста [`font`](https://webref.ru/css/font).

- Отображения текста:

  - Горизонтальное выравнивание текста
  [`text-align`](https://webref.ru/css/text-align).
  - Величина отступа первой строки блока текста
  [`text-indent`](https://webref.ru/css/text-indent).
  - Интервал между словами
  [`word-spacing`](https://webref.ru/css/word-spacing).
  - Интервал между символами
  [`letter-spacing`](https://webref.ru/css/letter-spacing).
  - Преобразование регистра символов текста
  [`text-transform`](https://webref.ru/css/text-transform).

- Оформление текста:

  - Тень текста [`text-shadow`](https://webref.ru/css/text-shadow).
  - Добавление декоративной линии к тексту
  [`text-decoration-line`](https://webref.ru/css/text-decoration-line).
  - Стиль декоративной линии 
  [`text-decoration-style`](https://webref.ru/css/text-decoration-style).
  - Цвет декоративной линии
  [`text-decoration-color`](https://webref.ru/css/text-decoration-color).
  - Универсальное свойство для добавления декоративной линии
  [`text-decoration`](https://webref.ru/css/text-decoration).

- Оформление списков:

  - Вид маркеров элементов списка
  [`list-style-type`](https://webref.ru/css/list-style-type).
  - Положение маркеров элементов списка относительно текста
  [`list-style-position`](https://webref.ru/css/list-style-position).
  - Изображение вместо стандартных маркеров элементов списка
  [`list-style-image`](https://webref.ru/css/list-style-image).
  - Универсальное свойство для оформления списков
  [`list-style`](https://webref.ru/css/list-style).

Cтруктура правила CSS:

![Cтруктура правила CSS](./assets/css_ruleset.svg)

## 2.1. Селекторы

Доработайте веб-страницу, созданную в задании
[`1.3. Стилизация текста`](/practice/01/#_1-3-стиnизация-текста), выполнив 
 следующие задачи:

1. Добавьте класс `direct-speech` у всех элементов, содержимым которых 
является прямая речь.
2. Замените стилизацию, установленную ранее с помощью универсального 
атрибута [`style`](https://webref.ru/html/attr/style), создав новое правило 
CSS, которое будет устанавливать цвет и/или фон текста у всех элементов 
класса `direct-speech`, а также менять начертание шрифта на курсивное.

## 2.2. Стилизация текста

Доработайте веб-страницу, созданную в предыдущем задании, выполнив следующие<commit_msg>Стилистические правки занятия №2.<commit_after># 2. Таблицы стилей. Списки

## Темы занятия

- Элемент [`<style>`](https://webref.ru/html/style).
- Универсальные атрибуты [`id`](https://webref.ru/html/attr/id) и
[`class`](https://webref.ru/html/attr/class).
- Универсальный селектор, cелекторы типа, идентификатора и класса.
- Свойства CSS для стилизации текста.
- Элементы для создания списков и свойства CSS для стилизации списков.

## Теоретические сведения

### HTML

- Таблицы стилей для всего документа [`<style>`](https://webref.ru/html/style).
- Идентификатор элемента - универсальный атрибут
[`id`](https://webref.ru/html/attr/id).
- Класс элемента - универсальный атрибут
[`class`](https://webref.ru/html/attr/class).

- Элементы списков:

  - Маркированный список [`<ul>`](https://webref.ru/html/ul).
  - Нумерованный список [`<ol>`](https://webref.ru/html/ol) и его атрибуты 
  [`reversed`](https://webref.ru/html/ol/reversed) и
  [`start`](https://webref.ru/html/ol/start).
  - Пункт списка [`<li>`](https://webref.ru/html/li).

### CSS

- Селекторы:

  - [Селектор типа](https://webref.ru/css/selector/tag).
  - [Универсальный селектор](https://webref.ru/css/selector/universal).
  - [Селектор идентификатора](https://webref.ru/css/selector/id).
  - [Селектор класса](https://webref.ru/css/selector/class).
  - [Группирование селекторов](http://htmlbook.ru/samcss/gruppirovanie). 

- Характеристики шрифта:

  - [`font-style`](https://webref.ru/css/font-style) - начертание шрифта.
  - [`font-variant`](https://webref.ru/css/font-variant) - способ отображения
  строчных букв.
  - [`font-weight`](https://webref.ru/css/font-weight) - насыщенность шрифта.
  - [`font-size`](https://webref.ru/css/font-size) - размер шрифта.
  - [`line-height`](https://webref.ru/css/line-height) - минимальная высота 
  строки текста.
  - [`font-family`](https://webref.ru/css/font-family) - семейство шрифта.
  - [`font`](https://webref.ru/css/font) - _универсальное свойство_ для 
  установки различных характеристик шрифта и текста.

- Отображения текста:

  - [`text-align`](https://webref.ru/css/text-align) - горизонтальное 
  выравнивание текста.
  - [`text-indent`](https://webref.ru/css/text-indent) - величина отступа 
  первой строки блока текста.
  - [`word-spacing`](https://webref.ru/css/word-spacing) - интервал между 
  словами.
  - [`letter-spacing`](https://webref.ru/css/letter-spacing) - интервал между
  символами.
  - [`text-transform`](https://webref.ru/css/text-transform) - преобразование
  регистра символов текста.

- Оформление текста:

  - [`text-shadow`](https://webref.ru/css/text-shadow) - тень текста.
  - [`text-decoration-line`](https://webref.ru/css/text-decoration-line) - 
  добавление декоративной линии к тексту.
  - [`text-decoration-style`](https://webref.ru/css/text-decoration-style) -
  стиль декоративной линии.
  - [`text-decoration-color`](https://webref.ru/css/text-decoration-color) -
  цвет декоративной линии.
  - [`text-decoration`](https://webref.ru/css/text-decoration) - 
  _универсальное свойство_ для добавления декоративной линии.

- Оформление списков:

  - [`list-style-type`](https://webref.ru/css/list-style-type) - вид маркеров
  элементов списка.
  - [`list-style-position`](https://webref.ru/css/list-style-position) -
  положение маркеров элементов списка относительно текста.
  - [`list-style-image`](https://webref.ru/css/list-style-image) - 
  изображение вместо стандартных маркеров элементов списка.
  - [`list-style`](https://webref.ru/css/list-style) - _универсальное 
  свойство_ для оформления списков

Cтруктура правила CSS:

![Cтруктура правила CSS](./assets/css_ruleset.svg)

## 2.1. Селекторы

Доработайте веб-страницу, созданную в задании
[`1.3. Стилизация текста`](/practice/01/#_1-3-стиnизация-текста), выполнив 
 следующие задачи:

1. Добавьте класс `direct-speech` у всех элементов, содержимым которых 
является прямая речь.
2. Замените стилизацию, установленную ранее с помощью универсального 
атрибута [`style`](https://webref.ru/html/attr/style), создав новое правило 
CSS, которое будет устанавливать цвет и/или фон текста у всех элементов 
класса `direct-speech`, а также менять начертание шрифта на курсивное.

## 2.2. Стилизация текста

Доработайте веб-страницу, созданную в предыдущем задании, выполнив следующие
{'fraction_non_alphanumeric': 0.1622889305816135, 'fraction_numerical': 0.0031660412757973733, 'mean_word_length': 4.079809410363311, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 74, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2981073', 'n_tokens_mistral': 3584, 'n_tokens_neox': 3953, 'n_words': 546}