вверху страницы.
1. Вернитесь к файлу sidebar.html в HTML-редакторе. Установите курсор после за- крывающей скобки селектора body
, нажмите
Enter и добавьте следующий стиль:
h1 {
font-size: 2.75em;
244 Часть 2. Применение CSS
font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal;
text-align: center;
letter-spacing: 1px;
color: rgb(133,161,16);
text-transform: uppercase;
}
Этот стиль использует
множество свойств для форматирования текста, которые мы обсуждали в предыдущей главе. Верхний заголовок имеет высоту
2.75 em
(44 пиксела в большинстве браузеров) и набран прописными буквами. К нему применяется шрифт Georgia зеленого цвета, есть небольшой промежуток между буквами. Свойство text-align обеспечивает центровку текста в середине блока.
Очень интересным получается добавление фонового цвета для выделения заго- ловка.
СОВЕТ
Сохраняйте страницу и просматривайте ее в браузере после каждого шага из этого примера. Таким образом вы получите хорошее понимание того, как приведенные здесь свойства CSS воздействуют на элементы, которые они форматируют.
2. Добавьте одно новое свойство к стилевому тегу h1
, чтобы он выглядел следу- ющим образом (изменения выделены полужирным шрифтом):
h1 {
font-size: 2.75em;
font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal;
text-align: center;
letter-spacing: 1px;
color: rgb(133,161,16);
text-transform: uppercase;
background-color: rgb(226,235,180); }
Если вы просмотрите страницу сейчас, то увидите, что заголовок имеет свет- ло-зеленый фон.
Когда фон применяется к блочным элементам, таким как заголовок, он заполняет все доступное горизонтальное пространство (другими словами, цвет не только появляется за текстом The Amazing World of CSS, но и простирается вплоть до правого края окна).
Текст заголовка немного стесненный — буква T, с которой он начинается, каса- ется края фона. С помощью небольших отступов вы можете исправить это.
3. Добавьте другое свойство к стилю тега h1
, чтобы он выглядел следующим обра- зом (изменения выделены полужирным шрифтом):
h1 {
font-size: 2.75em;
font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal;
text-align: center;
letter-spacing: 1px;
Глава 7. Поля, отступы, границы
245 color: rgb(133,161,16);
text-transform: uppercase;
background-color: rgb(226,235,180);
padding: 5px 15px 2px 15px; }
Сокращенное свойство padding представляет собой быстрый способ добавить отступы вокруг всех четырех сторон содержимого — в данном случае отступ шириной 5 пикселов добавляется над текстом, 15 пикселов — справа, 2 пиксе- ла — внизу и 15 пикселов — слева.
Есть еще одна проблема с заголовком: из-за отступов, которые добавлены к тегу
(см. шаг 4 предыдущего задания), заголовок отодвинут на 15 пикселов от
левого и правого краев зеленого контура, окружающего содержимое. Заголовок станет выглядеть лучше, если будет касаться этого контура. Это не проблема: на помощь приходят отрицательные поля.
4. Добавьте одно последнее свойство к стилю тега h1
, чтобы он выглядел следу- ющим образом (изменения выделены полужирным шрифтом):
h1 {
font-size: 2.75em;
font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal;
text-align: center;
letter-spacing: 1px;
color: rgb(133,161,16);
text-transform: uppercase;
background-color: rgb(226,235,180);
padding: 5px 15px 2px 15px;
margin: 0 -15px 20px -15px; }
Здесь сокращенное свойство margin устанавливает 0 пикселов для верхнего поля, минус 15 пикселов для правого, 20 пикселов для нижнего и минус 15 пикселов для левого. Нижнее поле просто добавляет немного пространства между заго- ловком и абзацем, который идет за ним. Следующий прием заключается в ис- пользовании отрицательных значений для левого и правого полей. Как отмеча- лось ранее, у нас есть возможность назначить отрицательные поля для какого-либо элемента. Это свойство «тянет» элемент по направлению поля — в данном случае заголовок продлевается на 15 пикселов влево и 15 пикселов впра- во, расширяясь и вытягиваясь над отступами тега
5. Теперь немного отформатируем тег
. Добавьте следующий стиль после сти- ля для h1
:
h2 {
font-size: 1.5em;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
color: rgb(249,107,24);
border-top: 2px dotted rgb(141,165,22);
border-bottom: 2px dotted rgb(141,165,22);
padding-top: 5px;
padding-bottom: 5px;
246
Часть 2. Применение CSS
margin: 15px 0 5px 0;
}
Этот стиль добавляет базовое форматирование текста и пунктирные границы сверху и снизу заголовка. Чтобы добавить немного пространства между текстом заголовка и строками, используются небольшие отступы сверху и снизу. Наконец, свойство margin добавляет поля шириной 15 пикселов над заголовком и 5 пиксе- лов под ним.
6. Сохраните файл и просмотрите страницу в браузере.
Заголовки выглядят хорошо (рис. 7.20). Далее создадим боковую панель на правой стороне страницы.
Рис. 7.20. С помощью нескольких стилей вы можете изменить фоновый цвет веб-страницы, добавить поля, регулировать интервалы между заголовками и абзацами
Глава 7. Поля, отступы, границы
247Создание боковой панели Боковые панели — обычные элементы, применяемые в большинстве печатных из- даний: в журналах, книгах, газетах. Они отделяют и
подсвечивают небольшие бло- ки информации, например перечень ресурсов, тематичный анекдот. Но, чтобы бо- ковые панели были дzzzостаточно эффективными и полезными, они не должны прерывать поток основного содержимого. Даже название «боковая панель» говорит о том, что этот блок должен быть расположен обособленно и примыкать к краю веб-страницы, что можно легко сделать средствами CSS.
1. Вернитесь к файлу sidebar.html в HTML-редакторе.
Сначала нужно отделить область веб-страницы, составляющую боковую панель.
Для этого прекрасно подходит тег
. С его помощью можно заключить любой объем HTML-кода в свой собственный отдельный блок.
2. Прокрутите страницу вниз к коду HTML и щелкните кнопкой мыши перед первым тегом
Скачать 20.28 Mb.