С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в Табл. 3.1 [2, 5].
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в Табл. 3.2 [2, 5].
Табл. 3.2. CSS-свойства для работы с текстом
Свойство
Значение
Описание
line-height
normal множитель точно %
Межстрочный интервал
text-decoration
none underline overline line-through blink
Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста
text-transform
none capitalize uppercase lowercase
Убрать все эффекты Начинать с прописных Все прописные Все строчные
text-align
left right center justify
Выравнивание текста
text-indent
точно %
Отступ первой строки
CSS имеет несколько опций для определения цвета текста и фоновых областей на веб-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом HTML, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц, предлагая более простые и удобные варианты управления цветом.
В Табл. 3.3 перечислены свойства элементов, предназначенных для задания цвета [2, 5].
Табл. 3.3. CSS-свойства для работы с цветами
Свойство
Значение
Описание
color
Цвет
Устанавливает цвет текста
background-color
Цвет transparent
Цвет фона
Прозрачный
background-image
URL none
Фоновый рисунок
Отсутствует
background-repeat
repeat repeat-x repeat-y no-repeat
Повторяемость фонового рисунка
background-attachment
scroll fixed
Прокручиваемость фона вместе с документом
background-position
Проценты Пикселы top center bottom left right
Начальное положение фонового рисунка
Цвет, используя CSS, можно задавать тремя способами [5]:
1. По его названию. Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению. Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML. Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.
3. С помощью RGB. Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В Табл. 3.4 приведены допустимые псевдоклассы и их описания [2, 5].
Табл. 3.4. Псевдоклассы для работы с сылками
Свойство
Описание
A:link
Определяет стиль для обычной непосещенной ссылки.
A:visited
Определяет стиль для посещенной ссылки.
A:active
Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover
Определяет стиль для ссылки при наведении на нее мышью.
Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В Табл. 3.5 перечислены свойства элементов, предназначенных для создания и изменения списков [2, 5].
Табл. 3.5. CSS-свойства для работы со списками
Свойство
Значение
Описание
list-style
disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none
Вид маркера.
Первые три используются для создания маркированного списка, а остальные – для нумерованного.
list-style-image
none URL
Устанавливает символом маркера любую картинку.
list-style- position
outside inside
Выбор положения маркера относительно блока строк текста.
Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI.
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В Табл. 3.6 перечислены основные относительные единицы [5].
Табл. 3.6. Основные относительные единицы
Единица
Описание
em
Высота шрифта текущего элемента
ex
Высота символа x
px
Пиксел
%
Процент
Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевой атрибут font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, работа происходит именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1em принимается размер шрифта его родителя.
Аргумент ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.
Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.
Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В Табл. 3.7 перечислены основные такие единицы [5].
Табл. 3.7. Основные абсолютные единицы
Единица
Описание
in
Дюйм (1 дюйм равен 2,54 см)
cm
Сантиметр
mm
Миллиметр
pt
Пункт (1 пункт равен 1/72 дюйма)
pc
Пика (1 пика равна 12 пунктам)
Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта.
