- •Каскадные таблицы стилей Общие положения
- •Связывание таблиц стилей с документом
- •Группирование и наследование
- •Селекторы
- •Селектор class
- •Селектор id
- •Контекстные селекторы
- •Применение таблиц стилей
- •Псевдоклассы
- •Псевдоклассы связей
- •Модель форматирования
- •Блоковые элементы
- •Встроенные элементы
- •Свойства форматирования элементов
- •1. Шрифты Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Свойство font
- •Свойство @font-face
- •2. Цвет и фон
- •Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Свойство background
- •Свойство line-height
- •4. Блоки
- •Свойства поля
- •Свойства отступа
- •Свойства границы
- •5. Визуальное форматирование Свойство position
- •Абсолютное позиционирование
- •Свойства top и left
- •Свойства width и height
- •Относительное позиционирование
- •Статическое позиционирование
- •Визуальные эффекты
- •Свойство visibility
- •Свойство display
- •Свойство clip
- •Свойство overflow
- •Свойство z-index
- •Отображение списков
- •Свойство list-style-type
- •Свойство list-style-image
- •Свойство list-style-position
- •Свойство list-style
Свойство background-position
Свойство background-position определяет начальное положение изображения, используемого в качестве фона, в блоке содержимого элемента. Значением этого свойства являются координаты привязки определенных точек изображения и блока содержимого. Их можно задавать в процентах, в абсолютных единицах длины, а также с использованием комбинаций ключевых значений.
Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например 10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.
Пара абсолютных значений, например 10mm 10mm, размещает верхний левый угол изображения на 10мм правее и на 10мм ниже левого верхнего угла блока содержимого.
Ключевые значения и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в таблице 3.
Таблица 3 Допустимые комбинации ключевых значений
-
Комбинация
Значение
top left, left top
0% 0%
top, top center, center top
50% 0%
top right, right top
100% 0%
left, center left, left center
0% 50%
center, center center
50% 50%
right, center right, right center
100% 50%
bottom left, left bottom
0% 100%
bottom, bottom right, bottom center
50% 100%
bottom right, right bottom
100% 100%
Свойство background
Свойство background позволяет одновременно устанавливать значения свойств background-color, background-image, background-repeat и background-attachment. Все допустимые значения индивидуальных свойств задаются в виде списка, элементы которого отделены пробелами. Если значение какого-либо свойства не задано, то оно устанавливается в начальное значение, определяемое браузером:
BODY {background: lightsteelblue url(/image/image.gif) center}
Примечание
Свойство color наследуется по обычным правилам. Все свойства, определяющие параметры фона, не наследуются, но фон элемента-родителя будет отображаться по умолчанию, так как начальным значением свойства background-color является transparent (прозрачный).
3. Форматирование текста
Свойство letter-spacing
Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами.
<P STYLE="letter-spacing: 0.5em">
Слово слово слово слово слово
</P>
Свойство text-transform
Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные или строчные, независимо от их задания в тексте документа HTML.
Свойство text-decoration
Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-through.
Свойство text-align
Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значении left, по правому краю – при значении right, по центру – при значении center и по ширине блока содержимого элемента – при значении justify.
Внимание
Текст выравнивается относительно блока содержимого элемента, а не относительно окна отображения браузера.
Свойство text-indent
Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины.
Свойство vertical-align
Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя. Его значением может быть любое ключевое слово из таблицы 4.
Таблица 4 Ключевые значения выравнивания по вертикали
-
Значение
Результат
baseline
Выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя
middle
Выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока содержимого родителя
sub
Элемент отображается в виде нижнего индекса
super
Элемент отображается в виде верхнего индекса
text-top
Выравнивание верха элемента с верхом шрифта элемента-родителя
text-bottom
Выравнивание низа элемента с низом шрифта элемента-родителя
top
Выравнивание верха элемента с верхом самого высокого элемента строки
bottom
Выравнивание низа элемента с ниже всех расположенным элементом строки
Значения этого свойства, заданные в виде процентов, вычисляются относительно высоты строки (свойство line-height) самого элемента. Они поднимают базовую линию (или низ элемента, если он не имеет базовой линии) на заданную высоту относительно базовой линии элемента-родителя, если значение положительно, и опускают, если значение отрицательно.
