Представление для нашего Web-сайта, часть 8

Представление для нашего Web-сайта, часть 8

Да, специальные селекторы — мудреная штука… Разобраться в них без хорошей практики невозможно. Так давайте попрактикуемся.

Вот список параметров Web-страниц нашего Web-сайта, которые мы зададим с помощью специальных селекторов.

— Текст непосещенных и посещенных гиперссылок — не подчеркнут, цвет #576C8C (темно-синий).

— Текст посещенных гиперссылок, расположенных в полосе навигации, — не подчеркнут, цвет #576C8C. Мы задали для непосещенных и посещенных гиперссылок в полосе навигации одинаковые параметры — так принято.

— Текст посещенных гиперссылок, не расположенных в полосе навигации, — не подчеркнут, цвет #A1AFBA (синий).

— Текст активной гиперссылки — подчеркнут, цвет #576C8C.

— Текст гиперссылки, на которую наведен курсор мыши, — подчеркнут, цвет #576C8C.

— Текст гиперссылки, имеющей фокус ввода, — подчеркнут, цвет #576C8C.

— Шрифт первой буквы первого абзаца в контейнере cmain — 18 пунктов и полужирный.

— Выравнивание текста в ячейках первого и второго столбцов таблицы — списка версий HTML — по центру. Эти ячейки содержат исключительно числа, и центральное выравнивание для них подходит больше.

Чтобы воплотить задуманное, нам потребуется добавить в таблицу стилей main.css несколько новых стилей (листинг 13.9).

Листинг 13.9

A: link { color: #576C8C; text-decoration: none }

A: visited { color: #A1AFBA; text-decoration: none }

A: focus, A: hover, A: active { color: #576C8C; text-decoration: underline }

Стили из листинга 13.9 задают параметры гиперссылок, расположенных вне полосы навигации. Здесь мы активно используем псевдоклассы гиперссылок.

Листинг 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-страниц закончен.

Что дальше?

В этой, последней главе части II мы завершили рассмотрение CSS изучением специальных селекторов. И, разумеется, применили новые знания на практике.

Разговор о представлении Web-страниц и стилях CSS, с помощью которых оно создается, был долгим и продуктивным. Мы изучили множество атрибутов стиля, управляющих самыми разными параметрами элементов Web-страниц: шрифтом, цветом, фоном, выравниванием, отступами, рамками и др. А наш Web-сайт стал выглядеть намного лучше.

В части III мы будем рассматривать поведение Web-страниц. Мы познакомимся с принципами Web-программирования, языком программирования JavaScript и библиотекой Ext Core, сильно упрощающей работу программистов — нас с вами. Так что впереди еще много интересного!

Данный текст является ознакомительным фрагментом.