Форматирование текста в CSS: полужирное начертание, курсив, прописные и строчные буквы и т.д.

Эту статью можно считать прямым продолжением предыдущей.

Допустим у Вас есть какой-то кусочек текста, к которому нужно применить полужирное начертание. Порядок действий будет следующим:

Открываем файл indec.css → создаем правило для элемента <p> где прописывается соответствующее свойство и значение (подчеркнуто красным) → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

Курсивное начертание создается точно также:

Открываем файл indec.css → прописываем свойство и значение для элемента <p> → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

Обратите внимание на то, что предыдущее свойство font-weight осталось на месте, но текст при этом отобразился корректно. Это означает что вы можете сочетать разные начертания в одном и том же тексте.

Сделаем все буквы прописными:

Открываем файл indec.css → прописываем свойство и значение для элемента <p> → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

Стоит отметить что свойство text-transform может принимать сразу несколько значений:

• uppercase (прописные буквы);
• lowercase (строчные буквы);
• capitalize (каждое слово начинается с прописной буквы).

С подчеркиванием и перечеркиванием также все довольно просто:

Открываем файл indec.css → прописываем свойство и значение для элемента <p> → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

Свойство text-decoration также может принимать сразу несколько значений:

• none (сброс любого примененного к тексту оформления);
• underline (линия под текстом);
• overline (линия над текстом);
• line-through (линия проходящая через слова);
• blink (данное значение заставляет текст мигать).

На удобочитаемость текста влияет межбуквенный интервал и интервал между словами:

Открываем файл indec.css → прописываем свойство и значение для элемента <p> → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

Этот прием особенно полезен когда Вы имеете дело с заголовками.

В Microsoft Word выравнивание текста задается с помощью кликов по соответствующим кнопкам. Практически тоже самое можно сделать в CSS с помощью свойства text-align.

Открываем файл indec.css → прописываем свойство и значение для элемента <p> → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

В данном случае применено выравнивание по правому краю (right), однако возможны и другие варианты:

• left (по левому краю);
• center (по центру);
• justify (по ширине).

Во многих интернет-текстах можно встретить отступ:

Открываем файл indec.css → прописываем свойство и значение для элемента <p> → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

Размер отступа как видно из примера указывается в пикселах.

Попытаемся задать различные значения первой букве строки и самой строке:

Открываем файл indec.css → прописываем свойство и значение для элемента <p> → сохраняем → обновляем html-страницу.

То что вводим в файле indec.css

То что получаем на html-странице

Обратите внимание на пунктуацию, а именно на двоеточия в псевдоэлементах :first-letter и :first-line. Их нельзя игнорировать или заменять на другие, противном случае отображение текста будет некорректным.

А в заключение небольшой совет: никогда не перебарщивайте с форматированием текста. На первом месте всегда должна стоять его удобочитаемость, а не пестрость.

Спасибо за внимание!

Надеюсь все получилось и теперь Вы сможете сделать свой текст гораздо более оригинальным.

Предлагаю подписаться на канал и прокачать свои навыки веб-разработчика.

Если появились вопросы пишите. Отвечу на все и всем)