Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 53 из 62

, в данном случае намного проще будет воспользоваться абсолютным позицио- нированием. Здесь создается стиль тега для HTML5-тега

, когда он также находится в теге

. Следует помнить, что в шаге 4 мы задали header от- носительную позицию, следовательно, любые теги внутри этого тега, например тег

, позиционируются относительно него, поэтому нулевое значение для свойства right в этом стиле приводит к тому, что правый край панели навигации помещается по правому краю баннера (см. рис. 15.12).
Добавление надписи к фотографии
В гл. 8 мы рассмотрели один из способов добавления подписи к фотографии
(см. раздел «Обучающий урок 1: совершенствуем изображения»). В примерах той главы подписи располагались под фотографиями, чего мы и добиваемся в большинстве случаев. Но когда-нибудь может понадобиться добавить надпись непосредственно на фотографию, как, например, субтитры в телевизионных но- востях, которые показываются в нижней части экрана.
1. Откройте файл hats.html в текстовом редакторе.
На этой странице находится галерея фотографий. HTML-код для одного изо- бражения имеет следующий вид:

522
Часть 3. Макет страницы alt="Panama">

Nam libero tempore. Soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus

В этом примере используются HTML5-теги

и

. Тег

обычно является тегом блочного уровня, но поскольку нужно, чтобы изображе- ния располагались рядом друг с другом, начните с превращения их в линейные элементы.
ПРИМЕЧАНИЕ
Поскольку Internet Explorer 8 и более ранние версии не могут применять стиль к HTML5-тегам, чтобы эти браузеры справились с программой, нужно добавить немного кода JavaScript. Чтобы понять, как работает эта схема, прочитайте врезку «Обходной прием. Как заставить Internet
Explorer 8 понимать HTML5» в разделе «Дополнительные теги в HTML5» гл. 1.
2. Ниже ранее созданного стиля header nav добавьте еще один стиль.
.gallery figure {
display: inline-block;
width: 300px;
height: 210px;
margin: 15px;
position: relative;
}
Этот код создает селектор потомков, который применяется ко всем тегам

, сгруппированным внутри тега

с классом gallery
. Здесь используется селек- тор потомков, потому что к этой странице могут добавляться другие теги figure
, не являющиеся частью галереи, которые должны быть отформатированы по-дру- гому. Этот селектор потомков предназначен только для тех тегов

, кото- рые нас интересуют в данный момент.
После придания тегу figure свойств линейного блочного элемента (
inline-block
) все изображения смогут находиться рядом друг с другом. Значения width и height соответствуют ширине и высоте изображений. То есть нужно, чтобы теги

были достаточно большими, чтобы вместить изображения. Значение margin до- бавляет небольшое пространство вокруг изображений, чтобы они не наталкива- лись друг на друга. И наконец, объявление position: relative устанавливает новый контекст позиционирования, чтобы каждую надпись можно было пози- ционировать относительно относящегося к ней изображения.
Теперь настал черед позиционирования надписей.
3. Ниже только что добавленного стиля добавьте еще один стиль:
.gallery figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;

Глава 15. Позиционирование элементов на веб-странице
523
background-color: rgb(153,153,153);
background-color: rgba(153,153,153,.9);
}
Теги

получают абсолютное позиционирование с использованием всех четырех квадрантов позиционирования: top
, bottom
, left и right
. По суще- ству, надписи будут распространяться на все изображение, но помещаться не- много ниже его верхнего края и немного выше нижнего края (фактически на
15 % ниже и выше). Использование всех четырех настроек означает, что вам не нужно переживать за настройку ширины или высоты надписей, вместо этого вы оставляете ее на усмотрение браузера.
И наконец, устанавливаются два объявления фонового цвета background-color
Первое предназначено для Internet Explorer 8 и более ранних версий (не пони- мающих настроек прозрачности в формате цвета RGBA). А второе — для со- временных браузеров, с установкой полупрозрачного фона поверх каждого изо- бражения, что означает, что изображения можно видеть через фон надписей.
Теперь займемся простыми улучшениями текста.
4. Отредактируйте только что созданный стиль, добавив внизу код, выделенный полужирным шрифтом:
.gallery figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgb(153,153,153);
background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: Titillium, Arial, sans-serif;
font-weight: 400;
font-size: .9em;
color: white;
}
Отступы (padding) создают небольшую разрядку для текста, а другие свойства задают шрифт, размер и цвет.
Если теперь просмотреть страницу, можно увидеть, что надписи появляются над всеми изображениями. Далее нужно будет изменить стиль, чтобы надписи появлялись только при прохождении указателя мыши посетителя над изобра- жением. Начнем со скрытия надписей.
5. Добавьте к стилю opacity: 0
:
.gallery figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgb(153,153,153);

524
Часть 3. Макет страницы background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: Titillium, Arial, sans-serif;
font-size: .9em;
font-weight: 400;
color: white;
opacity: 0;
}
Установка для непрозрачности opacity значения
0
делает надпись невидимой.
Для скрытия надписей можно также воспользоваться объявлением display: none;
или visibility: hidden;
, но выбранный способ позволяет анимировать значение непрозрачности путем использования CSS-свойства transition
, и этот эффект будет вскоре добавлен. Но сначала нужно добавить состояние
:hover
, чтобы при прохождении над изображением указателя мыши посетителя появ- лялась надпись для этого изображения.
6. Добавьте к таблице стилей следующий код: figure:hover figcaption {
opacity: 1;
}
Этот хитрый фрагмент кода CSS можно перевести как «при прохождении ука- зателя мыши посетителя над элементом figure
(
figure:hover
), установить не- прозрачность надписи в 1». То есть при перемещении указателя мыши над тегом

его тег-потомок

становится видимым. Сохраните страницу и посмотрите, что получилось. Когда указатель мыши проходит над изображе- нием, должна появляться надпись. Мы можем анимировать этот эффект, до- бавив к стилю
.gallery figcaption переход.
7. Отредактируйте стиль
.gallery figcaption
, чтобы он приобрел следующий вид
(добавления выделены полужирным шрифтом): figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgb(153,153,153);
background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: Titillium, Arial, sans-serif;
font-size: .9em;
font-weight: 400;
color: white;
opacity: 0;
-webkit-transition: opacity .75s ease-out;
-moz-transition: opacity .75s ease-out;
-o-transition: opacity .75s ease-out;
transition: opacity .75s ease-out;
}

Глава 15. Позиционирование элементов на веб-странице
525
Вы добавили свойство transition
. Разумеется, чтобы оно заработало во многих браузерах, нужно добавить соответствующие префиксы производителей (
-webkit- и т. д.). Поскольку Internet Explorer 9 и более ранние версии не понимают пере- ходы, но здесь это не создает проблем, надписи все равно будут появляться в этих браузерах. Они будут просто моментально появляться и исчезать, а не постепен- но становиться видимыми и растворяться.
И наконец, нужно привязать сведения об авторских правах к нижней части окна браузера, используя фиксированное позиционирование.
8. Добавьте к таблице стилей еще один, последний стиль: footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: black;
color: white;
}
Как уже говорилось, фиксированное позиционирование позволяет «привязать» элемент к определенному месту в окне браузера. В данном случае привязка осуществляется к нижней части страницы (
bottom: 0
) и производится распро- странение на всю ширину страницы (благодаря объявлениям left: 0
и right: 0
).
Последние три объявления просто добавляют немного пространства вокруг нижнего колонтитула, а также придают ему черный фон и белый текст. В окон- чательном виде страница должна выглядеть, как показано на рис. 15.13. Полную версию этого урока можно найти в папке
15_finished
Рис. 15.13. Используя искусный код CSS, можно без особого труда заставить надписи плавно появляться при наведении указателя на изображение (отмечено кружком)

ЧАСТЬ 4
CSS для продвинутых
Глава 16. CSS для распечатываемых веб-страниц
Глава 17. Совершенствуем навыки работы с CSS

16
CSS
для распечатываемых
веб-страниц
Возможно, в это сложно поверить, но есть люди, которым хочется увидеть вашу веб-страницу на бумаге. Люди, занимающиеся покупками на вашем сайте, могут, например, захотеть распечатать чек. Если вы ведете кулинарный сайт, то, конечно же, вам понадобится предоставить своим посетителям возможность распечатать их любимые рецепты или карточки для своей кухонной картотеки. Даже если ваш сайт состоит в основном из текстовых статей, предназначенных для чтения в ре- жиме онлайн, найдутся посетители, пожелавшие получить распечатку для класси- фикации проекта или архивирования. Так что же происходит с вашим тщательно разработанным дизайном, когда чернила попадают на бумагу? Белый текст на чер- ном фоне может привести к пустой трате чернил, а некоторые браузеры, возможно, даже не распечатают фон. Действительно ли пользователям нужно видеть навига- ционную панель вашего сайта распечатанной? Наверное, нет.
Веб-дизайнеры обычно выходили из этого затруднительного положения, созда- вая отдельные, предназначенные для печати, версии своих сайтов. То есть копию сайта, отформатированную специально для печати. Однако это означает не только больший объем работы, но и изменение множества файлов каждый раз, когда стра- ница нуждается в редактировании. К счастью, CSS предлагает лучший способ — возможность сделать так, чтобы страница выглядела одним способом, когда ото- бражается на экране, и другим — при печати (рис. 16.1). Использование специальных стилей для принтера позволяет сэкономить бумагу и чернила, давая возможность посетителям распечатывать лишь необходимую информацию и оставляя при этом все визуальные излишества на экранах мониторов. Обратите внимание, как на рис. 16.1 печатная версия расширилась и занимает всю ширину страницы. Кроме того, в ней отсутствуют логотип, навигационная панель и реклама. В чем же здесь секрет? В аппаратно-зависимых таблицах стилей.
Как работают аппаратно-зависимые
таблицы стилей
Создатели CSS основательно подошли к разработке аппаратно-зависимых таблиц стилей. Они учли все возможные способы, которыми люди могут просматривать

