Технологические основы
Разница между ними заключается в том, что при визуальном отображении
страницы следующие друг за другом блочные элементы располагаются
вертикально, a BHyTpncTpo4Hbie — горизонтально. Иными
словами, любой блочный элемент всегда разрывает строку,
a BHyTpncTpo4HbM — нет.р>
Абзац является примером блочного
элемента — он всегда начинается с новой строки. Любой
элемент, который следует за абзацем, будет также перенесен на новую
строку.р>
[Листинг 3.2. Код файла stylel .ess
/* Правило для тела веб-страницы */
body {
color: rgb(0, 102, 0); /* Темно-зеленый цвет текста */
background-color: rgb(204, 255, 204); /* Светло-зеленый
слабонасыщенный цвет фона */
}
/* Правило для всех заголовков первого уровня */
hi {
color: rgb(255, 255, 255); /* Белый цвет текста */
font-family: Tahoma, Arial, sans-serif; /* Шрифт */
font-size: 150%; /* Размер шрифта в полтора раза больше,
чем у основного текста страницы */
}
Веб-страница, описанная в вышеприведенных листингах, в графическом
браузере будет выглядеть так, как показано на рис. 3.7.
Назначение тех или иных свойств и значений кратко раскрывается в
комментариях к коду. Более подробно о различных свойствах CSS мы будем
беседовать в последующих разделах данной главы ив следующей главе.
Пока же хочется остановиться на том, почему каскадные листы стилей
называются каскадными.
Нетрудно видеть, что во внешнем листе стилей style2.css содержится
правило, определяющее представление заголовков первого уровня:
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 127
hi {
color: rgb(255, 255, 255);
font-family: Tahoma, Arial, sans-serif;
font-size: 150%;
}
I…. .». ! Г /^.’/^..Т.^М’ЭД^^… ¦¦•••¦•- J
^4в*Ц’а*?^- Щ i&&i&t&fa&*.’
Элементы логической оазметки HTML
Все ‘:>леменш лспгчеекой ргеметкп можно подразделять на два типа- блочные (block)
и внутрпстрочшле {inline)
Рачница между нтши заключается в том, что при вюуалъном отображении страшимы
следующие друг за другом олхучлыя элементы располагаются вертикально. а
внутриетрочные — горгпошально. Ннъшл словами любой блочный элемент всегда
разрывает строку, я Енутрпетрочный — нет
АСнан является примером блочного элемента — он всегда начинается с ношш
строки. Любой элемент, который следует за абзацем, будет также перенесен на
миную строку.
|?
Рис. 3.7. Отображение страницы index.html в окне графического браузера
Но и во внутреннем листе стилей тоже содержится правило для заголовков
первого уровня — но уже совсем другое:
hi {
background-color: rgb(0, 102, 0) ;
}
Налицо конфликт. В данном случае он разрешается просто: свойство,
определенное позднее, добавляется к ранее определенным свойствам. Иными
словами, два правила, приведенные выше, эквивалентны одному:
hi {
color: rgb(255, 255, 255);
font-family: Tahoma, Arial, sans-serif;
font-size: 150%;
background-color: rgb(0, 102, 0) ;
}
Если же несколько правил противоречат друг другу (к примеру, если в одном
из них определяется белый цвет для заголовков первого уровня, в другом —
128
Часть I. Технологические основы
желтый, а в третьем — и вовсе зеленый), браузер будет руководствоваться
принципом приоритетности.
Листы стилей образуют каскад, выстраиваясь в цепочку приоритетности.
Так, каждое правило характеризуется весом и специфичностью. Правила
листа стилей, определенного разработчиком (автором документа), имеют
больший вес, нежели правила, заданные в пользовательском листе стилей. Те, в
свою очередь, обладают большим весом по отношению к правилам,
определенным браузером по умолчанию.
Правила, соответствующие более специфичным селекторам, «сильнее», чем
правила, относящиеся к более общим селекторам.
Если несколько противоречащих друг другу правил одинаковы по весу и
специфичности, применяется последнее из них. При этом правила,
содержащиеся в импортируемых (при помощи директивы eimport) листах стилей,
предшествуют любым правилам импортирующего листа стилей.
Внутри или снаружи — «против» и «за»
Учебный пример, описанный в листингах 3.1—3.3, иллюстрирует
использование возможных способов связи листов стилей с HTML-документами.
|
5th Фев 2011
|
Теги:
|