Свойства фона

Свойства переноса

Свойства выравнивания

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

Свойство text-decoration отвечает за эффекты текста. Оно часто используется для выключения или включения подчеркивания текста гиперссылок. Поэтому наиболее часто используемые для него значения это none и underline, соответственно. Свойство text-decoration может принимать и другие значения, с которыми читатель может ознакомиться в любом справочнике по CSS.

К свойствам выравнивания относятся: text-align и vertical-align.

Свойство text-align определяет горизонтальное выравнивание текста в пределах элемента. Оно может принимать одно их четырех значений: left, right, center и justify. Последнее выравнивает текст одновременно по левому и правому краю.

Свойство vertical-align, как и следует из названия, отвечает за вертикальное выравнивание элемента или текста. Из всего множества допустимых значений практичных только три: top, middle и bottom. Обратите внимание, что значение, означающее выравнивание посередине называется middle, а не center.

Свойство white-space со значением nowrap запрещает перенос строк внутри текста, заключенного внутрь элемента. Помимо значения nowrap, стандарт CSS 2.1 предусматривает также normal, pre, pre-wrap и pre-line. В настоящий момент, на практике используются только два значения: normal и nowrap.

В этом разделе будут рассмотрены CSS-свойства фона элемента, а именно background, background-color, background-image, background-repeat, background-position, background-attachment.

Цвет фона устанавливается с помощью background-color. В качестве значения свойство принимает код цвета или значение «transparent», что означает «прозрачный». Правила указания цвета рассмотрены в разделе 4.2.5.

В случае, когда в качестве фона необходимо использовать изображение, применяется свойство background-image. Пример его использования показан в примере ниже.

Использование background-image

background-image: url(../images/mypic.jpg);

Путь к файлу изображения указывается в скобках параметра url. Путь указывается относительно расположения CSS файла, а не HTML документа.

По умолчанию, изображение фона будет повторяться по горизонтали и вертикали, пока не заполнит собой весь элемент, к которому применили данное свойство. В случае, когда необходимо ограничить повторение изображения по горизонтали или по вертикали или предотвратить его повторение, используется CSS-свойство background-repeat. Оно принимает одно из следующих значений: repeat (значение по умолчанию), repeat-x, repeat-y, no-repeat. Смысл этих значений понятен по их названиям.

Еще одно немаловажное свойство, которое помогает при манипуляциях изображением фона, называется background-position. Оно предназначено для установки позиции изображения фона внутри элемента. В качестве значения, это свойство принимает один или комбинацию двух параметров. Это может быть пара числовых значений, разделенных пробелом и выраженных в каких- либо единицах измерения (см. 5.4) или процентах (со знаком «%») смещения относительно верхнего левого угла. Еще это может быть одно или комбинация двух значений, разделенных пробелом, из следующих допустимых: top, bottom, center, left, right. Немного поэкспериментировав на практике, можно легко понять, что означает каждое из этих значений. Ввиду хорошей поддержки этого свойства современными браузерами, оно является весьма полезным во многих случаях. Рассмотрим несколько примеров:

Примеры использования background-position

background-position: 20px 70px;

background-position: 50% 100%;

background-position: bottom right;

background-position: top center;

background-position: left;

Cвойство background-attachment определяет, будет ли изображение фона фиксироваться относительно окна просмотра (значение fixed) или будет перемещаться вместе с документом (значение scroll) в процессе его прокрутки.

Рассмотрим сокращенный (shorthand) способ записи вышеупомянутых свойств фона. Это делается при помощи CSS-свойства background. Рассмотрим несколько примеров:

Сокращенная запись свойств фона

background: #c8eeff url(../images/bg-body.png) repeat-x scroll top;

Из примера видно, что значения свойств фона идут в следующем порядке: background-color, background-image, background-repeat, background-attachment и background-position.

В случае, когда необходимо задать одновременно несколько свойств фона в пределах одного селектора, предпочтение следует отдавать сокращенной записи.

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

Никогда не следует применять прием использования однопиксельного цветного изображения в качестве картинки фона, по причине того, что такой цвет браузер не в состоянии отобразить при помощи background-color. Такой подход может оказаться неожиданным для другого разработчика, что наверняка приведет к дополнительным затратам времени при модификации документа. Это предостережение касается новичков, потому, что, к сожалению, многие учебные пособия по HTML изобилуют подобными «полезными советами».

Дата добавления: 2014-12-16