Атрибут стиля table-layout позволяет указать, как Web-обозреватель будет трактовать размеры, заданные нами для таблицы и ее ячеек:
table-layout: auto|fixed|inherit
— auto — Web-обозреватель может изменить размеры таблицы и ее ячеек, если содержимое в них не помещается. Это обычное поведение.
— fixed — размеры таблицы и ее ячеек ни в коем случае изменяться не будут. Если содержимое в них не помещается, возникнет переполнение, параметры которого мы можем задавать с помощью атрибутов стиля overflow, overflow-x и overflow-y (см. главу 10).
Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).
Пример:
TABLE { table-layout: fixed; overflow: auto }
Прочие параметры
И еще несколько полезных атрибутов стиля.
Атрибут стиля caption-side указывает местоположение заголовка таблицы относительно самой таблицы:
caption-side: top|bottom|inherit
— top — заголовок располагается над таблицей (обычное поведение).
— bottom — заголовок располагается под таблицей.
Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).
Пример:
TABLE { caption-side: bottom }
Атрибут стиля empty-cells указывает, как Web-обозреватель должен выводить на экран пустые (не имеющие содержимого) ячейки:
empty-cells: show|hide|inherit
— show — пустые ячейки будут выводиться на экран. Если для них был задан другой фон, на экран будет выведен фон, а если заданы рамки, будут выведены рамки.
— hide — пустые ячейки не будут выводиться на экран.
Обычное поведение зависит от Web-обозревателя, так что, если это критично, лучше явно задать нужное значение атрибута стиля empty-cells.
Атрибут стиля empty-cells также применяется к самой таблице (тегу <TABLE>).
Пример:
TABLE { empty-cells: hide }
Представление для нашего Web-сайта, часть 7
Вот, собственно, и все атрибуты стиля, задающие параметры таблиц. Теоретическая часть данной главы оказалась совсем короткой…
В качестве практики давайте поработаем над нашей единственной таблицей — списком версий HTML. Сделаем ее более удобочитаемой.
Сначала, как обычно, сформулируем перечень ее параметров.
— Внешние отступы сверху и снизу таблицы — 10 пикселов. Пусть таблица будет визуально отделена от "соседей".
— Рамка вокруг самой таблицы — тонкая, сплошная, цвет #B1BEC6.
— Будут выводиться только рамки, разделяющие ячейки. Таблицы с такими рамками более привычны.
— Внутренние отступы в ячейках — 2 пиксела.
— Рамки ячеек — тонкие, точечные, цвет #B1BEC6.
— Выравнивание текста заголовка таблицы — по левому краю.
Осталось написать CSS-код. Листинг 12.4 содержит исправленный фрагмент таблицы стилей main.css.
Листинг 12.4
TABLE { font-size: 10pt; margin: 10px 0px; border: thin solid #B1BEC6; border-collapse: collapse }
.
TD, TH { padding: 2px; border: thin dotted #B1BEC6 }
CAPTION { text-align: left }
Здесь мы дополнили стиль переопределения тега <TABLE> и создали стили переопределения тегов <TD>, <TH> и <CAPTION>. Они столь просты, что не требуют комментариев.
Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. И полюбуемся на таблицу. Рамки и отступы явно пошли ей на пользу.
Что дальше?
В этой главе мы научились задавать параметры таблиц, используя изученные ранее атрибуты стиля, а также познакомились с новыми атрибутами стиля, специфичными именно для таблиц. И привели нашу единственную таблицу в удобный для чтения вид.
В следующей главе мы завершим изучение CSS рассмотрением специальных селекторов. Это невероятно мощное средство, позволяющее привязать стиль к нужному элементу Web-страницы неявно, не пользуясь ни стилевыми классами, ни именованными стилями, предлагает нам стандарт CSS 3. Который все никак не примут…
Глава 13
Специальные селекторы
В предыдущих главах части II мы изучали, в основном, атрибуты стилей CSS. Их очень много; одни задают параметры шрифта, другие — параметры фона, третьи — параметры отступов и пр. Можно сказать, что нет такого параметра, влияющего на представление элементов Web-страницы, который мы не могли бы задать, пользуясь средствами CSS.
В этой главе, последней в данной части, мы поговорим о селекторах стилей. Да-да, тех самых селекторах, с которыми мы познакомились еще в главе 7 и о которых, казалось, знаем все (ну, или почти все). Стили переопределения тегов, стилевые классы, именованные и комбинированные стили — что там может быть нового?
Может. Специальные селекторы.
Специальный селектор — это селектор, неявно привязывающий стиль к элементу Web-страницы согласно более сложному, чем имя тега, критерию. Таким критерием может быть, например, порядковый номер элемента в родительском элементе, указание на определенную часть содержимого абзаца (первую строку или первую букву), состояние гиперссылки (посещена она или нет) и пр. Обычно специальные селекторы используют в комбинированных стилях, чтобы сделать их более конкретными.
Существует несколько разновидностей специальных селекторов, которые сейчас и рассмотрим.
Комбинаторы
Комбинаторы — разновидность специальных селекторов, привязывающая стиль к элементу Web-страницы на основании его местоположения относительно других элементов.
Комбинатор + позволяет привязать стиль к элементу Web-страницы, непосредственно следующему за другим элементом. При этом оба дочерних элемента должны быть вложенными в один и тот же родительский:
<элемент 1> + <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который должен непосредственно следовать за элементом 1.
Листинг 13.1
H6 + PRE { font-size: smaller }
.
<H6>Это заголовок</H6>
<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>
<P>А этот — обычным шрифтом.</P>
<H6>Это заголовок</H6>
<P>И этот — обычным шрифтом.</P>
<PRE>И этот — обычным шрифтом.</PRE>
Стиль, описанный в листинге 13.1, будет применен только к первому тексту фиксированного форматирования, т. к. он непосредственно следует за заголовком шестого уровня.
Комбинатор ~ (тильда) позволяет привязать стиль к элементу Web-страницы, следующему за другим элементом и, возможно, отделенному от него другими элементами. При этом оба дочерних элемента должны быть вложенными в один и тот же родительский:
<элемент 1> ~ <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который должен следовать за элементом 1. При этом элемент 2 может быть отделен от элемента 1 другими элементами.
Листинг 13.2
H6 + PRE { font-size: smaller }
.
<H6>Это заголовок</H6>
<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>
<P>А этот — обычным шрифтом.</P>
<H6>Это заголовок</H6>
<P>И этот — обычным шрифтом.</P>
<PRE>А этот — уменьшенным шрифтом.</PRE>
Стиль из листинга 13.2 будет применен к обоим текстам фиксированного формата: и тому, что непосредственно следует за заголовком шестого уровня, и тому, который отделен от заголовка абзацем.
Комбинатор > позволяет привязать стиль к элементу Web-страницы, непосредственно вложенному в другой элемент:
<элемент 1> > <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который непосредственно вложен в элемент 1.
Листинг 13.3
BLOCKQUOTE + P { font-style: italic }
.
<BLOCKQUOTE>
<P>Этот абзац будет набран курсивом.</P>
<DIV>
<P>А этот абзац — обычным шрифтом.</P>
</DIV>
</BLOCKQUOTE>
Стиль из листинга 13.3 будет применен только к абзацу, непосредственно вложенному в большую цитату. На второй абзац, последовательно вложенный в большую цитату и блочный контейнер, этот стиль действовать не будет.
Комбинатор <пробел> позволяет привязать стиль к
