Основные данные по стилям CSS были рассмотрены в предыдущих статьях. Теперь можно перейти к свойствам стилей, которые вы будете применять для достижения своих целей в сайтостроении. Начнем с изучения свойств CSS, которые применяются к тексту для изменения его вида, размеров, цвета, отступов и т.п.
Свойство Font
font - универсальное свойство, в которое можно включать несколько характеристик, указывая их через пробел - такие как стиль, жирность, размер, размер шрифта.
font: italic 12px arial;
Но обычно свойства font расписывают отдельно:
font-family - указывается имя (тип) шрифта. Можно указать через запятую, тогда - если у пользователя нет 1-го шрифта, то применится следующий.
font-family: verdana, times new roman;
font-size - размер шрифта, можно указывать в px, em, процентах или через постоянные значения - xx-small, x-small, small, medium, large, x-large-xx-large.
font-size:1.3em;
font-style - выбор способа вида шрифта - курсив (italic), наклонный (oblique) и обычный (normal)
font-style: italic;
font-variant - определение строчных букв - нормальное (normal) и small-caps (строчные буквы, как уменьшенные заглавные)
font-variant: small-caps;
font-weight - определние жирности шрифта. Можно указывать от 100 до 900 или с помощью слов: bold, bolder, lighter и normal.
font-weight: bold;
Изменения между символами
letter-spacing - отступ между символами. Можно указывать в отрицательном значении в px, in, pt и т.п. Для обычного интервала - normal.
letter-spacing:5px;
line-height - отступ между строками. Можно указывать в px, % или normal. Нельзя указать отрицательное значение.
line-height:50%;
word-spacing - отступ между словами. Указывается в px, in, pt и т.п. или normal.
word-spacing:5pt;
Положение и декор текста
text-align - положение теста по центру (center), по левому (left) или по правому (right) краям:
text-align:center;
vertical-align - положение текста по вертикали, относительно родителя. Устанавливается с помощью слов:
- bottom - по нижнему краю родителя
- middle - по середине
- top - по верхнему краю родителя
- sub - текст показывается по нижнему индексу
- super - текст располагается по верхнему индексу
Также можно указывать в мерах длины и процентах с учетом того, что при положительном значении - смещение вверх, а при отрицательном - вниз.
vertical-align:sub;
text-decoration - добавление декора к тексту с помощью подчеркивания снизу (underline), сверху (overline), перечеркивания (line-through) и мигание (blink). Значение none - отменяет декорирование, даже подчеркивание ссылок.
text-decoration:overline;
text-indent - определение отступа первой строки абзаца. Указывается в любой мере длины.
text-indent:20px;
text-shadow - тень к тексту. Сначала указывается смещение по x, затем по у и радиус размытия тени. В конце можно указать цвет тени.
text-shadow:2px 2px 5px red;
text-transform - управление заглавными и строчными буквами с помощью слов:
- capitalize - у каждого слова 1-й символ заглавный
- lowercase - все символы будут строчными
- uppercase - все символы станут заглавными
- none - по-умолчанию
text-transform:lowercase;
white-space - выбор отображения пробелов с помощью слов:
- normal - значение по-умолчанию
- nowrap - текст располагается в одну строку, перенос только с <br>
- pre - учитываются все пробелы и переносы
- pre-line - разрешаются переносы строк
- pre-wrap - перенос строки, если не вмещается по ширине
Для знакомства с основными тегами для текста читайте статью из раздела верстки HTML.
