Web-дизайн / Справочник CSS / Sprav_CSS

Web-технологии. Справочник CSS

Справочник. Иерархические стилевые спецификации (CSS)

Категория

Свойства

Значения

background

Определяет цвет фона отдельного элемента в HTML-документе или фоновое изображение.

background-image

Устанавливает фон элемента в виде изображения. Адрес может быть задан абсолютным или относительным, но обязательно заключается в скобки и идет за словом url. Поддерживается всеми элементами.

Пример: H1 {background-image: url(picture/line.gif)}

background-color

Меняет цвет фона элемента. Его значением может быть одно из имен цветов или его RGB- значение. Поддерживается всеми элементами.

Пример: blockquote {background-color:#C0C0C0;}

background-attachment

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

• fixed – фиксирует изображение в окне броузера;

• scroll – разрешает изображению прокручиваться вместе со страницей.

Пример: body {background-attachment:fixed; background-image: url(picture/line.gif)}

background-position

Используется для изменения положения фонового изображения. Положение всегда отсчитывается от левого верхнего угла элемента, содержащего это изображение. Например, при создании таблицы положение фона определяется относительно левого верхнего угла таблицы.

Записывается следующим образом: background-position: x у,

где х и у – положение по горизонтали и вертикали. Эти величины могут определяться в процентах относительно размеров элемента, а также в абсолютных единицах (например, в сантиметрах) или одним из следующих значений:

• Top – выравнивает изображение по верхнему краю элемента; имеет значение только для координаты у.

• Left – выравнивает изображение по левому краю элемента; имеет значение только для координаты х

• Right – выравнивает изображение по правому краю элемента; имеет значение только для координаты х.

• Bottom – выравнивает изображение по нижнему краю элемента; имеет значение только для координаты у.

• Center – центрирует изображение внутри элемента: если это слово указано для координаты х, изображение центрируется по горизонтали; если для координаты у – по вертикали.

background-repeat

Броузер с помощью этого свойства может размножить изображение и заполнить им фон всего элемента. Это свойство имеет четыре значения:

• Repeat – повторяет изображение по вертикали и горизонтали;

• repeat-x – повторяет изображение по горизонтали;

• repeat-у – повторяет изображение го вертикали;

• no-rapeat – запрет повтора изображения.

border

Определяет рамки вокруг элементов HTML-документа

border-bottom-width

Определяет ширину нижней стороны рамки и не оказывают влияния на другие ее стороны.

border-top-width

Определяет ширину верхней стороны рамки и не оказывает влияния на другие ее стороны.

border-left-width

Определяет ширину левой стороны рамки и не оказывает влияния на другие ее стороны.

border-right-width

Определяет ширину правой стороны рамки и не оказывает влияния на другие ее стороны.

Каждое из перечисленных выше свойств может принимать значения:

• Thin – узкая рамка.

• Medium – средняя рамка

• Thick – широкая рамка.

• Length – определяет точную ширину рамки в абсолютных единицах измерения.

border-color

Устанавливает цвет рамки элемента. Для определения цвета можно использовать стандартные имена или шестнадцатеричные цветовые коды RGB.

border-style

Определяет стиль рамки элемента. Может принимать значения.

• nоnе – рамка отсутствует.

• dotted – точечная линия.

• dashed – штриховая линия.

• solid – сплошная линия.

• double – двойная линия; ширина линий и расстояние между ними соответствуют значению свойства border-width.

• groove – вдавленная линия с цветом рамки, определенным свойством border-color.

• ridge – выдавленная линия с цветом рамки, определенным свойством border-color.

• inset – создает эффект вдавливания содержимого рамки с цветом, определенным свойством border-color

• outset – создает эффект выдавливания содержимого рамки с цветом, определенным свойством border-color.

Примечание:

Чтобы рамка отобразилась на экране недостаточно определить ее ширину. Также надо указать стиль рамки при помощи свойства border-style. По умолчанию значение этого свойства равно "nоnе" и поэтому рамка не отображается.

margin

Определяет отступы вокруг элементов HTML-документа

margin-bottom

Определяет нижние поля элемента

margin-left

Определяет левые поля элемента

margin-right

Определяет правые поля элемента

margin-top

Определяет верхние поля элемента

Значения этих свойств могут быть заданы в относительных или абсолютных единицах измерения, включая задание размеров в процентах (относительно высоты (height) и ширины (width) изображения элемента), или заданием значения "auto", позволяющего клиентскому браузеру самому определять поля оптимального размера. Для создания специальных эффектов могут использоваться отрицательные значения.

padding

Определяет поля вокруг элементов HTML-документа

padding-bottom

Величина свободного пространства между нижней стороной рамки и содержимым элемента.

padding-left

Величина свободного пространства между левой стороной рамки и содержимым элемента.

padding-right

Величина свободного пространства между правой стороной рамки и содержимым элемента.

padding-top

Величина свободного пространства между верхней стороной рамки и содержимым элемента.

Значение может быть задано любым способом, включая значение в процентах (относительно высоты (height) и ширины (width) изображения элемента).

Обтекание текстом изображений

float

Управляет прикреплением объекта к левому или правому полю документа. Окружающие прикрепленный объект элементы (например, текст) обтекают его способом, определенным значением свойства clear.

Nоnе

Выводит элемент без обтекания его текстом

Left

Прикрепляет объект слева. При этом текст обтекает элемент справа

Right

Прикрепляет объект справа. При этом текст обтекает элемент слева

clear

Используется для управления обтеканием прикрепленных объектов окружающими их элементами слева или справа от границ объекта.

Nоnе

Прикрепленные элементы разрешены с обеих сторон

Left

Прикрепленные элементы запрещены слева

Right

Прикрепленные элементы запрещены справа

Both

Прикрепленные элементы запрещены с обеих сторон

list-style

Применяются для указания способов вывода списков. Свойства списков наследуются, т.е. если вы определили свойство в элементе OL, то оно будет действительно для всех элементов LI в контейнере OL

list-style-image

Применяется для определения изображения, используемого в качестве маркера неупорядоченного списка. Оно имеет единственное значение в формате URL-адреса, указывающего местонахождение изображения

Например: list-style-image:url (images/marker.jpg)

Чтобы назначить одинаковые маркеры всем пунктам списка, надо определить свойство list-style-image в элементе списка UL. Можно переопределить это свойство для любого внутреннего элемента LI.

list-style-position

Определяет относительную позицию маркера. Значения:

• inside – текст пункта при переводе строки начинается под маркером.

• outside – текст пункта при переводе строки начинается под текстом предыдущего пункта (висячий отступ)

list-style-type

Используется для определения типа маркера. Значения

• disc – диск.

• circle – круг

• square – квадрат

• decimal – арабские цифры (1, 2. 3, 4, ...)

• lower-roman – маленькие римские цифры i, ii, iii, iv...).

