Привет, друзья!
Сегодня мы продолжим знакомство с технологией CSS, и узнаем несколько параметров, которые пригодятся для оформления текста.

Для интереса — сегодня мы используем линейную методику подключения CSS (если вы забыли, что это — прошу обратить внимание на ссылку)

Как видно из кода ниже — конструкция <h1> style=»color:#000000″>Заголовок 1-го уровня</h1> делает текст заголовка h1 красным, а конструкция <p style=»color:#d2de26″>Параграф</p> — обеспечивает написание текста в параграфе болотным цветом (тут нужно отметить, что для обозначения цветов используется HEX-режим.

See the Pen zZrzZx by Lavrynenko (@Lavrynenko) on CodePen.

Пока — все просто…. нужен цвет текста? Используем color: , но … что делать, если нам нужен цвет параграфа? Для этого нужно использовать background-color, который в рабочей конструкции выглядит вот так:

<p style=»background-color:#0042ff» align=»center»>Параграф с голубым фоном</p>.

Более наглядно вы можете увидеть этот код ниже:

See the Pen zZrzPv by Lavrynenko (@Lavrynenko) on CodePen.

Нужно отметить, что в данном случае параграф рассматривается системой как блок, а значит — цвет его фона будет применяться по всей ширине страницы. В то же время никто не мешает нам использовать CSS-стили, и задать размер параграфа. Этот шаг реализуется атрибутом width с указанием ширины параграфа: width:200px.

Теперь самое время узнать, как контролировать размер текстовой строки. Для этого используется параметр font-size с указанием нужного параметра. Например, конструкция типа p {font-size:15px} дает возможность получения текста размером в 15 пикселей во всех параграфах, а конструкция p.pix20 {font-size:20px} обеспечивает размер шрифта в 20 пикселей во всех параграфах с атрибутом pix20. Пример работы кода — ниже:

See the Pen yMeXQB by Lavrynenko (@Lavrynenko) on CodePen.

Что же … едем дальше … сейчас узнаем, как поместить любой элемент в… например, в центре страницы. Для этого используем команду: text-align:center — т.е. размещение текста — в центре. Конечно же — никто не мешает использовать атрибут left или right 🙂 Пример работы кода — ниже:

See the Pen evJENz by Lavrynenko (@Lavrynenko) on CodePen.

И в самом конце мы узнаем — как правильно ставить отступы от начала строки. Для этого нам нужна команда text-indent, в которой пиксели указывают размер необходимого отступа. Рабочая конструкция выглядит так: text-indent:75px, а сам пример рабочего кода — как всегда, чуть ниже:

See the Pen mWVMPz by Lavrynenko (@Lavrynenko) on CodePen.

В принципе — пока все. Спасибо и не забывайте делать репост на свои страницы в соц.сети 🙂