Например :
<span class="red-text">...</span>
Верстка текста, работа со шрифтами
Для задания размера шрифта, его стиля, жирности, вида используются следующие CSS свойства:
font-size. Размер шрифта, принимает значения в абсолютных и относительных единицах. К абсолютным относятся пиксели (font-size : 14px;) и пункты (font-size : 15pt;). К относительным проценты (font-size : 70%;) и em. EM обычно примерно равен длине буквы М в шрифте данного вида.
font-weight. Жирность шрифта, его начертание. Принимает как целочисленные значения (100,200,300..900), отражающие степень жирности, так и два стандартных normal и bold. Как правило, большая часть браузеров не различает степени жирности, отражает только два последних варианта начертания.
font-style. Свойство необходимое для задания нормального начертания (normal) или курсива (italic).
font-family. Используется для задания семейства шрифта или задания названия конкретно используемого шрифта, который объявлен в начеле или является стандартным. serif — без засечек, sans-serif — с засечками. В примере указаны сначала название шрифта, потом его альтернативные варианты через запятую. Если первый шрифт не будет найден, применятся следующие за ним:
body { font-family: "PT Sans", "Arial", serif; }Верстка текста, цвет, высота строки, подчеркивание
Про стилистику шрифтов немного разобрались, теперь перейдем к не менее важным свойствам текста. Нас интересует css-свойства, отвещающие за цвет, оформление, пробелы, высота строки.
color. Цвет текста, задается с помощью RGB-формата (color : rgb(255, 0, 0);), шестнадцатеричного кода, который можно посмотреть в фотошопе для любого цвета (color : #000;) и с помощью ключевых слов (color : red; color : blue;). Чаще всего используют шестандцатириный код.
text-decoration. Стандартное свойство при работе со ссылками, все ссылки по-умоланию подчеркнуты. Чтобы отменить подчеркивание или задать свой вариант в качестве значений свойства принимаются. text-decoration : none; (отменяем все изменения), text-decoration : underline; (нижнее подчеркивание), text-decoration : overline; (верхнее подчеркивание), text-decoration : line-through; (зачеркнутый текст)
text-transform. Работа с регистром в строке. иногда необходимо стилистически изменить регистр текст. Часто это необходимо делать при работе с меню или нестандартным текстом. text-transform : lowercase; (делает все символы строными), text-transform : uppercase; (делает все символы прописными), text-transform : capitalize; (начинает каждое слово с прописной), text-transform : none; (отменяет все значения)
white-space. Управление пробелами в тексте, принимает следующие значения. nowrap — текст без переносов; pre — как в исходном коде; pre-wrap — как pre, только появляются переносы, если никак не умещается в блок текст; normal — стандартное отображение.
text-align. Выравнивание текста внутри родительского контейнера. left — по левому краю; right — по правому краю; center — по центру; justify — по ширине.
line-height. Используется для регулирование межстрочных интервалов и, очевидно, высоты строки. Значения задаются в пикселях (line-height : 22px;), процентах (line-heigh t: 100%;), множителях, ключевых словах (line-height : normal;).
Написать комментарий