528
Часть 4. CSS для продвинутых сайты. Разработчики понимали, что, хотя большинство пользователей просматри- вают страницы на мониторе компьютера, иногда они могут захотеть и распечатать текст с сайта. Вдобавок у новых устройств для интернет-серфинга, таких как мобиль- ные телефоны, карманные компьютеры и телевизоры, есть свои собственные уни- кальные требования, когда дело доходит до работы с веб-страницами.
Рис. 16.1. Страница сайта, посвященного веб-разработке (A List Apart), выглядит привлекательной на экране (вверху) и простой и понятной на бумаге (внизу)

Глава 16. CSS для распечатываемых веб-страниц
529
Чтобы обеспечить все мыслимые методы просмотра сайтов, CSS позволяет вам создавать стили и таблицы стилей, которые предназначаются для определенных типов устройств. CSS распознает десять различных типов устройств: all
, braille
, embossed
, handheld
, print
, projection
, screen
, speech
, tty и tv
. Браузер применяет таб- лицу стилей, только когда активизирован тип устройства. Другими словами, брау- зер применяет одну таблицу стилей для просмотра на экране, а другую — для пе- чати. Многие из этих типов предназначены для специализированных приложений, таких как Braille Reader (программа оптического распознавания текста для слабо- видящих пользователей), экранный диктор (для тех, кто хочет или кому нужно услышать, что содержится на странице) или телетайп. Большинство этих типов еще не работают в реальном мире, поскольку нет устройств, которые были бы за- программированы так, чтобы могли понимать их. Тем не менее вы должны знать три типа: all
, screen и print

all
— относится к каждому типу устройства. Когда стиль или таблица стилей использует тип all
, каждое устройство, получающее доступ к странице, при- меняет те же самые стили. Принтеры и мониторы пытаются отформатировать страницу подобным образом (стили на самом деле используют этот тип по умол- чанию, как только вы включаете их в страницу или получаете из внешней та- блицы стилей, так что вам не нужно указывать «все типы устройств» при до- бавлении таблицы стилей на страницу).

screen
— отображается только на мониторе. Когда вы определяете этот тип, брау- зер игнорирует такие стили при печати страницы. Этот тип устройства позво- ляет вам отделить те стили, которые выглядят замечательно на экране, но ужас- но — на бумаге, например задание белого текста на черном фоне.

print
— применяется только при печати страницы. Тип устройства print позво- ляет создать стили, которые используют подходящие для печати размеры шриф- та, цвета, графику и т. д.
Один из подходов разработки стилей состоит в создании стилей сначала лишь для экрана и присоединении их каким-либо из методов, описанных далее (таким как internal или external
, linked или imported
). На начальном этапе эти стили рабо- тают и для монитора, и для принтера. Затем вы создаете таблицу стилей только для принтера, которая применяется при печати страницы. Она отменит любые основ- ные стили, негативно влияющих на вид страницы при ее печати. Этот подход рас- сматривается в разделе «Создание таблиц стилей для печати» данной главы. В каче- стве альтернативы вы можете создать две различные аппаратно-зависимые таблицы стилей: одну для экрана, а другую — для печати и присоединить их к вашим веб- страницам, как это описано далее.
ПРИМЕЧАНИЕ
Еще один распространенный метод — создание трех таблиц стилей (одной для принтера, другой — для экрана и третьей — со стилями, которые должны появиться и при печати, и на экране монитора).
Вы указываете типы устройств для таблиц стилей принтера и экрана и присоединяете третий, раз- деляемый набор стилей, как делали это обычно.

530
Часть 4. CSS для продвинутых
Как добавлять аппаратно-зависимые таблицы
стилей
Аппаратно-зависимые таблицы стилей — это просто таблицы стилей CSS, они мо- гут быть или внутренними, или внешними. Однако если вы хотите, чтобы браузер применил стили только для определенного устройства, например для экрана или принтера, то должны добавить таблицу стилей к своей странице немного другим способом.
Определение типа устройства для внешней таблицы стилей
Чтобы присоединить внешнюю таблицу стилей при определении конкретного типа устройства, используйте тег

с атрибутом media
. Чтобы присоединить таблицу стилей, которая должна использоваться только при печати, добавьте такой HTML- код к своей веб-странице:

