Каскадные таблицы стилей (CSS) — Свойства текста, полей, отступов, границ и шрифтов

В предыдущей статье категории HTML, PHP, CSS и MySQL я перечислил основные свойства каскадных таблиц стилей. Поскольку это была шпаргалка по CSS, то в ней приводились лишь свойства и их описания без возможных значений. В этой же статье я хочу более подробно описать такие свойства CSS как свойства текста, полей, отступов, границ и шрифтов. Также будут рассматриваться наиболее часто используемые значения для каждого из свойств, что поможет очень быстро овладеть навыками работы с CSS.

Свойства текста

Итак, первым делом давайте разберемся с терминами. Свойствами я буду называть все то, что находится слева от двоеточия. Все, что находится справа от него, будет значением. Например, font-size: 12px; Здесь font-size — это свойство, а 12px — это значение. Теперь переходим к изучению свойств текста.

text-align – применяется для выравнивания текста по горизонтали. Может принимать значения left, right и center. Как вы уже поняли, каждое значение отвечает за выравнивание по левому краю, по правому краю и по центру соответственно.

text-indent – задает отступ первой строки в текстовом блоке. Значение можно задавать в пикселях. Например:

text-indent: 15px;

text-decoration — добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом или мигания. Может принимать следующие значения:

• blink – мигающий текст.
• line-through – перечеркнутый текст.
• overline – создает линию над текстом.
• underline  — подчеркивание.
• none – отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
• inherit – наследует значение родителя.

line-height – данное свойство определяет высоту строки. Чаше всего значение определяется в пикселях. Также может принимать значения:

• normal — расстояние между строк вычисляется автоматически.
• Inherit — наследует значение родителя.

letter-spacing – отвечает за расстояние между буквами в тексте. Значение можно задавать в пикселях.

color  — задает цвет текста элемента. Чаще всего значение цвета задается в 16-ричной системе счисления. На практике это выглядит таким образом:

color: #c9e9f6;

Свойства полей и отступов

Для начала давайте разберемся, что такое поле, а что такое отступ. Для наглядности возьмем слово «CSS» и создадим для него рамку и добавим поля и отступы.

CSS

Полями будет расстояние внутри рамки от ее внутренней границы до воображаемого прямоугольника ограничивающего текст или другой элемент внутри рамки. Отступами же будет расстояние от внешней границы до какого-то элемента за пределами рамки. Надеюсь, вы поняли в чем разница и теперь мы переходим к подробному рассмотрению значений для каждого из свойств.

padding – задает все свойства полей в одной строке. Значения полей задаются в пикселях. Для того, чтобы задать разные поля для разных сторон применяют следующие свойства CSS:

• padding-top — верхнее поле.
• padding-right — правое поле.
• padding-left — левое поле.
• padding-bottom — нижнее поле.
• padding — одинаковое значение полей для всех сторон.

Отступы задаются аналогично полям и принимают такие же значения. Для создания отступов в CSS применяются следующие свойства:

• margin-top — верхний отступ.
• margin-right — правый отступ.
• margin-bottom — нижний отступ.
• margin-left — левый отступ.
• margin — одинаковое значение отступов для всех сторон одновременно.

Свойства границ

По-другому границы в CSS можно назвать еще рамками. Рамки в CSS задаются при помощи свойства border, которое также имеет множество свойств, от которых зависит внешний вид созданной нами рамки.

• border-width – задает ширину (толщину) рамки сразу для всех четырех сторон. Для того чтобы задать ширину отдельно для каждой стороны применяются свойства border-top-width, border-bottom-width, border-left-width и border-right-width для верхней, нижней, левой и правой границы соответственно. Значения устанавливаются в пикселях.
• border-style – позволяет устанавливать стиль границы вокруг элемента. Так как и с шириной рамки, стиль можно задавать отдельно для каждой стороны. Процедура аналогичная только вместо width ставите style (border-top-style, border-bottom-style, border-left-style и border-right-style для каждой стороны соответственно).
• border-color – задает цвет рамки. Установка цвета для разных сторон аналогична созданию стилей и толщины границ.
• border — объединяет в себе все свойства, которые используются для определения границы (рамки) элемента.

Свойства шрифтов

font-size – отвечает за размер шрифта. Чаще всего значение задается в пикселях.

font-weight – толщина символов в тексте. Может принимать значения:

• bold — полужирное начертание.
• bolder — жирное начертание.
• lighter — светлое начертание.
• normal — нормальное начертание.
• Также допустимо использовать условные единицы от 100 до 900.

font-style — определяет начертание шрифта (обычное, курсивное или наклонное). Может принимать следующие значения:

• normal — обычное начертание текста.
• italic — курсивное начертание.
• oblique — наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт, имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
• inherit — наследует значение родителя.

font-family – задает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки. Данное свойство может принимать следующие значения:

• serif — шрифты с засечками (антиквенные), типа Times;
• sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
• cursive — курсивные шрифты;
• fantasy — декоративные шрифты;
• monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
• inherit — наследует значение родителя.

На практике это выглядит примерно так:

font-family: tahoma, Verdana, sans-serif;

font — объединяет в себе все свойства, которые используются для определения шрифта.

font-variant — определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью. Свойство может принимать следующие значения:

• normal — оставляет регистр символов исходным, заданным по умолчанию.
• small-caps — модифицирует все строчные символы как заглавные уменьшенного размера.
• inherit — наследует значение родителя

На этом я заканчиваю статью о свойствах текста, полей, отступов, границ и шрифтов. Если у вас возникли какие-то вопросы по данному материалу, вы всегда можете задать их в комментариях.

На этом все. Удачи вам и до скорых встреч на страницах блога.