|
|
Книга css3 3е издание Серия Бестселлеры OReilly
вы можете задать для него определенное зна- чение верхнего поля и размер шрифта. Просто добавьте другой стиль, напри- мер, такой:
h1 {
margin-top: 5px;
font-size: 2.5em;
}
Этот стиль появится в таблице стилей после групповых селекторов, удаляющих поля и изменяющих размер шрифта, поэтому благодаря каскаду (см. гл. 5) но- вые значения будут иметь приоритет.
Файл reset.css вы найдете в папке
17
обучающих материалов. Просто скопи- руйте код из этого файла в свои таблицы стилей.
ПРИМЕЧАНИЕ
Некоторые разработчики используют при решении неоднообразия стилей браузеров другой подход.
Проект Normalize.css (http://nicolasgallagher.com/about-normalize-css/) предназначен для предостав- ления однородных исходных стилей, сохраняя при этом основные различия в HTML-тегах. например, вместо приведения к единому размеру заголовков и абзацев Normalize.css сохраняет различные размеры заголовков. В проект также включено множество других стилей, предназначенных для устранения недостатков, присущих некоторым браузерам.
Использование селекторов потомков
Классы и ID (идентификаторы) отлично подходят для обозначения конкретных тегов, которые необходимо стилизовать. Например, вы можете добавить класс к абзацу и задать, что только один абзац будет иметь внешний вид, определенный в стилевом классе
.intro
. Поскольку добавить класс или иден- тификатор к тегу не составит никакого труда, многие разработчики взяли моду добавлять их ко всем элементам (или почти ко всем), что не может не вызывать беспокойства. У профессионалов есть даже диагноз этому заболеванию — тяга
к классификации. Добавление класса к каждому тегу — это не только лишняя трата времени, но и замедление загрузки HTML. К тому же есть лучший способ управления тегами, не прибегая к слишком большому количеству классов или идентификаторов, — использование селекторов потомков.
Селекторы потомков — мощный инструмент для эффективного создания сай- тов. Как мы обсуждали в гл. 3, они позволяют точно указать теги, для которых вы хотите задать стили. В большинстве случаев нужно отформатировать все ссылки навигационной панели одинаково, но это не значит, что нужно отформатировать все ссылки на странице таким же образом. Нужно как бы сказать браузерам:
«Форматируйте так только ссылки в навигационной панели», не применяя класс стиля к каждой из этих ссылок. Другими словами, нам нужна возможность фор- матирования одинаковых HTML-элементов по-разному, в зависимости от того, где они располагаются, а это как раз то, что предлагают селекторы потомков
(рис. 17.5).
560 Часть 4. CSS для продвинутых Рис. 17.5. Один и тот же HTML-код был вставлен в левую боковую панель и в область справа. При использовании селекторов потомков идентичные HTML-теги ( ,
, и - ) форматируются по-разному, в зависимости от их расположения на странице
Разбивайте страницы на разделы
Одним из самых главных элементов эффективного использования селекторов по- томков является применение тега
. Поскольку этот тег позволяет создавать логические разделы на странице, вы можете применять его для идентификации различных элементов разметки, таких как баннер, боковая панель, колонка текста и т. д. Как мы обсуждали во врезке «Информация для новичков. HTML-теги и » в разделе «Селекторы классов: точное управление» гл. 3, можно орга- низовать содержимое страницы в блоки, задавая для каждого HTML-тег
Сгруппируйте заголовок текста и список ссылок для навигации по страницам: The CosmoFarmer Revolution
После добавления идентифицируйте его для CSS с помощью атрибута class ( ). Если вы хотите вставить один и тот же тип эле- мента разметки несколько раз на странице (например, несколько врезок в отдель- ной истории), используйте класс. Предположим, что список ссылок в HTML-коде, приведенном выше, появля- ется дважды на странице: в начале и в конце истории. Вы добавляете к нему класс следующим образом: >
The CosmoFarmer Revolution
Глава 17. Совершенствуем навыки работы с CSS 561 СОВЕТ Вам не всегда нужно добавлять тег , чтобы разработать стиль группы элементов. Если бы код, приведенный выше, содержал только неупорядоченный список ссылок и не включал тег
|
|
|
Скачать 20.28 Mb.