Элементы CSS, именно их использованием будем заниматься в этой статье. Какие элементы используются в файлах CSS, какие свойства им присваиваются и какие значения этих свойств они могут принимать. Обычно их делят на разделы по функциональному значению, как это и принято в большинстве спецификаций стандартов CSS.

 

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

Свойства шрифта могут содержать те элементы, которые описывают текст. Самые популярные это A, B, BODY, CAPTION, DD, DL, DT, EM, H1-H6, I, LI, STRONG, P, SMALE, STRIKE, TD, TH и некоторые другие, менее популярные.

Свойство Font-family

Используют для указания семейства шрифтов. Рекомендуется использовать наиболее популярные, так как применив какой-то экзотический вариант, у браузера есть возможность не обнаружить его на компьютере пользователя. Но если сильно хочется, его можно поместить на свой сайт и указать путь к нему в директивах CSS. Более детально об этом написано в статье «Подключение CSS к Web-странице».
Пример:

P { font-family: Arial Black URL(‘http://mysait.ru/fonts/font-name.ttf’); }

Свойство Font-size

Указывает размер шрифта, которое может быть как в абсолютных, так и в относительных величинах. Абсолютные указываются в условных пунктах (pt), сантиметрах (cm), миллиметрах (mm) или пикселях (px). Самым распространенным способом является указание в пикселях. У относительных величин есть одно неприятное свойство, может по-разному интерпретироваться в разных браузерах.
Пример:

H1 { font-size: 35pt; }
H2 { font-size: 70px; }
H3 { font-size: 50%; }

Свойство font-weight

Устанавливает толщину символов
— normal, стандартное написание
— lighter, тонкий шрифт
— bold, жирный шрифт
— bolder, очень жирный шрифт
Пример:

STRIKE { font-weight: bold; }

Свойство font-variant

Определяет регистр записи символов и принимает два значения
— normal, стандартное написание, без изменений
— small-caps, символы преобразуют в заглавные.
Пример:

CAPTION { font-variant: normal: }

Свойство font-style

Описывает правила начертания символов.
— normal, стандартное написание
— italic, наклонным шрифтом.
Пример:

EM { font-style: italic; }

 

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

Продолжаем описание селекторов CSS. Параметры свойства текста применяются ко всем элементам CSS.

Свойство text-align

Задает расположение текста, отвечает за выравнивание текстового блока и принимает следующие значения
— left, выравнивание по левой границе
— right, выравнивание по правой границе
— center, выравнивание по центру
— justify, растягивание текста по всей ширине
Пример:

P { text-align: center; }

Свойство text-decoration

Устанавливает эффекты начертания символов
— none, отсутствие эффектов
— underline, подчеркнутые текст
— line-through, перечеркнутый текст
— overline, надстрочный текст
— blink, мерцающий текст
Пример

A { text-decoration: none; }

Свойство text-ident

Указывает на отступ первой строки текстового блока, так называемой «красной строки».
Например,

P { text-ident: 30pt; }

Свойство line-height

Устанавливает межстрочный интервал.
Пример:

P { line-height: 5px; }

Свойство letter-spacing

Устанавливает расстояние между символами текста.
Пример:

P { letter-spacing: 3px; }

Свойство vertical-align

Определяет вертикальное выравнивание текста или графики в ячейках таблиц
— top, по верхней границе ячейки
— middle, по центру ячейки
— bottom, по нижней границе
— baseline, по условной базовой линии
— top-text, по верхней точке текстовой строки
— bottom-text, по нижней точке текстовой строки
Пример:

TD { vertical-align: top; }
IMG { vertical-align: top-text; }

Свойство text-transform

Задает трансформацию текстового блока
— normal, стандартное отображение
— capitalize, каждое слово абзаца начинается с заглавной буквы
— uppercase, все символы текста становятся заглавными
— lowercase, все символы становятся строчными.
Пример:

CAPTION { text-transform: capitalize; }

Свойства цвета и фона

Свойство color

Определяет цвет элемента CSS
Пример:

SMALL { color:green; }

Свойство background-color

Указывает цвет фона какого-либо элемента, причем именно элемента, а не всего документа.
Пример:

H3 {background-color: #000000; }

Свойство background-image

Устанавливает фоновое изображение всего документа или ячейки таблицы. Если установлен параметр none, то данная страница не содержит фоновых изображений.
Пример:

 BODY { background-image: URL(/images/pict11.jpg); }

Свойство background-repeat

Определяет параметры повторения фонового изображения в разных направлениях видимой части документа.
— no-repeat, не повторять изображение
— repeat, повторять изображение во всех направлениях
— repeat-x, только по горизонтали
— repeat-y, только по вертикали
Пример:

BODY {background-repeat: no-repeat; }

Свойство background-attachment

Устанавливает правило скроллинга фонового изображения
— scroll, фоновое изображение движется при прокрутке документа
— fixed, фиксирует изображение на экране
Пример:

BODY { background-attachment: fixed; }

Свойство background-position

Если свойство background-repeat установлено repeat-x или repeat-y, позволяет зафиксировать положение фонового изображения.
— top, по верхней границе экрана
— middle, по центру экрана
— bottom, по нижней границе экрана
— left, по левой границе экрана
— right, по правой границе
— center, выравнивание по центру
— можно указать расстояние от левой и верхней границы экрана
Пример:

BODY { background-position: 12 cm 4 cm; }
TD      { background-position: center; }

Молодцы, если дочитали до сих пор, но это еще не все. В следующей статье разберем свойства границ и свойства списков и еще кое-что и тогда уже тему элементы CSS можно будет закрывать.

 

 

9 комментариев на “Элементы CSS, описание свойств”