Листинг 13.10
#navbar A: link, #navbar A: visited { color: #576C8C; text-decoration: none }
#navbar A: focus, #navbar A: hover, #navbar A: active { color: #576C8C; text-decoration: underline }
Стили из листинга 13.10 задают параметры гиперссылок полосы навигации. Отметим, что здесь применяются комбинированные стили, содержащие указание на список navbar, который формирует полосу навигации, — так проще и нагляднее.
Вот стиль, задающий параметры первой буквы первого абзаца в контейнере cmain (т. е. в основном содержимом Web-страницы):
#cmain > P: first-child: first-letter { font-size: 18pt; font-wight: bold }
Он представляет собой комбинированный стиль, содержащий целых три специальных селектора, и весьма сложен. Поэтому рассмотрим его по частям.
- #cmain > P — абзац должен быть непосредственно вложен в контейнер cmain.
- #cmain > P: first-child — помимо того, абзац должен быть первым дочерним элементом своего родителя (данного контейнера).
- #cmain > P: first-child: first-letter — ну и, собственно, указываем на первую букву данного абзаца. Именно к ней будет привязан этот стиль.
Обратим внимание — мы специально указали, что абзац должен быть непосредственно вложен в контейнер cmain. Если мы этого не сделаем, написав так:
#cmain P: first-child: first-letter { font-size: 18pt; font-weight: bold }
стиль будет применен и к абзацу, который вложен в тег большой цитаты — ведь этот абзац также будет первым дочерним элементом своего родителя. А нам это не нужно.
Вот два одинаковых стиля, задающих выравнивание текста по центру для первой и второй ячеек каждой строки таблицы:
table-html-versions TD: first-child,
table-html-versions TD: nth-child(2) { text-align: center }
Как видим, они представляют собой комбинированный стиль, включающий стилевой класс table-html-versions.
Чтобы данные стили начали действовать на таблицу, нам придется привязать этот
стилевой класс к ее тегу <TABLE>:
<TABLE CLASS="table-html-versions">
<CAPTION>Список версий HTML:</CAPTION>
.
</TABLE>
Вот и все. Добавим приведенные стили в таблицу стилей main.css, внесем исправления в Web-страницу index.htm, сохраним их и откроем Web-страницу index.htm в Web-обозревателе. Хороша, правда?
На этом разговор о представлении Web-страниц закончен.
Дата добавления: 2015-05-08; просмотров: 720;