Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
CSS: The Missing Manual прямо под , и добавьте следующий атрибут класса: 5. Просмотрите страницу в браузере. Абзац никак не изменился. Согласно правилам каскадности, .intro — базовый селектор класса, а .main p является селектором потомка и состоит из класса и име- ни тега. Они добавлены для создания более специфичного стиля, поэтому его свойства стиля решают любой конфликт между ним и стилем .intro Чтобы заработал стиль .intro , необходимо немного «укрепить» его, наделив его селектор большей значимостью. 6. Вернемся к файлу styles.css в редакторе и изменим название стиля с .intro на p.intro Убедитесь в том, что между p и .intro нет пробела. По сути, вы создали связь: .main p — один селектор класса и один селектор тега, а также p.intro — один тег и один класс. Оба они имеют показатель значимости 11, но поскольку p.intro появляется в таблице стилей после .main p , именно этот селектор 136 Часть 1. Основы CSS выигрывает битву и его свойства применяются к абзацу. (Чтобы преодолеть конфликт, можно создать и еще более специфический стиль — .main .intro .) 7. Просмотрите страницу в браузере (рис. 5.8). Рис. 5.8. Даже в простой странице с небольшим набором стилей внешний вид тегов зачастую является комбинацией свойств различных стилей Вуаля! Абзац изменил свой цвет на голубой, его текст стал крупнее, шрифт поменялся и отсутствует левый отступ. Если бы у вас не было четкого понима- ния каскадности, вы бы ломали голову над тем, почему этот стилевой класс не работал в первый раз. В этой и четырех предыдущих главах мы рассмотрели основы CSS. Теперь при- шло время применить полученные знания для создания настоящих полноценных дизайнов, чем мы и займемся в части 2. ЧАСТЬ 2 Применение CSS Глава 6.Форматирование текста Глава 7.Поля, отступы, границы Глава 8.Добавление графики на веб-страницы Глава 9.Приводим в порядок навигацию сайта Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS Глава 11. Форматирование таблиц и форм 6 Форматирование текста Большинство сайтов в Интернете по-прежнему построены исключительно на тек- стовом содержимом. Несомненно, людям нравится видеть фотографии, видео- клипы, Flash-анимации, но все-таки именно содержательный текстовый материал заставляет их возвращаться на определенные сайты вновь и вновь. Посетители жаждут обновлений в Facebook, новостей, статей с практическими рекомендаци- ями, рецептов, ответов на актуальные вопросы, полезной информации и новых записей в микроблогах Twitter. С помощью языка CSS вы можете придать такой вид заголовкам и текстовому содержимому веб-страниц, что они привлекут вни- мание посетителей не хуже других фотографий. CSS предлагает для этих целей обширный набор мощных команд форматиро- вания, которые позволяют назначать шрифты, цвет, размеры, межстрочный ин- тервал и другие свойства и атрибуты, которые оказывают влияние на визуальное восприятие как отдельных элементов веб-страницы (заголовков, маркированных списков, обычных абзацев текста), так и всей веб-страницы, сайта в целом (рис. 6.1). Данная глава описывает и показывает все многообразие свойств форматирования текстового содержимого веб-страниц и заканчивается обучающим уроком, позво- ляющим попрактиковаться в создании таблиц стилей CSS для текста и примене- нии их к реальным веб-страницам. Использование слишком большого количества шрифтов или типографских украшательств зачастую приводит читателя в заме- шательство, затрудняя понимание сути информации, изложенной на веб-страни- це (рис. 6.1, а). Применение различных типоразмеров, умелый подбор стиля и за- действование всего пары разных шрифтов облегчает просмотр страницы и делает ее приятной для чтения (рис. 6.1, б) Использование шрифтов Первое, что вы можете сделать для достижения большей привлекательности сай- та, — применить различные шрифты к заголовкам, абзацам и другим элементам. Для выбора начертания в CSS-стиле применяется свойство font-family и указывает- ся тот шрифт, который вы хотите использовать. Предположим, например, что вы хотите применить для абзацев страницы шрифт Arial. Для этого можно создать стиль тега p и воспользоваться свойством font-family : p { font-family: Arial; } Глава 6. Форматирование текста 139 а б Рис. 6.1. Оформление сайтов очень важно для их восприятия 140 Часть 2. Применение CSS Изначально свойство font-family работает, только если у посетителей сайтов имеется такой же шрифт, установленный на их компьютерах. Иначе говоря, при- менительно к показанному выше примеру, если у кого-то из посетителей вашего сайта не будет на его компьютере шрифта Arial, абзацы страницы будут отображе- ны с использованием исходного шрифта веб-браузера (обычно это какой-нибудь вариант Times New Roman). Поэтому веб-дизайнеры ограничивались небольшим набором шрифтов, поступающих предустановленными на большинстве компью- теров. В последнее время веб-браузеры стали поддерживать веб-шрифты, то есть такие шрифты, которые браузер загружает и использует при просмотре сайта. Веб-шриф- ты также применяют свойство font-family , но требуют дополнительной CSS-ко- манды, которая называется директивой @font-face и которая выдает веб-браузеру инструкцию загрузить указанный шрифт. Веб-шрифты открывают многие захва- тывающие возможности в области дизайна, позволяя делать выбор из огромного количества гарнитур. Но вскоре вы увидите, что данный подход также имеет проблемы. Как веб- дизайнер вы можете остановиться на выборе проверенных и реально существу- ющих шрифтов, то есть указать шрифты из основного набора, установленного на большинстве компьютеров, или же задать веб-шрифты, расширив свой дизай- нерский кругозор (ценой дополнительной работы). Но вы не ограничены только одним из этих подходов. Многие дизайнеры используют их в сочетании, в одних случаях применяя стандартные шрифты (например, для основной части текста страницы), а в других — веб-шрифты (допустим, для создания привлекательных заголовков). Выбор обычного шрифта Когда для указания шрифта применяется свойство font-family , посетители не обя- зательно должны увидеть выбранный вами шрифт, у них он либо должен быть уже установлен на компьютере, либо в случае указания веб-шрифтов временно загру- жен для просмотра сайта. Поскольку вы не можете знать, доступен ли предпочи- таемый вами шрифт конкретному пользователю, сложилась практика указывать не только основной шрифт, но и пару резервных вариантов. Если на компьютере посетителя сайта есть шрифт, выбранный первым, он и будет виден. Но если пер- вый шрифт не установлен, браузер просматривает список, пока не найдет указан- ный в нем шрифт. Идея состоит в том, чтобы определить список однотипных шриф- тов, присутствующих в большинстве операционных систем. Например: font-family: Arial, Helvetica, sans-serif; В данном примере браузер сначала выяснит, установлен ли Arial. Если да, то он использует этот шрифт. В противном случае он ищет Helvetica и, если и тот не установлен, применяется последний из списка — универсальный гротесковый шрифт семейства sans-serif. Когда вы вносите в список универсальный тип шрифта (sans-serif или serif), браузер выбирает реально существующий из этого семейства. По крайней мере, таким образом вы можете определить его основные начертания. Глава 6. Форматирование текста 141 ПРИМЕЧАНИЕ На практике для применения определенного CSS-свойства вы должны добавить все остальные обязательные детали блока описания стиля и таблицы (см. гл. 2). Например, p { font-family: Ari al , Helvetica, sans-serif; }. Если есть такие примеры определений, помните, что это всего лишь отдельное свойство CSS-стиля для сокращения и упрощения написания книги и удобства чте- ния. Если название шрифта состоит из нескольких слов, вам следует заключать его в кавычки: font-family: "Times New Roman", Times, serif; Далее представлены некоторые часто используемые сочетания обычно установ- ленных шрифтов, сгруппированные по типу шрифта. Шрифты с засечками (Serif). Шрифты с засечками (маленькими росчерками на концах основных штрихов) идеальны для больших частей текста. Распростра- нено мнение, что засечки визуально связывают одну букву с другой, делая текст более читабельным. Примерами шрифтов с засечками являются Times, Times New Roman, Georgia. Примеры данных шрифтов приведены на рис. 6.2. Рис. 6.2. Шрифты не всегда отображаются одинаково в Windows (слева) и Macintosh (справа). У этих двух систем различные наборы предустановленных шрифтов Шрифты без засечек. Шрифты без засечек часто используются для заголовков благодаря простому и четкому внешнему виду. Примеры шрифтов без засечек — Arial, Helvetica и Verdana. Примеры данных шрифтов приведены на рис. 6.3. 142 Часть 2. Применение CSS Рис. 6.3. Шрифты без засечек в Windows (справа) и Macintosh (слева) Некоторые люди верят в то, что на веб-страницах стоит использовать лишь шриф- ты без засечек, потому что декоративные штрихи шрифтов с засечками отображают- ся не очень хорошо на экранах с низким разрешением. В конце концов, ваш вкус — лучший ориентир. Выбирайте те типы шрифтов, которые считаете нужными. Моноширинные шрифты. Моноширинный шрифт часто используется для ото- бражения компьютерного кода (например, фрагментов кода повсюду в этой книге). Каждая буква в моноширинном шрифте имеет одинаковую ширину (как буквы в ме- ханических печатных машинках). С примерами этих шрифтов можете ознакомиться на рис. 6.4. Courier — самый распространенный моноширинный шрифт, но ограничиваться только им не обя- зательно. Lucida Console очень популярен в Windows и Macintosh, а Monaco уста- новлен на каждом компьютере Macintosh. Рис. 6.4. Моноширинные шрифты в Windows (справа) и Macintosh (слева) Глава 6. Форматирование текста 143 Дополнительные шрифты. На самом деле существуют буквально тысячи шриф- тов, и каждая операционная система поставляется со многими из тех шрифтов, ко- торые не перечислены здесь. Тем не менее приведу несколько шрифтов, которые очень часто встречаются на персональных компьютерах и компьютерах Macintosh. Возможно, вы захотите выбрать какие-то из них: Arial Black; Arial Narrow; Impact. Будьте осторожны с Arial Black и Impact: у них есть только одна плотность и они не поддерживают курсивный вариант. Соответственно, если вы используете эти шрифты, не забудьте установить для font-weight и font-style значение normal . В про- тивном случае, если шрифт будет полужирным или курсивным, браузер сделает все от него зависящее, чтобы текст выглядел ужасно. Использование веб-шрифтов Традиционный способ использования шрифтов в CSS прост и понятен: нужно указать желаемый шрифт, воспользовавшись свойством font-family . Но вы огра- ничены теми шрифтами, которые, скорее всего, установлены на компьютерах по- сетителей вашего сайта. К счастью, как уже ранее упоминалось, все основные браузеры поддерживают использование веб-шрифтов. При этом браузеры факти- чески загружают шрифт с веб-сервера и применяют его для отображения текста на веб-странице. CSS-часть веб-шрифтов довольно проста и требует всего двух CSS-команд: директивы @font-face , которая отвечает за сообщение веб-браузеру как имени шрифта, так и места, откуда его нужно загрузить. Вскоре вы узнаете, как эта CSS-команда работает, а сейчас просто имейте в виду, что с ее помощью брау- зеру сообщается о необходимости загрузить шрифт; свойства font-family , которое используется с веб-шрифтами точно так же, как и со шрифтами, уже установленными на компьютере. Другими словами, если есть директива @font-face , заставляющая браузер загрузить шрифт, вы можете назначить этот шрифт любому CSS-стилю с помощью свойства font-family Теоретически веб-шрифты использовать нетрудно. Но, если вдаваться в по- дробности, для их правильного применения нужно быть в курсе специфических требований. ПРИМЕЧАНИЕ Довольно простой способ использования веб-шрифтов предлагает компания Google. Вскоре мы рассмотрим, в чем именно он заключается. Типы файлов шрифтов В это сложно поверить, но Internet Explorer имел поддержку веб-шрифтов, начиная с 5-й версии (выпущенной более 12 лет назад!). К сожалению, данная поддержка 144 Часть 2. Применение CSS требовала использования весьма специфического и сложного способа создания шрифтового форматирования. То есть нельзя было просто взять обычный шрифт из компьютера, выложить его на веб-сервер и считать, что дело сделано. Нужно было взять обычный шрифт и преобразовать его в формат EOT (Embedded Open Type — встраиваемый формат Open Type). И такое положение вещей сохранялось вплоть до версии Internet Explorer 8. Но для веб-шрифтов используются и другие форматы шрифтов. Некоторые из них работают в одних, но не работают в других браузерах. Чтобы указанными шриф- тами могло полюбоваться как можно большее количество посетителей вашего сай- та, нужно предоставить эти шрифты в различных форматах (как это сделать, вы вскоре узнаете). В следующем перечне приведены различные типы шрифтов и перечислены брау- зеры, которые с ними работают. EOT. Шрифты Embedded Open Type работают только в Internet Explorer. Чтобы преобразовать обычный шрифт в EOT-формат, потребуется специальное про- граммное средство, но сделать это можно и на таких сайтах, как FontSquirrel. True Type и Open Type. Если заглянуть в папку Fonts вашего компьютера, то там наверняка найдутся файлы шрифтов с расширениями TTF (True Type) или OTF (Open Type). Эти форматы чаще всего используются в качестве компью- терных шрифтов. Их можно применять для обработки текста и вывода его на экран, а также для веб-страниц. Эти типы шрифтов имеют широкую поддержку в большинстве веб-браузеров: Internet Explorer 9 и выше, Firefox, Chrome, Safari, Opera, iOS Safari (версии 4.2 и выше), Android и Blackberry Browser. WOFF. Файлы Web Open Font Format представляют собой самый новый фор- мат шрифта, разработанный специально для веб-технологий. WOFF-шрифты, по сути, являются сжатой версией шрифтов TrueType или Open Type. Это оз- начает, что WOFF-шрифты обычно имеют меньший размер файла и загружа- ются быстрее других шрифтов. WOFF-формат имеет также широкую подде- ржку со стороны браузеров, включая Internet Explorer 9 и выше, Firefox, Chrome, Safari, Opera, Blackberry Browser и iOS Safari версии 5 и выше. Наиболее замет- ным исключением является Android. Иными словами, если у вас используют- ся только WOFF-шрифты, посетители, применяющие мобильные устройства Android или работающие с Internet Explorer 8, не смогут загрузить ваши шриф- ты и вывести их на экран. SVG. Scalable Vector Graphic формат (масштабируемой векторной графики) сам по себе не является форматом шрифта. По сути, это способ создания век- торной графики (то есть такой графики, которая может масштабироваться без потери качества). Поддержка SVG-шрифтов ограничена куда существеннее. SVG-формат не поддерживается ни Internet Explorer, ни Firefox. Другой про- блемой, связанной с SVG, является то, что данный формат создает файлы, за- частую в два раза длиннее, чем файлы форматов TrueType, и в три раза длиннее файлов со шрифтами формата WOFF. Единственное реальное преимущество SVG — только этот формат шрифта способны разобрать более старые версии iOS с запущенными браузерами Safari версии 4.1 или более ранних версий. Глава 6. Форматирование текста 145 К счастью, вам не нужно выбирать только один тип шрифта, игнорируя при этом все остальные, не поддерживающие его браузеры. Совсем скоро вы узнаете, что можно (и обычно нужно) указывать несколько форматов, позволяя браузеру только тот, с которым он работает. Кроме того, вы можете загрузить шрифт, кото- рый уже был преобразован в эти четыре формата, или даже преобразовать обычный шрифт True Type в эти несколько форматов. ПРИМЕЧАНИЕ Отдельный файл шрифта содержит только одну плотность и один стиль для этого шрифта. Иначе говоря, если нужно получить полужирный, курсивный или полужирный и курсивный тексты, следу- ет загрузить отдельные файлы шрифтов для каждого варианта. Некоторые шрифты, особенно име- ющие забавный внешний вид, включают только один вариант и больше подходят для заголовков или текста, где не нужны курсивные или полужирные версии. Более полная информация о плот- ности и стилях шрифтов будет приведена чуть позже. Правовые вопросы использования веб-шрифтов Вторым препятствием для использования веб-шрифтов являются правовые во- просы. Эти шрифты создаются с целью получения средств к существованию и продаются как отдельными разработчиками, так и компаниями. При загрузке шрифта TrueType на ваш сервер для его применения посетителями при просмот- ре вашего сайта любой человек может просто скачать шрифт и пользоваться им на своем сайте или на установленных на компьютере программах обработки тек- ста или макетирования страниц. Большинству компаний, занимающихся созда- нием шрифтов, не нравится пиратское использование плодов их труда, поэтому многие шрифты имеют лицензии, которые однозначно запрещают их использо- вание во Всемирной сети. Иными словами, даже если вы купили шрифт от Adobe, его нельзя просто так начать использовать на вашем веб-сайте. Многие компании, создающие шрифты в настоящее время, предлагают различные виды лицензий (по разным ценам), чтобы разрешить использование своих шрифтов во Всемирной сети. Это касается даже шрифтов, поставляемых вместе с компьютером. Вам разрешается использовать их с программами, установленными вами на компьютер, но вам может быть не разре- шено помещать файлы тех же самых шрифтов на свой веб-сервер для использова- ния их в качестве веб-шрифтов. Если вы не знаете, разрешено ли применение шрифта во Всемирной сети, лучше воздержаться от его использования и подобрать шрифт, который в ней может использоваться. ПРИМЕЧАНИЕ Чтобы обойти любые правовые вопросы, можно воспользоваться такими службами шрифтов, как Google Fonts или TypeKit, коммерческой службой веб-шрифтов от компании Adobe (о которой будет рассказано в одной из следующих врезок). |