3.1. Свойства css

Текст

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 3.1

Таблица 3.1. CSS-свойства для работы со шрифтами

Свойство	Значение	Описание
font-family	имя шрифта	Задает список шрифтов
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт
font-variant	normal small-caps	Капитель (особые прописные буквы)
font-weight	normal lighter bold bolder 100-900	Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный
font-size	normal pt px %	Нормальный размер Пункты Пикселы Проценты

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.2 .

Таблица 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 перечислены свойства элементов, предназначенных для задания цвета.

Таблица 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, можно задавать тремя способами :

По его названию. Браузеры поддерживают некоторые цвета по их названию.

По шестнадцатеричному значению. Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML. Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.

С помощью RGB. Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении

Ссылки

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 3.4 приведены допустимые псевдоклассы и их описания .

Таблица 3.4. Псевдоклассы для работы с ссылками

Свойство	Описание
A:link	Определяет стиль для обычной непосещенной ссылки.
A:visited	Определяет стиль для посещенной ссылки.
A:active	Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover	Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.

Списки

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В табл. 3.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 перечислены основные относительные единицы .

Таблица 3.6. Основные относительные единицы

Единица	Описание
Em	Высота шрифта текущего элемента
Ex	Высота символа x
Px	Пиксел
%	Процент

Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевой атрибут font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, работа происходит именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1em принимается размер шрифта его родителя.

Аргумент ex определяется как высота символа "x" в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 3.7 перечислены основные такие единицы.

Таблица 3.7. Основные абсолютные единицы

Единица	Описание
In	Дюйм (1 дюйм равен 2,54 см)
Cm	Сантиметр
Mm	Миллиметр
Pt	Пункт (1 пункт равен 1/72 дюйма)
Pc	Пика (1 пика равна 12 пунктам)

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта.