Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 14 из 62

вверху этой страницы наследует ее шрифт из стиля тега , но получает размер и начертание шрифта из специального стиля тега

Глава 5. Управление сложной структурой стилей: каскадность
133
Свойства font-family и color
, с другой стороны, наследуются, так что другие теги на странице теперь используют шрифт Arial и имеют коричневый цвет. Тем не менее вы увидите, что, хоть верхний заголовок такого же цвета, как и остальной текст на странице, у него другой шрифт — вот наглядный пример каскадности в действии.
Для стиля тега

не было назначено никакого цвета, так что заголовок наследует коричневый цвет, который был применен к тегу

. Но поскольку тег

определяет начертание, он замещает унаследованный шрифт от стиля тега

Создание комбинированных стилей
В этом примере мы создадим два стиля. Один стиль будет форматировать все заго- ловки второго уровня веб-страницы, а другой — более явно определенный стиль — будет реформатировать (повторно форматировать) те самые заголовки, но только из большего, главного столбца веб-страницы.
1. В файле styles.css добавьте следующий стиль в конец таблицы стилей:
h2 {
font-size: 2.2em;
color: #AFC3D6;
margin-bottom: 5px;
}
Этот стиль просто меняет цвет текста, увеличивает размер шрифта тега

и до- бавляет немного пространства под ним. Если вы просмотрите страницу в брау- зере, то увидите, что заголовки

из основного столбца и те же заголовки из правого столбца похожи друг на друга.
Далее создадим стиль для форматирования только тех заголовков второго уров- ня, которые находятся в главном столбце.
2. Вернитесь к файлу styles.css
, щелкните кнопкой мыши сразу после окончания стиля тега

и нажмите клавишу
Enter
, чтобы создать пустую строку. Добавь- те следующий стиль:
.main h2 {
color: #E8A064;
border-bottom: 2px white solid;
background: url(images/bullet_flower.png) no-repeat;
padding: 0 0 2px 80px;
}
Вы только что создали описанный ранее селектор потомка, форматирующий все теги

, которые появляются внутри тега с примененным к нему классом main
. Два столбца текста на этой странице заключаются в теги

с разными названиями применяемых к ним классов. У большего, расположенного слева столбца класс main
, поэтому такой особый стиль будет применяться только к те- гам

внутри этого

Рассматриваемый стиль похож на тот, который вы создали в обучающем при- мере в гл. 2 в шаге 17. Он добавляет подчеркивание и простой цветок к заголов- ку. Этот стиль также определяет оранжевый цвет для текста.
3. Сохраните таблицу стилей и снова просмотрите страницу в браузере (рис. 5.7).

134
Часть 1. Основы CSS
Рис. 5.7. Стили h2 и .main h2 применяются к заголовкам второго уровня из левого столбца этой страницы, причем стиль .main h2 — только к ним
Вы заметите, что у всех заголовков второго уровня (двух в основном столбце и одном в боковом) одинаковый размер, но у тех двух, которые расположены в основном столбце, также есть подчеркивающая линия и изображение цветка.
Поскольку стиль .
main h2
является более специфичным, по сравнению с простым стилем h2
, при возникновении каких-либо конфликтов между ними (в данном слу- чае в свойстве color
) свойства .
main h2
побеждают. Таким образом, хотя заголовки второго уровня в основном столбце получают синий цвет текста от стиля h2
, оран- жевый цвет от более специфичного стиля .
main h2
побеждает.
Однако, так как стиль
.main h2
не задает размер шрифта или нижнего отступа, заголовки в главном столбце получают эти свойства от стиля h2
Преодолеваем конфликты
Поскольку свойства CSS конфликтуют, когда несколько стилей применяются к од- ному и тому же тегу, иногда вы можете обнаружить, что ваши страницы выглядят не так, как вы этого ожидали.
В таком случае вам нужно установить, почему это произошло, и внести измене- ния в селекторы CSS, чтобы каскадность приводила к нужному результату.
1. Вернитесь к файлу styles.css
Сейчас создадим новый стиль для форматирования исключительно абзацев из главного столбца.

Глава 5. Управление сложной структурой стилей: каскадность
135
2. Добавьте следующий стиль в конец таблицы стилей:
.main p {
color: #616161;
font-family: "Palatino Linotype", Baskerville, serif;
font-size: 1.1em;
line-height: 150%;
margin-bottom: 10px;
margin-left: 80px;
}
Этот стиль изменяет цвет, размер и шрифт текста, растягивает строки (свойство line-height
) и регулирует нижние и левые отступы абзацев.
Страница будет выглядеть лучше, если вы выделите абзац, следующий сра- зу за заголовком. Сделав этот абзац крупнее, вы создадите сообщение, на- много лучше концентрирующее внимание. Самый простой способ стилизо- вать один-единственный абзац — создать стилевой класс и применить его к этому абзацу.
3. Добавьте последний стиль к концу таблицы стилей:
.intro {
color: #6A94CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}
Этот стиль изменяет цвет, шрифт и размер, а также немного регулирует отсту- пы. Все, что вы должны сделать, — применить класс к HTML-коду.
4. Откройте файл cascade.html в редакторе веб-страниц. Найдите тег
, который идет после тега