18c0693f

Учебник. Каскадные таблицы стилей

Абсолютные координаты

При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно:
Если в этой системе координат некоторый блочный элемент должен быть размещен на 10px ниже верхнего обреза рабочей области браузера и на 20px правее правого края рабочей области браузера, то его описание будет выглядеть следующим образом:
.example {position:absolute;top:10px;left:20px;}

В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20px), координата Y задана атрибутом top (значение - 10px).
Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат.
Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100px (высота) на 200px(ширина) достаточно отпозиционировать его следующим образом:
.example {position:absolute;
top:-100px;left:-200px;
width:200px;height:100px;}

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

Блочные и строковые элементы

В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки. Формально они определены в DTD (Document Type Definition) SGML-описания (Stadard Generalised Markup Language) языка HTML. Проще всего объяснить различие между блоком и строковым элементом можно на примере:

параграф - это блочный элемент разметки.

выделение курсивом - это строковый элемент разметки.
Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с другом. Строковые элементы можно как вкладывать, так и пересекать(согласно DTD и практике старых версий браузеров), но последнее делать не рекомендуется.
Совершенно естественно, что по набору атрибутов управления отображением (атрибуты описания стиля) строковые и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.
Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответственно.

Цвет фона текста


В HTML цветом фона можно управлять только для конкретного блочного элемента разметки. Таким элементом может быть вся страница:

...

или, например, таблица:

...</table>

Каскадные таблицы стилей позволяют менять цвет фона текста непосредственно по месту, точно так же, как строковые элементы разметки в HTML меняют обычный стиль начертания на italic, например.
В приведенном выше абзаце для выделения текста применено инвертирование цвета фона и цвета текста:


как строковые элементы разметки

При использовании цвета фона следует помнить, что поддержка этого атрибута реализована для всех блочных элементов разметки только с IE 4.0. Поддержка CSS в различных версиях NN гораздо скромнее.
Для работы с фоном элементов существует несколько атрибутов, которые поддерживаются только в IE, начиная с версии 4.0: background-image; background-repeat; background-attachment; background-position. Можно все свойства фона описать в атрибуте background:

background:transparent|color url repeat scroll position Пример:

p {background: gray http://kuku.ru/kuku.gif no-repeat fixed center center;}
Не смотря на такое обилие возможностей, злоупотреблять ими не стоит.

Цвет текста


В HTML для управления цветом отображаемого текста используется элемент FONT. Его аналогом в CSS является атрибут color. Этот атрибут можно применять как для блочных, так и для строчных элементов разметки.
Расмотрим в качестве блочного элемента разметки ячейку таблицы:

td {color:darkred;}



Первая колонка
Первая ячейка таблицы

В данном примере цвет текста определен только для обычной ячейки, поэтому содержание заголовка колонки отображается основным цветом(#003366).
При определении цвета текста для блочного элемента весь текст этого блочного элемента отображается заданным цветом. Частичное изменение цвета возможно, если применить строчный элемент разметки внутри блочного:

p {color:darkred;}

i {color:#003366;font-style:normal;}



Первая колонка
Первая ячейка таблицы.
В нее вставляем строчный элемент темно-синего цвета.

В данном примере в качестве блочного элемента мы используем параграф, а в качестве строчного элемента(in-line) применяем i. Таблица в данном случае большого значения не имеет, но применяется для единообразия с предыдущим примером. В нее мы помещаем параграф со встроенным в него in-line элементом разметки.

Форма "пулек"


Форма "пульки" в виде "жирной" точки несколько непривычна. Обычно в машинописных документах принято употреблять черту. С другой стороны, в рекламных материалах часто в качестве "пульки" используют квадрат или другой символ типографского набора, а также графическую картинку.
CSS позволяет управлять формой "пульки" через атрибут list-style-type: