| |
обка Правило Правая фигурная скобка
Рис. 4.4. Правило каскадного списка стилей с одном селектором и тремя
объявлениями
В качестве селектора можно использовать любой HTML-дескриптор, а одно
правило может содержать несколько селекторов. Например, чтобы Web-браузер
применял одно и то же правило к заголовкам уровня 2, тексту абзаца и неупоря-
доченного списка необходимо написать следующее правило:
h2, p, ul {color:green; font-family:arial}
Это правило указывает Web-браузеру выводить на экран заголовки уровня 2,
текст абзаца и неупорядоченного списка шрифтом Arial зеленого цвета. Обратите
внимание, что в качестве селектора могут использоваться совершенно любые
HTML-дескрипторы. Таким образом, правила каскадных списков стилей могут
применяться к изображениям (селектор img) и таблицам (селектор table).
Например, запустите свой любимый текстовый редактор и наберите следую-
щий HTML-код:
CSS-npaBt«io, применяемое к таблице</Ъ1Ъ1е>
<style type="text/css">
table {background:green; color:white; font-size:20px;
position:absolute; left:150px; top:200px}
</style>
</head>
<body>
<п1>Таблица с текстом белого цвета и фоном зеленого цвета</Ы>
<table border="5">
<tr>
<td>CTpoica 1, столбец K/td>
<td>CTpoxa 1, столбец 2</td>
</tr>
Глава 4. Каскадные списки стилей 179
<tr>
<td>CTpoKa 2,
<Ъс1>Строка 2,
</tr>
</table>
</body>
</html>
столбец
столбец
K/td>
2</td>
Как уже известно из вводной части этой главы, код между начальным и ко-
нечным дескрипторами <styiex/styie> описывает правила каскадного списка
стилей. Селектор table указывает браузеру применять правило списка стилей к
содержащимся на странице таблицам. Поэтому в приведенном примере будет со-
здана таблица с зеленым фоном и шрифтом белого цвета размером 20 пикселей.
Более того, Web-браузер поместит таблицу на расстоянии 150 пикселей правее
левой границы и 200 пикселей ниже верхней границы Web-страницы. Сохраните
набранный код в HTML-файле (например, css__Test2.htm) и откройте HTML-
документ в Web-браузере. На экран будет выведена страница, похожая на пока-
занную на рис. 4.5.
., Файл Правка Вид Избранное Сервис Справка •
.^ - JJJI Sii^' З^'
3 http://htmkv8bdesign/ChapterO4/Figure04-05 htm
Таблица с текстом белого цвета и фоном
зеленого цвета
Строка 1, столбец 1;Строка 1, столбец 2]
Строка 2. столбец 11 Строка 2, столбец 21
Рис. 4.5. Web-страница с каскадным списком стилей, форматирующим таблицу
Наследование
При добавлении текстовых элементов на Web-страницу часто один элемент
вставляется в другой. Например, при выделении текста полужирным шрифтом,
как в случае с текстом "полужирный текст" в приведенном ниже примере, фак-
тически элемент полужирного шрифта вставляется в элемент абзаца:
<р>Вы вставляете один элемент в другой всегда, когда помещаете
текст, находящийся в пределах одного набора контейнерных
дескрипторов, в другой набор начального и конечного
дескрипторов. Например, следующий далее
<Ь>полужирный текст</Ь> представляет собой полужирный
элемент, вставленный в элемент параграфа.</р>
При форматировании Web-браузером вставленного элемента сначала он при-
меняет инструкции форматирования, установленные для внешнего элемента, а
затем для внутреннего элемента (если соответствующие правила определены).
Глава 4. Каскадные списки стилей
В терминологии.каскадных списков стилей элемент, содержащийся в другом
элементе, называется дочерним {child), а внешний элемент — родительским
(parent). Таким образом, в предыдущем примере текст, окружающий элемент по-
лужирного текста (<ь>полужирный текст</ь>), является родительским, а сам эле-
мент "полужирный текст" — дочерним. При включении одного типа элемента
страницы в другой тип Web-браузер применяет правила каскадного списка роди-
тельского (т.е. внешнего) элемента стилей и к дочернему (т.е. внутреннему) эле-
менту.
Предположим, например, что имеется каскадный список стилей со следую-
щими правилами:
р {color:blue}
Ь {color:red}
При наличии на Web-странице следующего HTML-кода Web-браузер выведет
На ЭКран текст "Весь текст" СИНИМ цветом И текст "полужирного начертания
будет красным -- включая и полужирный курсив" — красным цветом:
<р>Весь текст <Ь>полужирного начертания будет красным -- включая и
полужирный <±>курсив</1>.</ЬХ/р>
Элемент полужирного текста (т.е. текст, заключенный между начальным и ко-
нечным дескрипторами полужирного текста) является дочерним элементом тек-
ста абзаца. В свою очередь, элемент курсивного текста — это дочерний элемент
элемента полужирного текста, поскольку начальный и конечный дескрипторы
курсивного текста находятся между нача</pre>
</td>
<td align="left" class="row2s" width="5%"> </td>
</tr>
<tr><td class="row3" align="left" width="5%"><a href="/comp/.view-Samouchitelj.po.kreativnomu.webdizajnu.txt.96.html"><img border="0" src="/tpl/l.gif" alt="<<-"></a></td><td class="row3s" align="center" width="20%" valign="middle"><a href="/comp/.view-Samouchitelj.po.kreativnomu.webdizajnu.txt.full.html">[Весь Текст]</a></td><td class="row3s" align="center" width="70%" valign="middle"><br><form action="" method="get">Страница: <input type="text" size="4" name="pg" value="98"> из 389 <input type="submit" value="Открыть"></form></td><td class="row3s" align="center" width="20%" valign="middle"> </td><td class="row3" align="right" width="5%"><a href="/comp/.view-Samouchitelj.po.kreativnomu.webdizajnu.txt.98.html"><img border="0" src="/tpl/r.gif" alt="<<-"></a></td></tr></table>
</body>
</html>
|
