HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
TR: not(:nth-child(1)) { background-color: grey }
Псевдокласс * ("звездочка") обозначает любой элемент Web-страницы. Пример:
#cmain > *:first-child { border-bottom: medium solid black }
Этот стиль будет применен к первому элементу любого типа, который непосредственно вложен в контейнер cmain.
Представление для нашего 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, сильно упрощающей работу программистов — нас с вами. Так что впереди еще много интересного!
ЧАСТЬ 3. Поведение Web-страниц. Web-сценарии
ГЛАВА 14. Введение в Web-программирование. Язык JavaScript