больше тегов
, они оба выделены полужирным, в то время как текст абзацев меньше и не выделен полужирным шрифтом; ссылки подчеркнутые и имеют синий цвет, а у маркированных списков есть отступ. В стандарте HTML
Глава 5. Управление сложной структурой стилей: каскадность 129нет ничего, что определяло бы все это форматирование: браузеры просто добавля- ют его для того, чтобы обычный HTML был более читабельным. Разные браузеры обрабатывают теги очень похоже, но все же неодинаково. Так, например, Safari и Firefox используют свойство padding для создания отсту- па в маркированных списках, а Internet Explorer применяет свойство margin . Кроме того, вы сможете найти небольшие различия в размерах тегов в разных браузерах и обнаружить вовсе вводящее в заблуждение использование отступов самыми рас- пространенными на сегодняшний день браузерами. Из-за этих несоответствий вы столкнетесь с проблемами, когда, например, Firefox добавит отступ от верхнего края, а Internet Explorer этого не сделает. Такого рода проблемы не ваша вина — они вытекают из различий во встроенных в браузер стилей. Для предотвращения кросс-браузерного несоответствия лучше всего начинать таблицу стилей с чистого листа. Другими словами, удалить встроенное в браузер форматирование и добавить собственное. Концепция устранения стилей браузера называется сбросом стандартных стилей (CSS-сбросом). В этом разделе я введу вас в суть дела. В частности, есть базовый набор стилей, который вы должны включить в верх- нюю часть своей таблицы стилей. Они устанавливают базовые значения для свойств, которые обычно по-разному обрабатываются во всех браузерах. Рассмотрим шаблон сброса стандартных стилей: html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.2; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em list-style: square; 130 Часть 1. Основы CSS } table { border-collapse: collapse; border-spacing: 0; } ПРИМЕЧАНИЕ Показанный выше код CSS-сброса взят из известного и авторитетного источника, составленного Эри- ком Мейером (Eric Meyer), который можно найти по адресу http://meyerweb.com/eric/tools/css/reset. Первый стиль — очень длинный групповой селектор, затрагивающий наиболее распространенные теги и «обнуляющий» их. Он удаляет поля и отступы, устанав- ливая 100%-ный размер шрифта и убирая выделения полужирным. Благодаря этому шагу ваши теги смотрятся практически одинаково (рис. 5.5). Но так и нуж- но — ведь вы хотите начать с чистого листа, а затем добавить собственное форма- тирование, чтобы все браузеры согласованно отображали ваш HTML-код. Рис. 5.5. Базовый сброс стандартных стилей на этой странице устраняет небольшие различия в том, как разные браузеры отображают основные теги HTML Второй селектор ( article , aside , details …) является еще одним групповым селектором, помогающим устаревшим браузерам правильно отображать новые теги HTML5. Третий селектор стиля ( body ) устанавливает однообразное значе- ние свойства line-height (пространства между строками в абзаце). Информация о свойстве line-height будет дана в следующей главе. Глава 5. Управление сложной структурой стилей: каскадность 131ПРИМЕЧАНИЕ Вам не нужно вводить этот код самостоятельно. Вы найдете файл с именем reset.css в папке 05 обуча- ющих материалов с сайта www.sawmac.com/css3, где есть базовый файл для сброса стандартных сти- лей. Просто скопируйте стили из этого файла и вставьте их в собственные таблицы стилей. Еще один подход к сбросу, обсуждаемый далее в книге, можно найти в учебных файлах гл. 17 в папке 17. Четвертый и пятый стили (для тегов
и
) устанавливают согласованные отступы от левого края и определенное форматирование (далее в книге будет пред- ставлена стилизация списков), а последний стиль упрощает добавление рамок к ячей- кам таблицы (польза от установки этого стиля будет рассмотрена далее).
Обучающий урок: механизм каскадности
в действии
В этой обучающей программе вы увидите, как элементы взаимодействуют между собой и конфликтуют, что приводит к неожиданным результатам. Для начала по- смотрите на базовую страницу, упомянутую выше, на которой были сброшены стан- дартные стили. Кроме того, есть несколько других стилей, обеспечивающих простую разметку. Затем мы создадим два стиля и понаблюдаем за действием механизма каскадности. Мы также рассмотрим, как наследование влияет на теги веб-страницы и как браузер решает конфликты CSS-стилей. Наконец, вы узнаете, как решаются проблемы механизма каскадности.
Чтобы начать обучающий урок, вы должны загрузить файлы с учебным мате- риалом. Как это сделать, описывается в конце гл. 2. Файлы текущей обучающей программы находятся в папке
05
Сброс стандартных стилей и создание стилей
с чистого листа
Для начала посмотрите на ту страницу, с которой будете работать.
1. В браузере откройте страницу cascade.html из папки
05
(см. рис. 5.5).
Страница выглядит очень просто: два столбца (один из них имеет синий фон) и много однотипного текста. К этому файлу уже применялись некоторые стили, поэтому откройте CSS-код в текстовом редакторе и просмотрите его.
2. Откройте файл main.css из папки
05
в текстовом редакторе либо редакторе веб- страниц.
Это внешняя таблица стилей, которую использует файл cascade.html
. В ней уже есть несколько стилей: первые четыре сбрасывают стандартные стили, что мы обсуждали на предыдущей странице. Они устраняют основные стили браузера, поэтому весь текст пока выглядит одинаково. Скоро вы будете создавать свои собственные стили, чтобы эта страница смотрелась более эффектно.
3. Последние два стиля — стили классов
.main и
.sidebar
— создают два столбца, показанные на рис. 5.5. HTML разделен на два тега
, каждый из которых имеет собственный класс. Стили классов здесь, по существу, размещают два тега
так, чтобы они отображались бок о бок в виде столбцов (как управлять макетом страницы и создавать столбцы, вы узнаете при изучении ч. 3).
132
Часть 1. Основы CSS
Сначала добавим пару стилей, чтобы улучшить общий вид страницы и ее верх- ний заголовок.
4. В файле styles.css добавьте два стиля в нижней части таблицы стилей за по- следней скобкой
}
стиля
.sidebar
:
body {
color: #B1967C;
font-family: "Palatino Linotype", Baskerville, serif;
padding-top: 115px;
background: #CDE6FF url(images/bg_body.png) repeat-x;
width: 800px;
margin: 0 auto;
}
h1 {
font-size: 3em;
font-family: "Arial Black", Arial, sans-serif;
margin-bottom: 15px;
}
Первый стиль добавляет фоновое изображение и цвет для страницы, а также устанавливает для нее фиксированную ширину. Сохранив этот файл и просмо- трев страницу cascade.html в браузере (рис. 5.6), вы заметите, что эти атрибуты не наследуются другими тегами — то же изображение, например, не повторяет- ся перед тегами заголовка или абзаца.
Рис. 5.6. Наследование и каскадность в действии: тег
|
Скачать 20.28 Mb.