Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стили из листинга 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>

<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, сильно упрощающей работу программистов — нас с вами. Так что впереди еще много интересного!

Оглавление книги