ПРИМЕЧАНИЕ
Формально CSS также позволяет определить тип устройства, когда вы используете правило @import для присоединения внешней таблицы стилей (см. раздел «Внешние таблицы стилей» гл. 2) таким образом: @import url(print.css) print;. Но, поскольку Internet Explorer 8 и более ранние версии не понимает этот код, его лучше не использовать.
Если вы не определите тип устройства, браузер решит, что вы имеете в виду все устройства, и будет использовать таблицу стилей для отображения на экране, при печати и т. д. Кроме того, вы можете задать множество типов устройств, разделяя их запятыми. Присоединенная внешняя таблица стилей, предназначенная для не- скольких устройств, могла бы быть такой:

Вам, вероятно, не нужно указывать несколько типов, пока браузеры не начнут распознавать их все.
СОВЕТ
Когда вы создаете и проверяете таблицы стилей для принтера, оставьте атрибут media="print" и отключите все таблицы стилей, предназначенные только для экрана. Например, измените media="screen" на media="speech". Эта методика позволит вам просматривать страницу в брау- зере в том виде, как она будет выглядеть для печати. Как только таблица стилей для печати станет смотреться приемлемо, укажите для нее тип print и подключите любую таблицу стилей для отображения на экране.
Определение типа устройства внутри таблицы стилей
Вы можете также включить определенные аппаратно-зависимые стили непосред- ственно внутри таблицы стилей, используя инструкцию
@media
. В гл. 14 вы уже стал- кивались с инструкцией
@media при создании медиазапросов для задания различных свойств и настроек веб-браузера (например, ширины экрана). Инструкцию
@media

Глава 16. CSS для распечатываемых веб-страниц
531
можно также использовать для задания различных экранов и при выводе на печать.
Возможно, вы захотите добавить к внутренней таблице несколько стилей, характер- ных для печати. Или решите хранить все стили в отдельной внешней таблице и про- сто добавить несколько стилей, предназначенных только для принтера. Вы можете сделать это, используя инструкцию
@media следующего вида:
@media print {
/* описывайте стили для печати здесь */
}
Не забудьте указать закрывающую фигурную скобку (на последней строке), иначе инструкция не будет работать. Вот пример использования
@media для вклю- чения двух стилей, предназначенных только для принтера:
@media print {
h1 {
font-size: 24pt;
}
p {
font-size: 12pt;
}
}
Фактически не имеет никакого значения, помещаете вы все стили в отдельный файл и используете инструкцию
@media или определяете специфические аппаратно- зависимые стили в их собственных внешних таблицах стилей (например, screen.css и printer.css
). Добавление всех ваших стилей, предназначенных только для печати, в их собственную внешнюю таблицу стилей printer.css намного облегчает поиск и редактирование этих стилей.
Создание таблиц стилей для печати
Вы должны видеть, как распечатываются страницы вашего сайта, перед тем как с го- ловой погрузиться в реконструкцию стилей для печати. Часто вся информация на веб-странице печатается без проблем, так что, вероятно, вам не придется добавлять к сайту таблицу стилей для принтера. Однако в некоторых случаях, особенно при использовании большого CSS-кода, после распечатки страницы выглядят ужасно.
Так, поскольку браузеры не печатают фоновые изображения, только если им не ука- зать делать это, у вас может образоваться много пустого пространства в тех местах, где были эти изображения. Но даже если страница выглядит на бумаге так же, как и на экране, у вас есть множество способов улучшить качество печатной версии путем добавления определенных стилей, предназначенных только для печати (рис. 16.2).
СОВЕТ
Чтобы просмотреть до печати, как будет выглядеть страница на бумаге, можно использовать ко- манду Print Preview (Предварительный просмотр) браузера. В Windows она обычно доступна через меню FilePrint Preview (ФайлПредварительный просмотр). В Mac вы сначала выбираете FilePrint
(ФайлПечать), а затем в появившемся окне — Print Preview (Предварительный просмотр). Используя

532
Часть 4. CSS для продвинутых предварительный просмотр, вы можете проверить, не слишком ли широка страница, чтобы соот- ветствовать одному листу бумаги, и увидеть, где происходит обрыв страницы.
Рис. 16.2. С помощью таблицы стилей для принтера вы можете убрать боковую панель, навигационные панели и другое содержимое, разработанное для просмотра сайтов (слева).
Результатом будет просто отформатированный документ — идеальный для печати (справа)
Использование правила !important для отмены
экранного стиля
Как говорилось ранее, часто бывает полезно создавать таблицу стилей, не указывая тип устройства (или используя код media="all"
). Если вы готовы определить кое- какие характерные для печати правила, то можете просто создать отдельную таб- лицу стилей, чтобы отменить любые стили, которые не очень хорошо выглядят при печати.
Скажем, у вас есть тег