|
|
Книга css3 3е издание Серия Бестселлеры OReilly
, находящемуся внутри другого тега с классом main
. Если вы просмотрите код HTML веб-страницы, то увидите, что там есть тег
с классом main ( ). Как вы узнаете позже, при создании дизайнов, основанных на CSS, достаточно распространено группиро- вание HTML-тегов внутри тегов . Вы сможете размещать отдельные теги
для создания столбцов и других составных разметок страниц. Распростра- нено также применение селекторов потомков наподобие этого для точного определения свойств форматирования, воздействуя лишь на теги в определен- ных разделах страницы.
2. Нажмите
Enter и наберите три CSS-свойства:
color: rgb(252,102,0);
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size: 4em;
Вы только что изменили цвет заголовков
, а также их шрифт. На этот раз вместо использования веб-шрифта указан шрифт, который может быть установ- лен на компьютере посетителя. Шрифт Arial Black есть на многих компьютерах, но если у какого-нибудь посетителя он установлен не будет, браузер воспользу- ется шрифтом Arial или Helvetica, или просто общим шрифтом без засечек. Кро- ме того, вы задали размер шрифта равным 4 em, что для большинства браузеров составляет 40 пикселов (если, конечно, посетитель не изменял параметры шриф- тов в настройках своего браузера). Это все благодаря размеру 62,5 %, определен- ному ранее в шаге 7. Таким образом, базовый размер шрифта стал составлять
10 пикселов в высоту, а 4
⋅ 10 задает размер 40 пикселов. Затем к заголовку будет добавлена текстовая тень.
3. Завершите текущий стиль, нажав
Enter и добавив код, выделенный ниже полу- жирным шрифтом (не забудьте поставить закрывающую скобку):
n h1 {
color: rgb(252,102,0);
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size: 4em;
text-shadow: 4px 3px 6px rgba(0,0,0,.5);
}
Здесь добавлена текстовая тень, смещенная на 4 пиксела вправо, на 3 пиксела ниже с размытостью в 6 пикселов. Кроме того, используется RGBA-цвет, уста- навливающий для тени черный цвет и 50%-ную прозрачность.
Глава 6. Форматирование текста
197
4. Сохраните файл и воспользуйтесь предварительным просмотром в браузере.
Теперь изменим внешний вид остальных заголовков и абзацев.
5. Вернитесь к файлу text.html в HTML-редакторе. Установите указатель после за- крывающей скобки стиля
.main h1
, нажмите
Enter и добавьте следующие стили:
.main h2 {
font: bold 3.5em "Hoefler Text", Garamond, Times, serif;
border-bottom: 1px solid rgb(200,200,200);
margin-top: 25px;
}
Здесь есть еще один селектор потомка, который относится только к тегам
, находящимся внутри другого тега с классом main
. Свойство font сокращает ко- личество кода, объединяя в себе font-weight
, font-size и font-family
. Другими словами, одна строка делает заголовок полужирным, устанавливает для него высоту 3,5 em и определяет шрифт.
Кроме того, этот стиль добавляет декоративную границу под заголовком и не- много пространства между заголовком и тегом над ним (то есть пространство добавляется между заголовками CSS The Missing Manual и Exploring Typographic
Possibilities).
Пришло время настроить другие заголовки.
6. Добавьте новый стиль под тем, который вы создавали в предыдущем шаге:
.main h3 {
color: rgb(255,102,0);
font-size: 1.9em;
font-weight: bold;
text-transform: uppercase;
margin-top: 25px;
margin-bottom: 10px;
}
Этот стиль устраняет некоторые свойства обычного форматирования: цвет, раз- мер шрифта, жирность, а также использует свойство text-transform
, чтобы все буквы текста внутри заголовка
стали прописными. Наконец, он добавляет немного пространства сверху и снизу заголовка с помощью свойства margin
Далее улучшим внешний вид абзацев.
7. Добавьте новый стиль на страницу:
.main p {
font-size: 1.5em;
line-height: 150%;
margin-left: 150px;
margin-right: 50px;
margin-bottom: 10px;
}
Этот стиль содержит свойство line-height
, которое определяет расстояние меж- ду строками. Значение 150 % добавляет немного больше пространства между
198 Часть 2. Применение CSS строками абзаца, чем вы обычно видите в браузере. Благодаря этому дополни- тельному пространству текст «чувствует себя свободнее», а предложения ста- новится легче читать (но только если вы используете латиницу). Данный стиль также увеличивает размер шрифта до 1,5 em (15 пикселов для большинства браузеров) и отодвигает абзац от левого и правого краев страницы. Вы можете заметить, что для свойства margin приходится набирать слишком много кода. Но, к счастью, как вы узнаете в следующей главе, есть сокращенная запись этого свойства. Теперь попробуем более совершенный тип селектора. 8. Добавьте следующий стиль к таблице стилей: .main p:first-line { font-weight: bold; color: rgb(153,153,153); } Псевдоэлемент :first-line воздействует только на первую строку абзаца. В этом случае именно первая строка текста в каждом абзаце внутри основного будет окрашена в серый цвет и выделена полужирным. 9. Сохраните страницу и откройте ее для просмотра результатов в браузере. На текущий момент ваша веб-страница должна быть похожа на ту, что показа- на на рис. 6.20. Форматирование списковНа этой странице есть один маркированный список. Переместим его вверх к пра- вому краю страницы и сделаем так, чтобы текст, идущий за этим списком, оберты- вался вокруг него. С помощью CSS сделать это достаточно легко. 1. Вернитесь к файлу text.html в HTML-редакторе. Добавьте следующий стиль в конце внутренней таблицы стилей: .main ul { margin: 50px 0 25px 50px; width: 150px; float: right; } При форматировании списков вы обычно создаете стили для двух разных эле- ментов: непосредственно для самого списка (тега
для маркированных либо тега
для нумерованных списков) и отдельных элементов списка (тег
).
Этот стиль управляет всем списком.
В стиле выполняется несколько действий. Во-первых, свойство margin исполь- зуется в сокращенной записи. Одна строка устанавливает все четыре поля во- круг списка, замещая четыре отдельных свойства margin
(
margin-top
, margin-right и т. д.). Четыре значения представлены в следующем порядке: верхняя сторона, правая, нижняя и левая. Таким образом, этот стиль устанавливает поле шири- ной 50 пикселов вверху списка, 0 — справа, 25 — внизу и 50 пикселов — слева.
Глава 6. Форматирование текста
199
Свойство width задает для всего списка ширину 150 пикселов. Если какой-ни- будь пункт списка содержит больше текста, чем может поместиться в пределах этого пространства, он переходит к другой строке. Свойство float по-настояще- му волшебное: в данном случае float: right означает перемещение списка вверх к правому краю страницы. Это свойство также приводит к тому, что следующий за списком текст обертывается вокруг левой стороны списка. Это замечатель- ный метод, а более подробно о плавающих элементах вы узнаете в следующей главе.
Рис. 6.20. Внешний вид веб-страницы преображается: параметры заголовков, абзацев и основного текста приведены в порядок
200 Часть 2. Применение CSS Далее определим внешний вид отдельных пунктов списка. 2. Добавьте еще один стиль во внутренней таблице в файле text.html : .main li { color: rgb(32,126,191); font-size: 1.5em; margin-bottom: 7px; } Здесь нет ничего нового: обычное изменение цвета и размера, а также добавле- ние пространства под каждым пунктом списка. Пришло время взглянуть на результат. ПРИМЕЧАНИЕ Если вы хотите добавить пространство между пунктами списка, необходимо добавить верхние или нижние поля для тега . Добавление полей к тегам или просто увеличит пространство вокруг всего списка.
3. Сохраните страницу и воспользуйтесь предварительным просмотром в браузере.
Теперь страница должна быть похожа на ту, что представлена на рис. 6.21.
Точная настройка с классами
Иногда появляется желание иметь еще больше контроля над тем, как применяется стиль. Например, вы хотите видеть большинство абзацев в каком-либо разделе страницы одинаковыми, но, вероятно, пожелаете определить уникальный вид для одного или двух из них. В этом обучающем примере абзац рядом с верхней частью страницы — november 30 Rod Dibble — содержит особую информацию (о дате пу- бликации и об авторе). Сделаем так, чтобы этот абзац выделялся среди других, добавив класс к HTML и создав для него стиль.
1. Найдите вышеупомянутый абзац в коде HTML (
november 30 Rod
Dibble
) и добавьте к открывающему тегу
. Код
HTML должен выглядеть так:
november 30 Rod Dibble
Теперь осталось создать стилевой класс, переопределяющий общие свойства форматирования абзацев на этой странице.
2. Во внутренней таблице стилей рядом с верхней частью страницы добавьте стиль для этого абзаца:
.main .byline {
font-size: 1.6em;
margin: 5px 0 25px 50px;
}
Этот стиль настраивает размер и расположение только одного абзаца. Заметьте, что если бы вы назвали этот стиль просто
.byline
(базовый селектор класса), он бы не работал. Благодаря правилам каскадности, описанным в предыдущей главе,
.byline является менее значимым, чем стиль
.main р
, созданный в шаге 7 пару страниц назад, поэтому он будет не способен переопределить цвет, размер и поля, указанные в
.main p
. А
.main .byline
, в свою очередь, является более значимым.
Глава 6. Форматирование текста
201
Рис. 6.21. Свойство float дает интересные возможности при проектировании дизайна. В данном случае маркированный список перемещается к правому краю страницы
Этот абзац по-прежнему требует доработки. Было бы замечательно, если бы имя выделялось еще больше. HTML в этом случае дает нужное средство.
3. Добавьте следующий стиль к таблице стилей:
.main .byline strong {
color: rgb(32,126,191);
text-transform: uppercase;
margin-left: 5px;
}
202 Часть 2. Применение CSS Если вы просмотрите код HTML в шаге 1, то увидите, что имя — Rod Dibble — находится внутри тега
. Тег
используется для того, чтобы под- черкнуть текст и пометить его как важный. Но это не значит, что вам нужно позволять ему быть полужирным, как большинство браузеров обычно отобра- жают этот тег. Напротив, селектор потомка относится к тегу
, но только тогда, когда он появляется внутри другого тега с классом
.byline
, и только если они все находятся внутри еще одного тега с классом main
— вот так, очень спе- цифично.
Этот стиль делает текст синим, превращает буквы в прописные и добавляет немного пространства с левой стороны (немного отодвигая имя от текста november 30).
Последние штрихи
Заключительная корректировка дизайна веб-страницы будет состоять в добавле- нии нескольких атрибутов дизайна, форматирующих страницу и главный тег
, чтобы они выглядели лучше. Закончим, добавив немного интересного форматиро- вания для текста. 1. Вернитесь к файлу text.html в HTML-редакторе. Сначала зададим фоновый цвет и изображение для страницы. 2. Найдите стиль html в верхней части внутренней таблицы стилей и добавьте одно новое свойство (изменения выделены полужирным): html { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: rgb(225,238,253) url(images/bg_body.png) repeat-x; } Свойство background представляет собой мощный инструмент для любого веб- дизайнера. Вы уже использовали его пару раз в предыдущих обучающих при- мерах; оно позволяет добавлять цвет, а также вставлять изображения и управ- лять их расположением в фоне какого-либо тега. Вы узнаете все тонкости этого свойства в следующей главе, а сейчас просто отмечу, что введенная строка из- меняет цвет фона страницы на светло-голубой и добавляет темно-синюю поло- су в верхнюю часть страницы. Далее преобразим основной тег
3. Добавьте еще один стиль между стилем html и стилем
.main h1
:
.main {
width: 740px;
margin: 0 auto;
padding: 0 10px;
border: 4px solid white;
background: transparent url(images/bg_banner.jpg) no-repeat;
}
Щелкните кнопкой мыши после закрывающей скобки
}
для стиля html
, нажми- те
Enter и введите код, представленный выше. Вам не обязательно создавать
Глава 6. Форматирование текста 203стиль именно в этом месте, чтобы он исправно работал. Однако в организаци- онных целях размещение стиля, управляющего тегом , перед другими стилями, которые форматируют теги внутри этого , кажется логичным. Свойство width устанавливает общую ширину этого (и содержимого внут- ри него), по существу превращая страницу в документ шириной 740 пикселов. Значения свойства margin здесь — 0 auto — добавляют 0 пикселов пространства над и под и устанавливают для правого и левого полей параметр auto , центрирующий этот тег посередине окна браузера. Свойство padding добавляет пространство внутри раздела, отталкивая содержимое внутри от линии границы. Наконец, мы также поместили изображение в фоне
Два этих последних стиля не имеют ничего общего с форматированием текста, но если вы просмотрите страницу, то увидите, что благодаря им он выглядит намного лучше за исключением двух заголовков. Первый из них недостаточно жирный, а второй должен появляться под недавно добавленным рисунком.
4. Добавьте один последний стиль сразу после стиля
.main h1
:
.main h1 strong {
font-size: 150px;
color: white;
line-height: 1em;
em;
}
HTML для заголовка выглядит следующим образом:
|
|
|
Скачать 20.28 Mb.
_url(images/bg_body.png)_repeat-x;){kind=link}