Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
, а за ним идет тег аб- заца Фон, границы и плавающие элементы К недовольству многих веб-дизайнеров, фон и границы не переносятся таким же образом, как другие элементы веб-страницы. Допустим, у вас есть боковая панель, примыкающая к правому краю веб-страницы. Содержимое страницы, расположен- ное под ним, как ему и положено, приподнимается выше и обтекает панель. Однако, если у этого содержимого есть фоновые параметры или границы, они отображаются, фактически проступая под боковой панелью (рис. 7.16, слева). По сути, браузер окружает плавающий элемент только текстом, но не границами или фоном. Как это ни удивительно, но именно так работает механизм обтекания. Возможно, вы не будете следовать этим правилам; а захотите, чтобы границы, фоновый цвет или рисунок не отображались при достижении плавающего эле- мента (см. рис. 7.16, справа). С помощью CSS вы можете сделать и это. Глава 7. Поля, отступы, границы 237 Рис. 7.16. Добавление свойства overflow: hidden; в стиль тега препятствует тому, чтобы атрибуты заголовка повлияли на отображение фона и границ под плавающим элементом |
238
Часть 2. Применение CSS
элементы не должны отображаться рядом друг с другом. Для решения этой про- блемы в CSS предусмотрено свойство clear
Рис. 7.17. Если не хотите, чтобы элемент обтекал плавающий объект (вверху), вам поможет свойство clear (внизу), предотвращающее размещение изображений на одном уровне
Свойство clear говорит браузеру о том, что стилизуемый элемент не должен обтекать плавающий элемент. Очищение параметра приводит к тому, что элемент
Глава 7. Поля, отступы, границы
239
смещается вниз по тексту веб-страницы, располагаясь ниже плавающего элемента.
Кроме того, вы можете управлять очисткой с любой стороны элемента (слева или справа) или просто полностью удалить все параметры обтекания.
Свойство clear допускает следующие значения:
left
— стилизуемый элемент смещается вниз относительно плавающего с уста- новленным левым обтеканием, но правое обтекание остается в силе;
right
— стилизуемый элемент смещается вниз относительно плавающего с уста- новленным правым обтеканием, параметр левого обтекания остается в силе;
both
— вызывает перемещение стилизуемого элемента вниз относительно пла- вающего с установленными левым и правым обтеканием;
none
— полностью отменяет очистку обтекания: говорит браузеру, что стилизу- емый элемент должен вести себя стандартным образом, как предусмотрено, то есть он может обтекать плавающие элементы как с левой, так и с правой стороны.
В нашем примере текст примечания с авторским правом должен всегда отобра- жаться внизу веб-страницы и не должен обтекать другое содержимое. Ниже при- веден стилевой класс, который выполняет это:
.copyright {
clear: both;
}
На рис. 7.17 показано, как свойство clear может препятствовать беспорядоч- ному отображению плавающих элементов различной высоты. Для всех трех пред- ставленных на рисунке фотографий установлено обтекание по правому краю.
На верхней части рисунка фото помидоров (1) — первое изображение на веб- странице, оно расположено в верхнем правом углу. На отображение второй фо- тографии (2) оказывает влияние параметр обтекания первого изображения, и оно обтекает слева первое фото. Последнее изображение (3) слишком широкое, что- бы отобразиться рядом (на одном уровне) со вторым (2), но все-таки оно пыта- ется расположиться слева по отношению как к первому (1), так и ко второму (2) изображению. Однако ширина рисунка (3) не позволяет этого сделать.
Применение здесь свойства clear: right;
препятствует размещению фотогра- фий на одном уровне (см. рис. 7.17, внизу). Очистка обтекания для второй фото- графии не допускает ее отображения рядом с первой, а очистка обтекания для третьей предотвращает ее отображение на одном уровне со второй.
ПРИМЕЧАНИЕ
Применение параметров левого и правого обтеканий, а также очистка обтекания кажется достаточ- но сложным механизмом. Вообще, так оно и есть. В этом разделе я привел вам основные понятия.
Мы снова вернемся к этой теме в гл. 13, там вы познакомитесь с использованием обтекания в более сложных вариантах.
Обучающий урок: поля, фоновые параметры,
границы
В этом обучающем уроке мы исследуем элементы блочной модели CSS, потрени- руемся в настройке параметров интервалов, промежутков объектов веб-страниц,
240
Часть 2. Применение CSS
применим к элементам красочные границы-рамки, поуправляем размерами и об- теканием элементов веб-страниц.
Чтобы начать обучающий урок, вы должны загрузить файлы, содержащие учеб- ный материал. Как это сделать, рассказано в конце гл. 2. Файлы текущей обуча- ющей программы находятся в папке с названием
07
Управление полями страницы
Начнем с простого HTML-файла, содержащего внутреннюю таблицу стилей со сбросом стандартных настроек стилей CSS. Пока на странице нет ничего интерес- ного (рис. 7.18).
Рис. 7.18. Этастраница представляет собой основу HTML и содержит единственный стиль, устраняющий множество встроенных настроек форматирования браузера. Она будет выглядеть намного лучше после изменения с использованием блочной модели
1. Откройте в HTML-редакторе страницу sidebar.html из папки
07
Здесь уже есть внутренняя таблица стилей, содержащая набор стилей, который рассматривался в разделе «Начинаем с чистого листа»гл. 5. Этот набор стилей в основном удаляет все поля, отступы, установленные значения для размера
Глава 7. Поля, отступы, границы
241
шрифта, начертания шрифта из наиболее значимых элементов уровня блока и устраняет множество кросс-браузерных проблем с отображением элементов, с которыми вы могли столкнуться из-за этих свойств.
Как минимум вы должны всегда включать этот набор стилей во все создавае- мые таблицы стилей. Наверное, наиболее важными свойствами в нем являют- ся margin и padding
, установленные в первом стиле. Существует достаточно кросс-браузерных странностей, связанных с этими двумя свойствами, поэтому вы должны всегда обнулять их и начинать с чистого листа. Сначала мы опре- делим что-нибудь простое, например цвет фона.
2. Во внутренней таблице стилей щелкните кнопкой мыши сразу за комментари- ем CSS
/* end reset styles */
и добавьте стиль селектора тега:
html {
background-color: rgb(253,248,171);
}
Этот стиль устанавливает светло-желтый фон для страницы. Если вы хотите задать цвет для фона веб-страницы, можно добавить свойство background-color либо к тегу
, либо к тегу
. Далее мы добавим поля, границы и другие свойства тега
ПРИМЕЧАНИЕ
Возможно, вы привыкли вместо RGB-модели задания цвета использовать шестнадцатеричную мо- дель (в которой цвет представляется, например, так: #FDF8AB). Чтобы осуществлять преобразо- вания между этими двумя моделями, можно воспользоваться онлайн-конвертером www.colorhe- xa.com/. Но использование модели RGB предпочтительнее, поскольку RGBA-формат этой модели, имеющий дополнительный параметр прозрачности, настолько полезен, что лучше остановиться на одной цветовой модели (RBG), а не смешивать две (RGB и шестнадцатеричную).
3. Добавьте другой стиль во внутреннюю таблицу стилей.
body {
background-color: rgb(255,255,255);
border: 3px solid rgb(75,75,75);
}
Этот стиль добавляет белый цвет фона для тега
и темно-серую трехпик- сельную границу. Поскольку тег
расположен внутри тега
, браузер считает, что он находится «поверх» тега
и белый фон покроет фон жел- того цвета, установленный в предыдущем шаге. Далее мы зададим ширину для тега тела и настроим его отступы и поля.
СОВЕТ
Обычно, если вы добавляете свойство background-color к тегу , цвет заполняет все окно брау- зера. Однако если вы также добавите цвет фона для тега , фон будет заполнять только область с содержимым. Чтобы увидеть это в действии, просмотрите веб-страницу после шага 2, затем удалите стиль для тега и просмотрите страницу снова. Странная, но полезная ососбен- ность CSS.
4. Измените стиль тела (
), который вы только что создали, добавив пять новых свойств (изменения выделены полужирным шрифтом):
body {
background-color: rgb(255,255,255);
242
Часть 2. Применение CSS
border: 3px solid rgb(75,75,75);
width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 15px;
}
Свойство width ограничивает тело страницы 760 пикселами по ширине: если окно браузера посетителя окажется шире чем 760 пикселов, он увидит фоновый цвет стиля
и блок шириной 760 пикселов с белым фоном тега
Свойство margin-top добавляет 20 пикселов пространства от верхнего края окна браузера, «отталкивая» содержимое тега
чуть-чуть вниз, а левое и правое поля центрируют его, размещая посередине окна браузера. Значение auto
— это просто еще один способ сказать браузеру: «Разбирайся в этом сам», и посколь- ку данное значение применяется как к левому, так и к правому полю, браузер создает одинаковые промежутки слева и справа.
ПРИМЕЧАНИЕ
Вы можете также использовать сокращенное свойство margin, чтобы сжать эти три строки, устанав- ливающие настройки для полей, в одну:
margin: 20px auto 0 auto;
Наконец, чтобы предотвратить прикосновение содержимого тега
к линии границы, отступ шириной 15 пикселов добавлен к внутренней части содержи- мого с помощью свойства padding
. Другими словами, для изображения и текста был задан отступ 15 пикселов от всех четырех краев. Затем мы добавим свечение вокруг блока, воспользовавшись свойством box-shadow
5. Отредактируйте только что созданный стиль элемента body
, добавив к нему еще одно свойство после border
, но перед width
(изменения выделены полужирным шрифтом):
body {
background-color: rgb(255,255,255);
border: 3px solid rgb(75,75,75);
box-shadow: 0 0 15px 5px rgba(44,82,100,.75);
width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 15px;
}
Этот стиль добавляет блоку свечение путем создания 15-пиксельной тени помещенной непосредственно за блоком (то, что параметры тени начинаются с
0 0
, означает, что она не имеет смещения вправо-влево или вверх-вниз, и представляет собой просто фон). Значение
5px определяет расширение тени, выводя ее на 5 пикселов дальше всех четырех углов. И наконец, значение rgba устанавливает темно-синий цвет с показателем непрозрачности 75 % (то есть через него можно видеть желтый фон).
Глава 7. Поля, отступы, границы
243
В вашей таблице стилей уже много всего, поэтому пришло время проверить, как выглядит страница.
6. Сохраните файл и просмотрите веб-страницу в браузере.
Вы должны увидеть белый блок с изображением, кусок текста и серый контур с синеватым свечением, плавающие на желтом фоне (рис. 7.19). Теперь следует уделить внимание тексту, чем мы и займемся далее.
Рис. 7.19. Устанавливая значение auto для левого и правого полей любого элемента, имеющего заданную ширину, вы центрируете этот элемент
Настройка интервалов между тегами
Поскольку стили, сбрасывающие стандартные настройки CSS, «оголили» текст на странице, вам необходимо создать новые стили, которые преобразили бы заголов- ки и абзацы. Начнем с тега