• upper-гоman – большие римские цифры (I, II, III, IV, ...).

• lower-alpha – строчные буквы (a, b, c, d,..).

• upper-alpha – прописные буквы (А, В, С, D, ...)

• nоnе – маркер отсутствует.

font

Обеспечивают вывод текста

color

Определяет цвет содержимого элемента, в т.ч. текста. Значение может быть указано в шестнадцатеричном формате цветовых кодов RGB или при помощи стандартных имен.

font-family

Определяет приоритетную гарнитуру шрифта. Можно указывать одну гарнитуру или перечень альтернативных гарнитур (через запятую).

Например: font-family: Arial, Times, Serif

Можно употреблять конкретные или обобщенные названия гарнитур.

В табл.: приведены обобщенные названия групп и примеры отдельных гарнитур.

Обобщенное название	Пример
Serif	Times New Roman
Sans-serif	Arial
Cursive	Script
Fantasy	Comic

Последним в списке шрифтов, указанных в свойстве font-family, должно стоять обобщенное название одной из гарнитур на случай, если пользователь не располагает шрифтом, который используется для отображения текста на странице. В предыдущем примере таким названием было serif. Если на компьютере пользователя нет шрифта Arial и Times, программа просмотра использует один из шрифтов группы serif.

Если название шрифта состоит из нескольких слов, его нужно заключить в кавычки, например: font-family: "Courier New", Serif

font-size

Это свойство определяет размер шрифта и пунктах (рт), дюймах (in), сантиметрах (cm) или пикселях (рх). Можно также использовать значение в процентах (относительно размера шрифта родительского элемента) или одно из следующих значений:

• xx-small – на 50% меньше размера x-small.

• x-small – на 50% меньше размера small.

• small – на 50% меньше размера medium.

• medium – шрифт среднего размера, возможно (в зависимости от браузера), 10 пунктов.

• large – на 50% больше размера medium

• x-large – на 50% больше размера large.

• xx-large – на 50% больше размера x-large.

