- •Лекция 6. Основные ключевые аспекты разметки отображения и css.
- •Распределение веса стилей зависит от:
- •Обобщенные блоковые и строковые элементы разметки
- •Свойства блочных элементов
- •Внутренние отступы
- •Граница
- •Обтекание блока текста
- •Внешние отступы
- •Управление цветом в каскадных таблицах стилей
- •Повторение мозаики
- •Размещение изображений (позиционирование)
Управление цветом в каскадных таблицах стилей
Каскадные таблицы стилей (CSS) в первую очередь описывают свойсва текста. Это касается как текстовых блоков, так и строковых элементов разметки содержания страницы. В данном разделе речь пойдет об управлении отображением цвета текста (color) и цвета фона (background-color), на котором отображается текст.
Кроме цвета текста и цвета фона CSS позволяет определять цвет границы текстового блока (border-color).
Вообще говоря, атрибуты стилей, которые мы собираемся рассмотреть в этом разделе, относятся к группе атрибутов "Color and Background Properties", как это определено в спецификации Micrоsoft. В эту группу входят атрибуты, которые определяют свойства фона, его прозрачность, управления фоновой картинкой (координатами ее размещения и способами ее повторения).
Цвет текста
Управлять цветом отображаемого текста в CSS можно атрибутом color. Например:
td {color:darkred;}
Этот атрибут можно применять как для блочных, так и для строчных элементов разметки.
Цвет фона текста
Каскадные таблицы стилей позволяют менять цвет фона текста непосредственно по месту.
Например.
<span style="background-color:#003366;
color:white;">
как строковые элементы разметки
</span>
Для работы с фоном элементов существует несколько атрибутов: background-image; background-repeat; background-attachment; background-position. Можно все свойства фона описать в атрибуте background:
Добавления иллюстраций к фону элемента
background-image : url | none | inherit
Применяется: Ко всем элементам
Наследуется: Нет
Начальное значение: none
Свойство background-image является основным способом добавления иллюстраций к фону элемента. Для <body> действует как background.
Свойство background-image применяется к любому элементу, входящему в документ как на уровне блока, так и локально.
Например:
body { background-image: url(stripes.gif); }
p.higlight { background-image: url(dots.gif); }
Свойство background-image не наследуется.
Если свойство background-image используется вместе с background-color, изображение помещается поверх цвета.
Повторение мозаики
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
Применяется: Ко всем элементам
Наследуется: Нет
Начальное значение: repeat
Свойство background-repeat управляет тиражированием фонового изображения.
background-repeat: repeat – применяется по умолчанию,
background-repeat: repeat-x – тиражирование по горизонтали
background-repeat: repeat-y – тиражирование по вертикали
background-repeat: no-repeat – изображение появляется только 1 раз
Например:
div.horiz { background-image: url(star.gif); background-repeat: repeat-x; }
div.vert { background-image: url(star.gif); background-repeat: repeat-y; }
Размещение изображений (позиционирование)
Свойство background-position указывает начальную позицию исходного изображения на фоне данного элемента. Начальным положением по умолчанию является левый верхний угол области заполнения элемента. Изображение не выходит за границы элемента.
Значениями свойства background-position могут являться: ключевые слова (left, center, right, top, bottom), единицы длины, значение в процентах.
Ключевые слова обычно используют попарно. Рекомендуется указывать в порядке «горизонталь и вертикаль». Например:
background-position: left top;
background-position: right center; // если указано одно значение,
background-position: center bottom; //вторым принимается «center»
Единица длины задает координаты левого верхнего угла изображения относительно левого верхнего угла области заполнения элемента ( X Y ).
background-position: 150px 15px
Допускается задание отрицательных значений.
Значение в процентах обеспечивает более точный контроль над положением изображения, чем ключевые слова. Задаются значения в процентах парами («горизонталь и вертикаль»). Значениями по умолчанию являются (0% 0%).
Действие пары распространяются на область фона (данного элемента) и непосредственно на рисунок. Например, пара значений:
- 50% 50% - располагает центр рисунка в центре самого элемента;
- 100% 100% - располагает нижний угол рисунка в правом нижнем углу элемента;
- 10% 25% - соотносит точку, отстоящую на 10% от левого и на 25% от верхнего края изображения, с такой же точкой на элементе.
При указании одной величины, вторая предполагается равной 50%.
Закрепление фона
background-attachment: scroll | fixed | inherit
Начальное значение: scroll – рисунок фона будет перемещаться вместе с содержимым.
Свойство background-attachment: fixed – прикрепляет рисунок к определенной позиции по отношению к зоне просмотра (а не самого элемента).
body { background-image: url(stripes.gif);
background-position: top;
background-repeat: no-repeat;
background-attachment: fixed; }
Примеры занимательных применений по адресу www.meyerweb.com/eric/css/edge/complexspiral/glassy.html.
Объединение свойств фона
background: background-color || background-image || background-repeat || background-position || background-attachment | inherit
Свойство background дает возможность объединить (в произвольном порядке) все свойства фона в едином правиле.
Синтаксически допустимые примеры:
body {background: url(superstar.gif) fixed top center no-repeat;}
div.intro {background: repeat-x url(topborder.gif) red;}
p { background: #336600; }
Порядок задания свойств произвольное, но необходимо помнить, что пропущенным значениям присваиваются значения по умолчанию, а также применяется правила приоритетов.
Например, при объявлении правил
h1, h2, h3 {background: red url(dots.gif) repeat-x;}
h3 {background: blue;}
изображение dots.gif не станет фоном h3, так как не указано свойство background-image и его значением принимается значение по умолчанию background-image: none.
Для того, чтобы переопределить конкретное свойство фона, необходимо указать именно то свойство, которое намерены изменить, т.е. для того, чтобы dots.gif оставался фоновым изображением для h3, в котором был бы изменен цвет фона, необходимо определить background-color:blue.