Свойства форматирования элементов — КиберПедия 

Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...

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

Свойства форматирования элементов

2021-03-17 80
Свойства форматирования элементов 0.00 из 5.00 0 оценок
Заказать работу

В каскадных таблицах стилей, уровень 1 и 2, (CSS1 и CSS2) все доступные свойства форматирования элементов в документе HTML разбиты на 9 категорий.

Для задания значений свойств, определяющих некоторые размеры, в каскадных таблицах стилей применяются относительные и абсолютные единицы измерения длины. Относительные единицы  задают длину относительно значения другого свойства, определяющего длину. Документы, в которых таблицы стилей используют относительные единицы измерения, более приспособлены для отображения на разных устройствах (например, дисплей или лазерный принтер). Абсолютные единицы  измерения полезны только тогда, когда известны физические характеристики устройства отображения. В таблице 2 отображены все единицы измерения, используемые в таблицах стилей.

Таблица 2 Единицы измерения в таблицах стилей

Единицы измерения

Относительные

Абсолютные

em Размер текущего шрифта in Дюймы (1 in = 2.54 cm)
ex Высота символа 'x' текущего шрифта cm Сантиметры
px Пиксел устройства отображения mm Миллиметры
% Процент pt Пункты (1 pt = 1/72 in)
    pc Пика (1 pc = 12 pt)

Примечание

Относительные единицы измерения 'em' и 'ex' во всех свойствах вычисляются относительно высоты шрифта элемента. Единственное исключение – свойство 'font-size', в котором эти единицы относятся к высоте шрифта элемента-родителя.

В качестве значений цветов можно использовать зарезервированные ключевые слова HTML для определения наиболее употребительных цветовых оттенков (например, aqua, black, white и т.п.) или использовать цветовую модель RGB (красный, зеленый, синий). Примеры способов задания цветовых оттенков приведены ниже:

EM { color: #f00 }         /* #rgb соответствует #rrggbb */

EM { color: #ff0000 }      /* #rrggbb */

EM { color: rgb(255,0,0) } /* целые в интервале 0 - 255 */

EM { color: rgb(100%, 0%, 0%) } /* вещественные от 0.0% до 100.0% */

Для задания URL-адреса ресурса используется функциональная запись url(...):

BODY { background: url(http://www.bhv.ru/CSS/logo.gif) }

Скобки, запятые, пробелы, одинарные и двойные кавычки в URL-адресе задаются с предшествующей обратной косой чертой: '\)', '\(', '\,'.

Внимание

В каскадных таблицах стилей частичный URL-адрес интерпретируется относительно места расположения таблицы стилей, а не относительно расположения документа.

Шрифты

Свойство font-family

Свойство font-family задает приоритетный список семейств шрифтов и/или типовых семейств шрифтов.

BODY { font-family: TimesDL, "Times New", serif}

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

· serif (например, Times)

· sans-serif (например, Helvetica)

· cursive (например, Zapf-Chancery)

· fantasy (например, Western)

· monospace (например, Courier)

Имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки:

BODY {font-family: "Times New Roman", serif}

<BODY STYLE="font-family: 'Times New Roman', serif">

Свойство font-style

Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).

Обычно в базе шрифтов браузера все шрифты, в именах которых встречаются слова Oblique, Slanted или Incline отмечены как наклонные (oblique) шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive или Kursiv, отождествляются браузером с курсивными (italic).

H1 {font-style: italic}

H1 EM {font-style: normal}

Свойство font-variant

Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства – капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями.

Значение normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариант капитель шрифта.

H4 {font-variant: small-caps}

EM {font-style: oblique}

Свойство font-weight

Это свойство выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому "бледному" шрифту, тогда как 900 – самому "жирному".

Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700.

Свойство font-size

Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным.

Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large, которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. По умолчанию браузер использует значение medium.

Абсолютное значение можно задать и в виде абсолютного значения длины, например 10pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера.

Ключевые слова для задания относительного размера шрифта интерпретируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть: larger и smaller. Например, если родитель имеет размер шрифта medium, то значение larger сделает шрифт текущего элемента равным large.

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

P {font-size: 10pt}

EM {font-size: 120%}

EM {font-size: 1.2em}

Свойство font

Основное назначение свойства font – установить в одном определении значения свойств font-style, font‑variant, font-weight, font-size, line-height и font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:

P {font: oblique 12pt/14pt "Times Cyr", serif}

Свойство @font-face

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

@font-face {font-family: CoolFont; src:url(http://myserver.com/CoolFont.eot);}

Примечание

Все свойства шрифтов являются наследуемыми и применяются ко всем элементам документа HTML.

Цвет и фон

Свойства этой категории определяют цвет и фон элемента. Фон можно задать в виде цвета или изображения. В случае изображения указывается его положение, как оно повторяется и фиксировано ли оно или прокручивается вместе с прокруткой содержимого окна браузера.

Свойство color

Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции:

<P> {color: blue}

<EM> {color: rgb(0,0,255)}

Оба правила в примере устанавливают синий цвет текста соответствующих элементов.

Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно установить одновременно все значения параметров фона.

Свойство background-color

Цвет фона определяется значением свойства background-color. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный.

Свойство background-image

Изображение, используемое в качестве фона, задается свойством background-image. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.

BODY {background-color: lightsteelblue;

background-image: url(/image/image.gif);}

<P> {background-image: none}

Свойство background-repeat

Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no‑repeat (изображение не повторяется).

BODY {background-color: lightsteelblue;

background-image: url(/image/image.gif);

background-repeat: repeat-y;}


Поделиться с друзьями:

Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...

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

История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...

Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.023 с.