• larger – на 50% больше шрифта родительского элемента.

• smaller – на 50% меньше шрифта родительского элемента.

Примечание

50-процентное изменение размеров шрифта является указанием клиентскому браузеру, которое носит рекомендательный характер. Получив такое указание, браузеры самостоятельно определяют точный коэффициент масштабирования.

font-style

Определяет стиль шрифта и имеет значения:

• normal – нормальное начертание

• oblique – наклонное начертание

• italic – курсив

font-variant

Применяется для вывода текста прописными буквами маленького размера. Имеет два значения:

• normal – нормальный шрифт

• small-caps – маленькие прописные буквы.

f ont-weight

Определяет жирность шрифта и имеет значения

• normal

• bold

• bolder

• lighter

Можно также задавать значения числами 74, 433 ... 587 (чем больше число, тем жирнее начертание).

Например, текст с заданным стилем font-weight: 700 жирнее, чем текст со стилем font-weight: 400. Значение 400 приблизительно соответствует нормальной жирности начертания символов шрифта.

a

Определяется с помощью псевдоклассов. Псевдокласс – специальный селектор, определяющий, как выглядит HTML – элемент в определенный момент. Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки при щелчке пользователя на них

a:link

{color: #FFFFFF; text-decoration:none} – не посещенные ссылки.

a:visited

{color: black; text-decoration:none} – посещенные ссылки

a:active

{color: red; text-decoration:none} – активные ссылки.

a:hover

{text-decoration:underline}

Свойства других категорий

letter-spacing

Определяет расстояние между символами в строке текста. Если его значение указано как normal, то это расстояние определяет клиентский браузер, однако этому свойству может быть присвоено любое значение размера, например 5 mm

line-height

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

text-align

Это свойство определяет способ выравнивания текста элемента.

Значения:

• left – текст выравнивается по левому краю

• right – текст выравнивается по правому краю

• center – текст выравнивается по центру

• justify – текст выравнивается по ширине

text-decoration

Используется для подчеркивания, зачеркивания и т.д. Значения.

• nоnе – свойство отключено.

• underline – подчеркивание,

• overline – линия над строкой.

• line-through – зачеркивание.

• blink – мерцание текста.

text-indent

Это свойство используется для отступа в первой строке текста элемента и может указываться числовым значением, например;

Р {text-indent: 2cm)

С помощью этого свойства можно создать висячий отступ, назначив свойству text-indent отрицательное значение, а свойству margin-left — положительное значение.

text-transform

Это свойство «указывает, как должен быть преобразован текст. Значения

• capitalize – делает первую букву каждого слова прописной.

• uppercase – делает все буквы текста прописными.

• lowercase – делает все буквы текста строчными.

• nоne – преобразование не выполняется.

vertical-align

Управляет вертикальным положением текста внутри элемента. Значения:

• baseline – выравнивает базовую линию элемента по базовой линии родительского элемента.

• middle – выравнивает середину элемента по середине родительского элемента.

• sub – опускает элемент на подстрочный уровень.

• super – поднимает элемент на надстрочный уровень.

• text-top – выравнивает вершину элемента по верхней линии текста родительского элемента.

• text-bottom – выравнивает низ элемента по низу текста родительского элемента.

• top – выравнивает верх элемента по самому высокому элементу строки.

• bottom – выравнивает низ элемента по самому низкому элементу строки.

white-space

Определяет, как клиентский браузер должен интерпретировать свободное пространство внутри элемента. Если не определить это свойство, браузер сожмет свободное пространство. Однако можно заставить его относиться к свободному пространству так, как будто оно заключено в контейнер элемента предварительного форматирования pre

• normal – свободное пространство сжимается.

• рге – свободное пространство интерпретируется так, как это делается при использовании предварительного форматирования с помощью элемента pre.

• nowrap – перевод строки разрешается только по указанию элемента br.

word-spacing

Определяет расстояние между словами текста. Ему можно назначить любое цифровое значение, например, 1рх или значение normal, чтобы решение принимал клиентский браузер.

height и width

Эти свойства устанавливают общую высоту и ширину элемента, чаще всего изображения. Значения задаются в абсолютных или относительных единицах измерения, включая проценты. Также их можно определить как auto, при этом программа просмотра сама установит оптимальные размеры элемента на экране.

Внешняя стилевая спецификация подключается командой

<link rel=”stylesheet” href="имя файла.css" type=”text/css”>

8