CSS также позволяет задавать способ обработки браузером пустого пространства. Для этого используется свойство white-space. Значения, которые может принимать это свойство, и их описания приводятся ниже.
- normal. Браузер будет сжимать последовательное пустое пространство и разбивать строки для вмещения в них линейных блоков.
- рге. Браузер не может изменять последовательность символов пустого пространства. Строки разбиваются только в местах начала новых строк, обозначенных в исходном тексте.
- nowrар. При сокращении пустого пространства это значение действует так же, как значение normal. Однако оно запрещает разрывать строки в тексте, за исключением разрывов, определенных с помощью тега <BR>.
Рассмотрим следующий пример:
BODY { white-space: рге }
браузер покажет HTML-документ с такой же таблицей стилей, с какой он отображается в исходном виде, например в программе Блокнот.
Оформление документа CSS
Теперь рассмотрим возможности CSS по оформлению документа. Изучив этот материал, вы с легкостью сможете придать своим страницам эксклюзивный вид.
Фон
Выше мы уже говорили, как задать фон для текста (с помощью свойства background-color). Точно так же задается цвет для любых тегов — таблиц, слоев и т. д.
CSS также позволяет задать для тегов фоновое изображение.
Фон может принимать следующие свойства: background-color, background-image, background-repeat, background-attachment,background-position и background.
Свойство background-image задает графический объект, то есть картинку из файла, в качестве фона элемента. При указании фонового изображения рекомендуется задавать фон, который будет использоваться в случае, если изображение окажется недоступным. Если изображение доступно, то оно отображается поверх фонового цвета, который все же будет виден сквозь прозрачные фрагменты изображения (если такие есть). В качестве значения этого свойства задается адрес картинки. Рассмотрим такой фрагмент таблицы стилей.
BODY { background-image: url("some_bgimage.gif") }
P { background-image: none }
В данном примере в качестве фона страницы используется изображение из файла some_bgimage. gif. Содержимое страницы внутри тега <Р> будет находиться на белом фоне либо на фоне, который задается в браузере по умолчанию.
Если вы задали фоновое изображение, то можете также использовать свойство background-repeat, которое определяет, будет ли изображение дублироваться, и если да, то каким образом. Данное свойство может принимать следующие значения:
repeat — изображение дублируется как по вертикали, так и по горизонтали;
repeat-x — изображение дублируется только по горизонтали;
repeat-y — изображение дублируется только по вертикали;
no-repeat — изображение не дублируется: отображается только одна копия изображения.
Рассмотрим такой пример:
body {
background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center;
}
В данном примере страница имеет белый цвет. Фоновое изображение будет вертикально продублировано и расположено посередине страницы.
Если вы задали фоновое изображение, то можете задать свойство background-attachment, которое определяет, будет ли изображение фиксироваться относительно окна просмотра (значение fixed) или перемещаться вместе с документом (значение scroll) при его прокрутке.
Вы также можете задать для фонового изображения начальное положение на странице, используя свойство background-posit ion. Местоположение можно задавать, используя проценты от размера окна браузера.
Это значение можно задать, указав число и единицу длины. Например, если вы зададите пару «2cm 2cm», то верхний левый угол изображения сместится на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.
В качестве значений вы можете также использовать ключевые слова. Ниже приводится их список и указывается, какой паре значений они аналогичны.
- top left и left top-«0% 0 %».
- top, top center и center top — «50 % 0 %».
- right top и top right-«100% 0 %».
- left, left center и center left —«0% 50%».
- center и center center - «50 % 50%».
- right, right center и center right — «100 % 50%».
- bottom left и left bottom-«0% 100%».
- bottom, bottom center и center bottom — «50 % 100 %».
- bottom right и right bottom-«100% 100%».
Для этих свойств можно использовать сокращенную запись используя свойство
