Элементы CSS, именно их использованием будем заниматься в этой статье. Какие элементы используются в файлах 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, описание свойств”

Оставить комментарий

Популярные записи