<h2><br>и т. д., унаследуют этот цвет шрифта.<br><b>Ограничения наследования</b><br>Механизм наследования неидеален. Многие CSS-свойства <a href="/glavnaya-misle-ponimanie-sobstvennij-vivod-glava-dejstvie-esli/index.html" title="Главная мысль Понимание, собственный вывод Глава Действие. «Если бы»">вообще не наследуются</a>, например border<br> (позволяющий оформить в рамку элемент веб-страницы). Однако если бы наследование применялось к этому свойству, то все теги, вложенные в эле- мент, были бы одинаковы. Например, если бы вы добавили рамку к <br><body><br>, то она была бы во всех маркированных списках (в каждом пункте, подпункте и т. д.) <br>(рис. 4.2).<br>ПРИМЕЧАНИЕ<br>Полный список CSS-свойств, включая их подробное описание, параметры наследования и т. д., при- веден в приложении 1.<br>Ниже описаны конкретные случаи, когда наследование точно не применяется.<br><br>Как правило, свойства, которые затрагивают размещение элементов на страни- це (отступы (поля), границы (рамки) элементов), не наследуются.<br></div> <div> <br>Глава 4. Механизм наследования стилей<br><b>109</b><br><br>Браузеры используют собственные встроенные стили для форматирования раз- личных тегов. Заголовки обычно отображаются крупным полужирным шриф- том, ссылки — синим цветом и т. д. Даже если определен конкретный размер кегля для текстового содержимого веб-страницы и применен к <br><body><br>, заголовки будут отображены большим по размеру шрифтом. Теги <br><h2><br> будут крупнее <br><h2><br>Точно так же, когда вы устанавливаете цвет применительно к <br><body><br>, гиперссыл- ки веб-страницы все равно будут показаны синим цветом с подчеркиванием.<br><b><span id='Рис._4.2.'>Рис. 4.2. </span></b>Рамка, относящаяся к абзацу (вверху), не наследуется тегами, находящимися внутри<br></div> <div> <br><b>110 </b><br>Часть 1. Основы CSS<br>ПРИМЕЧАНИЕ<br>Очень полезно устранять встроенные стили браузеров — это упростит создание сайтов, совмести- мых с различными типами браузеров. В гл. 5 вы узнаете, как добиться этого.<br>Если возникает конфликт, то побеждает более явно определенный стиль. Дру- гими словами, когда вы применяете CSS-свойство к элементу веб-страницы (напри- мер, устанавливаете размер шрифта для маркированного списка) и оно кон фликтует с наследуемым (например, размером шрифта <br><body><br>), то браузер использует явно опи- санное свойство, более близко относящееся к стилизуемому элементу (в данном случае применяется размер шрифта, определенный для <br><ul><br>).<br>ПРИМЕЧАНИЕ<br>Такие типы конфликтов между стилями встречаются очень часто, и правила, определяющие, как должен вести себя браузер, называются каскадностью и выявляются приоритетом. Подробнее об этом вы узнаете в следующей главе.<br><b><span id='Обучающий_урок:_наследование'>Обучающий урок: наследование</span></b><br>В этом обучающем уроке, состоящем из трех частей, вы увидите, как функциони- рует механизм наследования. Сначала создадим простой селектор типа и пона- блюдаем, каким образом он передает свои стилевые параметры. Затем сделаем класс, который использует наследование для изменения форматирования всей веб-страницы. И наконец, рассмотрим случаи отступления от правил, на которые следует обратить внимание.<br>Файлы текущей обучающей программы находятся в папке с названием <br>04<br> ар- хива, описанного в конце гл. 2.<br><b><span id='Одноуровневое_наследование'>Одноуровневое наследование</span></b><br>Чтобы увидеть и понять, как работает механизм наследования, добавим единствен- ный теговый стиль и посмотрим, как он воздействует на вложенные теги. Все три <a href="/konspekt-uroka-russkogo-yazika-v-9-klasse-tip-uroka-urok-obuch/index.html" title="Конспект урока русского языка в 9 классе Тип урока: урок обучающего сочинения. Цель урока">части этого обучающего урока взаимосвязаны</a>, поэтому сохраняйте свой экспери- ментальный файл в конце каждого урока для его последующего использования.<br>1. Откройте файл inheritance.html в HTML-редакторе.<br>Сейчас добавим в него внутреннюю таблицу стилей.<br>ПРИМЕЧАНИЕ<br>Вообще, в сайтах лучше использовать внешние таблицы стилей по причинам, описанным в гл. 2. <br>Иногда проще начать разработку CSS-дизайна отдельных веб-страниц, используя внутреннюю таб- лицу, как в этом примере, а уже потом преобразовать ее во внешнюю.<br>2. Щелкните кнопкой мыши сразу после закрывающего тега <br>
. Нажмите клавишу
Enter и введите
, обозначающий конец таблицы стилей. Эти теги опре- деляют область, в которой будут находиться команды языка CSS.
Теперь нужно создать стиль, который будет применен ко всем тегам абзацев
ПРИМЕЧАНИЕ
Если используются типы документов HTML 4.01 или XHTML (а не HTML5, как в данном учебнике), к открывающему тегу style нужно добавить атрибут type="text/css":
|
Скачать 20.28 Mb.