В предыдущей статье категории 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 — наследует значение родителя
На этом я заканчиваю статью о свойствах текста, полей, отступов, границ и шрифтов. Если у вас возникли какие-то вопросы по данному материалу, вы всегда можете задать их в комментариях.
На этом все. Удачи вам и до скорых встреч на страницах блога.