Листинг 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; просмотров: 712;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.005 сек.