6. Стиль текста

Краткие теоретические сведения

Каскадные таблицы стилей (CSS — Cascading Styles Sheet) используется для задания внешнего вида элементов HTML или других текстовых форматов. Наиболее удобный способ записи стилей заключается в использовании отдельного файла с расширением «css», но можно их включать непосредственно в HTML код.

Описание стиля выглядит примерно следующий образом:

h1{
    color: blue;
}

В этой записи h1 описывает HTML тег, для которого задается стиль, а в фигурных скобках приводится описание самого стиля.

Описание стиля состоит из нескольких записей, которые заканчиваются точкой с запятой. Одна запись описывает некоторое свойства стиля, в пример выше свойство задает цвет текста.

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

При формировании внешнего вида текста значения свойств определяются каскадно или иерархически. Полный набор значений свойств, которые применяются по умолчанию, заложен в браузере (нижний уровень иерархии). Если в html документе есть стилевой файл, то значения, указанные в нем, перезаписывают значения по умолчанию (более высокий уровень иерархии). Еще выше в иерархии стоят значения, указанные непосредственно в html тегах.

Задание к работе

Создайте в папке с markdown файлом из второй лабораторной работы файл «style.css». Наберите в нем:
```
h1{
    color: blue;
}
```
Преобразуйте markdown файл в html. Добавьте в заголовок html файла строчку:
```
<link rel="stylesheet" href="style.css">
```
Откройте полученный html файл в браузере. В нем заголовки первого уровня должны выводиться синим цветом. Измените файл «style.css» следующим образом:
```
h1{
    color: blue;
    font-weight: normal;
}
```
Обновите страницу в браузере (повторно преобразовывать в HTML в данном случае не нужно), посмотрите, как изменился шрифт заголовков первого уровня.
В справочнике по CSS найдите нужную информацию и настройте для элементов h1 и p размер шрифта равный 14pt, h1 сделайте выровненным по центу, p выровненным по ширине с абзацным отступом 15мм (подсказка: шрифт, размер, выравнивание и отступ переводятся на английский как font, size, align и indent соответственно).
Прочитайте про границы (свойство «border») и настройте отображение рисунков в розовой или голубой двойной рамке шириной 10 px.
Прочитайте про псевдоэлемент CSS «:before» и настройте в качестве маркера маркированного списка длинное тире.