Css
Second Edition
POGUE PRESS'"
O'REILLY@
Beijing • Cambridge • Farnham • Kбln • Paris • Sebastopol • Taipei • Tokyo
БОЛЬШАЯ КНИГА css
Дэвид Макфарланд
~nnTEPФ
Москва · Санкт-Петербург · Нижний Новгород · Воронеж
Ростов-на-Дону · Екатеринбург · Самара · Новосибирск
Киев · Харьков · Минск
ББК 32.988.02
УДК 004.738.5
М17
Макфарланд Д.
М17 Большая книга CSS. 2-е иэд.- СПб.: Питер, 2012.-560 с.: ил.- (Серия ((Бестселлеры
O'Reilly» ).
ISBN 978-5-459-01560-7
Современные технологии веб-дизайна активно развиваются. Если раньше процесс графического
оформления сайта представлял собой скрупулезную работу в HTML, то сегодня CSS позволяет без лишних
усилий сощавать действительно уникальные, удобные и функциональные сайты. CSS (каскадные
таблицы стилей)- ~то технология описания внешнего вида документа с помощью языка разметки, позволяющая
легко и быстро задавать параметры графического отображения веб-страницы. Это не просто полезный
инструмент для ((украшения»: используя CSS, можно в полном объеме управлять внешним видом
сайтов (от шрифта и цвета до макета страницы). Данная книга доступно и подробно объясняет основы
этого мощного инструмента веб-дизайна и помогает научиться как созданию новых, так и апгрейду уже
существующих сайтов. Во втором издании книги материал в значительной степени перерабатаи с учетом
самых современных интернет-технологий, а также актуальных и анонсируемых обновлений CSS.
ББК 32.988.02
УДК 004.738.5
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме
без письменного разрешения владельцев авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные.
Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может
гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные
ошибки, связанные с использованием книги.
ISBN 978-5-459-01560-7
ISBN 978-0596802448 (англ.)
© 2009 David Sawyeг McFarland
©Перевод на русский язык 000 Издательство <<Питер», 2012
© Издание на русском языке, оформление
000 Издательство <<Питер», 2012
Краткое содержание
Об авторе ............................................... 12
О творческой команде ................................... 13
&пагодарности ......................................... 14
Введение ...................................... -........ 15
От иэдатепьства ........................................ 28
Часть 1.Основы CSS
Глава 1.CSS - новый подход к HTML ......................... 30
Глава 2. Соэдание стилей и таблиц стилей .................... .44
Глава 3. Селекторы: определение элементов стилизации ............ 63
Глава 4.Механизм наследования стилей ....................... 96
Глава 5.Управление сложной структурой стилей: каскадность ..... 106
Часть 2.Применение CSS
Глава 6.Форматирование текста ............................ 126
Глава 7. Поля, отступы, границы ............................ 165
Глава 8.Добавление графики на веб-страницы ....... / ......... 203
Глава 9.Приводим в порядок навигацию сайта ................. 243
Глава 10.Форматирование таблиц и форм ........... : ........ 290
6Краткое содержание
Часть 3.Макет страницы
Глава 11.Введение в разметку CSS .......................... 318
Глава 12.Разметка страницы на основе плавающих элементов ..... 329
Глава 13.Позиционирование элементов на веб-странице ......... 376
Глава 14.CSS для распечатываемых веб-страниц ............... 417
Глава 15.Совершенствуем навыки в CSS ...................... 437
Глава 16.CSS 3 - на гребне волны .......................... 460
Приложения
Приложеине 1.Справочник свойств CSS ..................... 482
Приложеине 2.CSS в Dreamweaver CS4 ...................... 510
Приложеине 3.Ресурсы по CSS ............................ 541
Алфавитный указатель ................................. 549
Оглавление
Об авторе ................................................. 12
О творческой команде .................................... 13
&пагодарносrи ............................................ 14
Введение ..................................................15
Как работает CSS ........................................... 15
Преимущества CSS ............ -.............................. 16
Что необходимо знать ....................................... 16
HTML: структура языка ...................................... 17
Как работают НТМL-теги ..................................... 17
XHTML: современный HTML ................................... 19
HTML 5 - новый виток ...................................... 20
Программное обеспечение для CSS ............................. 21
Об этой книге ............................................. 22
Основные разделы книги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Примеры программнаго кода на CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
О сайте MissiпgMaпuals.com ................................... 25
Основная терминология ...................................... 25
О стрелках ................................................ 26
Соглашения, использованные в данной книге ..................... 26
Технология Safari® ...................... : . .................. 27
От издательства ........................................... 28
8 Оглавление
Часть 1.Основы CSS.
Глава 1.CSS - новый подход к HTML ........................ 30
HTML: прошлое и настоящее .................................. 30
Написание НТМL-кода для CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Важность doctype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Долгожданный Iпterпet Explorer 8 .............................. 42
Глава 2. Создание стилей и таблиц стилей .................... 44
Что такое стиль . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Понимание таблиц стилей .................................... 47
Внутренние таблицы стилей ................................... 48
Внешние таблицы стилей ..................................... 49
Обучающий урок: создание первых стилей ........................ 52
Глава 3. Селекторы: определение элементов стилизации ........ 63
Селекторы типов: дизайн Страницы ............................. 63
Селекторы классов: точное управление .......................... 65
ID-селекторы: определение элементов веб-страниц ................. 67
Стилизация групп тегов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Стилизация вложенных тегов .................................. 71
Псевдоклассы и псевдоэлементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Другие селекторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Обучающий урок: примеры использования селекторов ............... 85
Глава 4.Механизм наrnедования стилей ...................... 96
Что такое наследование? ..................................... 96
Упрощение таблиц стилей через наследование .................... 98
Ограничения наследования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Обучающий урок: наследование ........................... ; . . 100
Глава 5. Управление rnожной структурой стилей:
каскадность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Каскаднасть стилей ........................................ 106
Особенности механизма каскадности: какие стили имеют преимущества .. 111
Управление каскадностью . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Начинаем с чистого листа ................................... 117
Обучающий урок: механизм каскадности в действии ............... 119
Оглавление 9
Часть 2.Применение CSS
Глава 6.Форматирование текста ............................ 126
Стилизация текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Установка размера шрифта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Форматирование символов и слов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Форматирование абзацев текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Стилизация списков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Обучающий урок: форматирование текста в действии . . . . . . . . . . . . . . 154
Глава 7. Поля, отступы, границы ............................ 165
Понятие блочной модели .................................... 165
Управление размерами полей и отступов . . . . . . . . . . . . . . . . . . . . . . . . 167
Добавление границ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Установка цвета фона ...................................... 179
Определение параметров высоты и ширины. . . . . . . . . . . . . . . . . . . . . . 180
Управление обтеканием содержимого плавающих элементов . . . . . . . . . 185
Обучающий урок: поля, фоновые параметры, границы .............. 191
Двигаемся дальше . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Глава 8.Добавление графики на веб-страницы ............... 203
CSS и тег <img> .......................................... 203
Фоновые изображения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Управление повтором фоновых изображений. . . . . . . . . . . . . . . . . . . . . 209
Позиционирование фоновых изображений . . . . . . . . . . . . . . . . . . . . . . . 210
Сокращенный вариант свойства background . . . . . . . . . . . . . . . . . . . . . . 216
Обучающий урок 1: совершенствуем изображения. . . . . . . . . . . . . . . . . 218
Обучающий урок 2: создание фотогалереи ...................... 224
Обучающий урок 3: использование ___________фоновых изображений ........... 231
Двигаемся дальше ......................................... 241
Глава 9.Приводим в порядок навигацию сайта ............... 243
Выборка стилизуемых ссылок ............................ ~ .... 243
Стилизация ссылок . . . . . . . . . . . . . . . . . . . .. : . . . . . . . . . . . . . . . . . . 246
Создание панелей навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Современные методы стилизации ссылок. . . . . . . . . . . . . . . . . . . . . . . . 263
Обучающий урок 1: стилизация ссылок ............ : ............ 272
Обучающий урок 2: создание панели навигации .................. 278
10Оглавление
Глава 10.Форматирование таблиц и форм ................... 290
Правильное использование таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Создание стилей для таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Создание стилей для форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Обучающий урок 1: создание стилей для таблиц . . . . . . . . . . . . . . . . . . 304
Обучающий урок 2: создание стилей для форм ................... 311
Часть 3.Макет страницы
Глава 11.Введение в разметку CSS ......................... 318
Типы разметок веб-страницы ......... , ....................... 318
Как работает СSS-разметка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Стратегии разметки ........................................ 323
Глава 12.Разметка страницы на основе плавающих
элементов ............................................. 329
Использование плавающих элементов в разметках. . . . . . . . . . . . . . . . . 332
Преодоление проблем перемещения . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Обработка ошибок в Internet Explorer б . . . . . . . . . . . . . . . . . . . . . . . . . 353
Обучающий урок 1: разметки с множеством столбцов . . . . . . . . . . . . . . 360
Обучающий урок 2: разметка с отрицательными полями ............ 368
Глава 13.Позиционирование элементов
на веб-странице ........................................ 376
Как работают свойства позиционирования. . . . . . . . . . . . . . . . . . . . . . . 376
Мощные стратегии позиционирования . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Обучающий урок: позиционирование элементов страницы. . . . . . . . . . . 403
Глава 14.CSS для распечатываемых веб-страниц ............. 417
Как работают аппаратно-зависимые таблицы стилей ............... 417
Как добавлять аппаратно-зависимые таблицы стилей .............. 420
Создание таблиц стилей для печати ............................ 421
Обучающий урок: создание таблицы стилей для печати ............. 429
Глава 15.Совершенствуем навыки в CSS .................... 437
Добавление комментариев ................................... 437
Организация стилей и таблиц стилей ........................... 438
Оглавление 11
Устранение столкновений стилей в браузере ..................... 446
Использование селекторов потомков . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Управление браузером Iпternet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . 455
Глава 16.CSS 3 - на гребне волны ......................... 460
Обзор CSS 3 .............................................. 461
Селекторы в CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Прозрачность ............................................ 467
RGВА-цвет . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Тень для текста ........................................... 472
Свобода для шрифтов ...................................... 474
Генерируемое содержимое страницы ........................... 477
Приложения
Приложение 1.Справочник свойств CSS .................... 482
Приложение 2.CSS в Dreamweaver CS4 ..................... 510
Приложение 3.Ресурсы по CSS ............................ 541
Алфавитный указатель ................................... 549
Об авторе
Дэвид Сойер Макфарлаид (David Sawyer McFarland) является
президентом Sawyer McFarland Media, Inc., компании по
обучению и разработке интернет-приложений в Портленде,
штат Орегон. Он создает сайты с 1995 года: именно тогда
Дэвид разработал свой первый проект- онлайн-журнал для
специалистов в области коммуникаций. Он работал веб-мастером
в Калифорнийском университете в Беркли и в Центре
мультимедийных исследований Беркли (Berkeley Multimedia
Research Center), а также участвовал в проектировании и создании
огромного количества сайтов для всевозможных кли-
ентов, включая Macworld.com.
Кроме всего прочего, Дэвид является писателем, тренером и инструктором .
Он преподавал веб-дизайн в Высшей школе журналистики в Беркли, Центре электронного
искусства (Electronic Art), Колледже искусств, Центре новой прессы
и Государственном университете Портленда. Им написаны статьи о Сети для
журналов Practical Web Design, МХ Developer's]ournal и Macworld, а также для портала
CreativePro.com.
Дэвид также является автором книг Dreamweaver: Тhе Missing Manual и]avaScript:
Тhе Missing Manual.
С автором вы можете связаться по электронной почте: missing@sawmac.com
(если же вам нужна техническая помощь, то обращайтесь к ресурсам, указанным
в приложении 3).
О творческой команде
Нэн Барбер (Nan BarЬer) (редактор) на9ала работать с серией Missing Manual еще
в прошлом тысяЧелетии. Живет в Массачусетсе вместе со своим мужем и является
владелицей компьютера Macintosh G4. Ее электронный адрес: nanьarЬer@oreilly.com.
НеJШи Маккессон (Nellie McKesson) (выпускающий редактор)- проживает
в Бриrтоне. Коротает свободное время, играя в музыкальной группе Dr. & Mrs. Van
der Trampp (http://mysapce.com/drmrsvandertrampp) и делая футболки для своих друзей
(http://mattsaundersbynellie.etsy.com). Ее электронный адрес: nellie@oreilly.com.
Марсия Симмоне (Marcia Simmons) (литературный редактор) - писатель и редактор.
Проживает в Сан-Франциско. В собственном блоге Мария рассказывает
о технологических новинках и делится рецептами коктейлей (www.smartkitty.org).
Анджела Говард (Angela Howard) (составитель алфавитного указателя)- занимается
составлением указателей более 10 лет, по большей части для компьютерной
литературы, но время от времени интересуется и другими темами: путешествиями,
альтернативной медициной и леопардовыми ящерицами. Живет
в Калифорнии вместе с мужем, дочерью и двумя кошками.
Тони Раско (Tony Ruscoe) (технический редактор)- неб-разработчик. Живет
в Шеффилде, Англия. Первая его программа была написана для компьютера ZX
Spectrum на языке BASIC еще в середине 1980-х годов. С 1997 года он занимается
разработкой сайтов и других веб-приложений, используя в ходе работы различные
технологии. Сейчас он ведет свой персональный сайт http://ruscoe.net/ и сайт, посвященный
исследованиям: http://ruscoe.name/.
Кристофер Шмидт (Christopher Schmitt) (технический редактор)- автор множества
книг по дизайну и цифровым изображениям, включая книгу CSS Cookbook.
Пишет статьи для журнала New Architect и сайтов А List Apart, Digital W еЬ и W еЬ
Reference. Кристофер является основателем небольшой издательской компании,
которая также занимается дизайном и была удостоена за это награды. Кроме того,
К рис соведущий Adobe Task F orce - проекта по стандартизации Сети (W aSP, W еЬ
Standards Project). Его сайт: http://www.cristopherschmitt.com/.
Благодарности
Большое спасибо всем, кто помогал в работе над этой книгой, включая моих студентов,
которые оценивали ее с позиции новичков. Благодарю своих технических
редакторов, Кристофера Шмидта и Тони Раско, которые предостерегли меня от
сбивающих с толку ошибок, а также Зое Гилленуотер (Zoe Gillenwater)- за ее
бесценный вклад в первое издание книги. Кроме того, мы все в долгу перед неб-дизайнерами,
которые стали новаторами, используя CSS с творческим подходом,
и поделились своими наработками в сообществе, посвященном неб-дизайну.
Наконец, спасибо Дэвиду Погу (David Pogue), чей неувядающий энтузиазм и выносливость
ободряли меня; Нэп Барбер - за очистку моих рукописей и прочую
помощь в написании этой книги; моей жене Сколле (Scholle) -за любовь и поддержку;
моему сыну Грэхему (Graham), который убеждал меня в том, что я закончу эту
книгу гораздо быстрее, если в каждой главе буду писать «Тра-ля-ля!~; моей чудесной
дочке Кейт (Kate), чья улыбка всегда меня воодушевляла, и всей моей семье:
маме, Дугу (Doug), Мари (Магу), Дэвиду (David), Марисе (Marisa), Тессе (Tessa),
Филис (Phyllis), Лес (Les), Дел (Del), Патриции (Patricia) и Майку (Mike).
Введение
Каскадные таблицы стилей, или Cascading Style Sheets (CSS), обеспечивают творческую
свободу в разметке и дизайне веб-страниц. Пользуясь ими, вы сможете
украсить текст страниц привлекательными заголовками, буквицами, рамками, как
в красочных глянцевых журналах.
Можно точно разместить и позиционировать изображения, создать столбцы
и баннеры, выделить текстовые ссылки динамическими эффектами.
Вы думаете, что все это довольно сложно? Напротив! Цель CSS как раз и состоит
в том, чтобы упростить процесс моделирования. На страницах этой книги вы
изучите основы CSS.
Как работает CSS
Если вы пользавались стилями в программах обработки текста, например Microsoft
W ord, или разметки веб-страниц, например Adobe InDesign, то язык CSS покажется
знакомым. Стиль - это правило, описывающее форматирование отдельного
фрагмента веб-страницы. Таблица стиля - ряд определений стилей.
CSS отличается от HTML тем, что это совершенно другой язык. HTML структурирует
документ, упорядочивая информацию в заголовки, абзацы, маркированные
списки и т. д., в то время как CSS тесно взаимодействует с браузером, чтобы
оформление НТМL-документа имело совершенный вид. Другими словами, язык
HTML отвечает за содержание, а CSS - за внешний вид веб-страниц.
Например, вы могли бы использовать HTML, чтобы превратить фразу в заголовок,
отделяя его от содержимого страницы, но лучше использовать CSS для форматирования
заголовка, скажем, большим полужирным красным шрифтом с позиционированием
на расстоянии 50 пикселов от левого края окна. CSS требуется
повсеместно для изменения и улучшения отображения HTML.
Можно также создавать стили специально для работы с изображениями. Например,
с помощью стилей можно выровнять изображение по правому краю веб-страницы,
поместить его в цветную рамку, отделить от окружающего текста промежутком
50 пикселов.
Создав стиль один раз, можно применять его к текстовым фрагментам, изображениям,
заголовкам и любым другим элементам страницы сколько угодно. Например,
вы можете выделить абзац текста и применитъ стиль, изменяющий размер,
цвет и шрифт текста.
Можно также создать стили для определенных НТМL-тегов так, чтобы, например,
все заголовки первого уровня (теги <hl>) на вашем сайте были отображены
в одинаковом стиле, независимо от того, где они размещенЫ.
16 Введение
Преимущества CSS
.]о появления CSS дизайнеры веб-страниц были ограничены возможностями разметки
и оформления языка HTML. И если вы занимались серфингом в Интернете
в 1995 году, то уясните разницу в возможностях CSS и HTML. Читая дальше эту
книгу, вы поймете, что HTML все еще является основой создания страниц в Сети,
но это отнюдь не средство формирования их дизайна. Безусловно, HTML обеспечивает
простейшее форматирование текста, изображений, таблиц и других элементов
страниц и оформитель может придать им прекрасный внешний вид. Но, как правило,
в результатевеб-страницы получаются громоздкими И медленно загружаются.
Таблицы стилей CSS, напротив, имеют следующие преимущества.
О Больше возможностей форматирования, нежели в HTML. В CSS вы можете
форматировать абзацы по мере их появления в тексте (например, с абзацным
отступом и с про из вольным интервалом между абзацами) и изменять межстрочный
интервал (расстояние между двумя соседними строками текста в абзаце).
О При использовании CSS вы решаете, каким образом добавить фоновое изображение
на страницу. Оно может отображаться в виде неперекрывающейся мозаики,
повторяться и т. д.
О Еще более значимо то, что стили CSS занимают намного меньше места, чем
форматирующие команды HTML. Например, тег <font>. Применяя CSS, вы
можете уменьшить размер веб-страниц. В результате они будут стильно выглядеть
и быстрее загружаться.
О Стилевые таблицы также облегчают обновление сайта. Можно собрать все стили
в единственный внешний файл и связать его со всеми страницами сайта.
Когда вы редактируете стиль, изменения моментально затрагивают все элементы
страниц сайта, где есть ссылка на описанный в таблице стиль. Вы можете
полностью изменить внешний вид путем редактирования единственного файла
таблицы стилей.
ПРИМЕЧАНИЕ-----------------------------------------------НТМL
уже настолько умудрен опытом и преуспел в пренебрежении требованиями Консорциума
Всемирной паутины - Woгld Wide Web Coпsortium (WЗС), ответственного эа определение стандартов
WWW, что большое количество тегов, используемых исключительно для форматирования внешнего
вида HTML (тег <foпt>, например), уже устарело.
Полный список устаревших тегов смотрите в Интернете по адресу www.codehelp.co.uk/html/
depгecated.html.
Что необходимо знать
Эта книга предполагает, что вы уже знакомы с языком HTML (и, возможно, имеете
небольшой опыт работы с CSS). Подразумевается, что вы создали пару сайтов
(или по крайней мере несколько веб-страниц) и знакомы с основными тегами,
такими как <html>, <р>, <hl>, <tаЫе> и т. д., составляющими основу языка гипертекстовой
разметки документов. CSS бесполезен без HTML, поэтому, чтобы продол-
Как работают НТМL-теги 17
жать изучение CSS, вы должны знать, как создать простейшую веб-страницу с использованием
основных НТМL-тегов.
Если вы раньше создавали веб-страницы на HTML, но чувствуете, что знания
требуется освежить, вам поможет следующий раздел книги.
ПРИМЕЧАНИЕ-----------------------------------------------Если
вы только знакомитесь с HTML и возможностями применения его на практике,· то посетите
сайты бесплатного обучения: HTML Dog (www.htmldog.com/guides/htmiЬegiппer/) и WЗSchools (www.
wЗschools.com/html/). Если вам больше нравится читать книги, обратитесь к руководствам по созданию
сайтов: Creatiпg Web Sites: Тhе Missiпg Maпual Мзтью Макдональда (Matthew MacDoпald) или
Head First HTML with CSS & XHTML Элизабет Фриман (EiisaЬeth Freemaп) и Эрика Фримана (Eric
Freemaп) издательства O'Reilly.
HTML:структура языка
В языке гипертекстовой разметки HTML используются простые команды, именуемые
тегами, для определения различных частей - фрагментов. Ниже приведен
код HTML простой веб-страницы:
<!ООСТУРЕ HTML PUBLIC "-//WЗC//DTD HTML 4.01//EN" "http://www.wЗ.org/ТR/
html4/strict.dtd">
<html>
<head>
<title>Этo заголовок веб-страницы</titlе>
</head>
<body>
<р>А это содержимое страницы</р>
</Pody>
</html>
Конечно, пример очень простой, но демонстрирует все основные элементы, необходимые
обычной веб-странице. В нем вы заметите то, что называется обьявлением
типа документа,- DOCTYPE, за ним следует тег html (в угловых скобках-<
и>), потом head («голова~. заголовок), следом body («тело~. тело документа),
а в нем - непосредственно содержимое веб-страницы. Все это завершается закрывающим
тегом </html >.
Как работают НТМL-теги
В пр иведенном выше примере, как и в НТМL-коде любой веб-страницы, большинство
команд-тегов используются парами, начиная и завершая какой-то фрагмент -
блок текста или другие команды.
Будучи заключенными в скобки, эти теги представляют собой команды, которые
говорят браузеру, каким образом отображать веб-страницу.
Открывающий тег каждой пары показывает браузеру, где команда начинается,
а заканчивающий -где заканчивается. Закрывающий тег всегда предваряется прямым
слэшем (/)после первого символа скобки(<).
18Введение
Для функционирования веб-страницы необходимо наличие как минимум четырех
элементов.
О Самая первая строка примера содержит объявление типа документа - DОСТУРЕ.
Это объявление - не совсем настоящий НТМL-тег: такая строка сообщает браузеру
о том, с каким именно типом НТМL-страницы ему придется встретиться.
Подобных типов существует не так много. Один из них XHTML - веб-страница,
основанная на языке разметки XML. Об XHTML вы узнаете в следующем
разделе. Конечно, можно и не использовать объявление типа документа, но это
считается дурным тоном. Кроме того, далее вы узнаете, что DOCTYPE - это
один из основных элементов, необходимых для того, чтобы быть уверенным, что
ваше СSS-оформление будет работать во всех браузерах.
О Тег <htm l > требуется в начале веб-страницы и (с добавленным слешем) в конце.
Этот тег говорит браузеру, что документ является программным кодом на языкеНТМL.
Все содержимое страницы, включая остальные теги, находится между открывающим
и закрывающим <html >.
Если представить веб-страницу в виде дерева, то <html> будет ___________его стволом.
Две основные части любой веб-страницы - заголовок и тело - представляют
собой ветви.
О Заголовок веб-страницы, заключенный в теги <head>, содержит название. Здесь
также может содержаться другая информация, невидимая при просмотре вебстраницы
(ключевые слова поиска и т. д.), которая предназначена для браузеров
и поисковых машин.
Кроме того, заголовок может содержать информацию, используемую браузером
для правильного отображения веб-страницы и для придания ей интерактивности.
В заголовке документа можно разместить, например, таблицы стилей, а также
сценарииjаvаSсгiрt, функции, определения переменных.
О Тело веб-страницы, следующее непосредственно за заголовком и заключенное
в теги <body>, содержит все, что должно появиться в окне браузера: заголовки,
текст, изображения и т. д.
Внутри <body>, как правило, можно найти следующие теги:
• <р> - открывающий тег начинает абзац, а закрывающий </р> - заканчивает;
• <strong>- выделяет текст полужирным шрифтом; например, фрагмент
<strong>Warni ng! </strong> сообщит браузеру о том, что слово Warning! должно
быть выделено;
• <а>, или тег привязки (якорный), -создает гиперссылку, при щелчке на которой
можно переместиться в другое место веб-страницы или на другой сайт
(нужно указать браузеру эту ссьmку путем размещения ее внутри <а>, например,
можно набрать <а href="http: 1 /www.mi ssingmanual s. соm/">Нажмите здесь !</а>).
Браузер знает, что при щелчке кнопкой мыши на ссылке со словами Нажмите
эдесь! посетитель вашей страницы должен перейти на сайт с адресом http://
www.missingmanuals.com. Часть тега а - слово href- называют атрибутом, а URL
XHTML: современный HTML 19
(унифицированный указатель информационного ресурса, или адрес URL) является
его значением, В этом примере http: 1 lwww .mi ssi ngmanual s. com- значение атрибута
href.
XHTML:современный HTML
Множество яэыков продолжают сражаться за титул лучшего языка для Всемирной
паутины. Язык HTML 4.01, созданный еще в прошлом тысячелетии, хотя и всего
10 лет назад, уже, можно считать, повержен своим преемником. HTML всегда был
непривередлив: строчные или прописные буквы в тегах или вообще их смесь (например,
теги <body>, <BODY>, <BoDy> абсолютно идентичны), наличие возможности
опускать закрывающие теги (например, можно создать абзац, используя только
открываЮщий тег <р>, а закрывающий </ р> даже и не указывать). С одной стороны,
подобная гибкость позволяет создавать сайты гораздо быстрее, но с другой - она
доставляет массу проблем для различных браузеров, карманных устройств и других
мест, где у вас есть возможность использовать свои веб-страницы.
Появление XHTML 1.0- это новая жизнь HTML, но уже для повсеместного
использования. Если вам знаком HTML, не волнуйтесь: XHTML - это не революционно
новый язык, на изучение которого уйдут годы. Это обычный HTML, но
основанный на возможностях XML. Как и HTML язык XML использует теги,
которые позволяют просто и понятно собирать информацию воедино так, что различные
компьютеры, операционные системы и программы смогут беспрепятственно
ею обмениваться. Однако в отличие от HTML язык XHTML не ограничен
конкретным набором тегов. На самом деле XML позволя'ет вам задавать свои собственные
теги, используя для этого определенные правила. XML вообще дает возможность
делать очень многое, начиная от создания RSS-потоков новостей и заканчивая
созданием списков воспроизведения для iTunes.
Прекрасный способ узнать, что лучше- HTML 4.01 или XHTML 1.0,- вести
горячие дискуссии в Сети. Вам даже может по казаться, что это два абсолютно разных
языка, но это далеко не так. С помощью HTML 4.01 вы можете сделать прекрасный
и функциональный сайт, который будет работать еще очень и очень долго.
Что ж, если вы хотите продолжать использовать HTML, то внимательно следуйте
рекомендациям, предложенным в гл. 1. Например, вы обязательно должны
объявлять тип документа для своих НТМL-страниц, иначе ваши СSS-стили могут
перестать работать в некоторых браузерах. Кроме того, вам необходимо валидировать
вашу страницу (то есть проверить ее на соответствие всем нормам и правилам
для данного типа HTML), чтобы быть уверенными в том, что в ней нет никаких
типологических или других ошибок, которые могут повлиять на ее внешний вид.
То же самое вам нужно проделывать и с ХНТМL-страницами, правила валидации
которых значительно строже. К примеру, если для НТМL-документов указывать
DOCTYPE не обязательно, то для XHTML это непременное условие.
ПРИМЕЧАНИЕ-----------------------------------------------Если
вы действительно хотите разобраться в структуре XHTML, зайдите на обучающий сайт
WЗSchools ХНТМL по адресу www.wЗschools.com/xhtml/default.asp.
20 введение
Код страницы HTML, показанный в начале книги, в XHTML будет выглядеть
так:
<!DОСТУРЕ html PUBLIC "-//WЗC//DTD XHTML 1.0 Tran5itional//EN" "http://www.wЗ.org/
TR/xhtmll/DTD/xhtmll-tran5itional .dtd">
<html xmln5="http://www.w3.org/1999/xhtтl">
<head>
<title>Этo название веб-страницы.</titlе>
<теtа http-equiv="Content-Type" content="text/htтl: char5et=utf-8" />
</head>
<body>
<р>Это содержимое веб-страницы.</р>
</body>
</htтl>
Как видите, этот код очень походит на НТМL-код. Чтобы ХНТМL-файл соответствовал
стандартам XML, нужно придерживаться некоторых правил.
О СтраJПЩа должна начинаться с объявлеiПiя ТШiа документа (DОСТУРЕ). Это
две самые первые строки кода. Можно подумать, что они ничем не отличаются
от ~ех, что представлены в примере ранее: здесь объявляется тип XHTML 1.0
Transitional для ХНТМL-документа. Чуть больше об этом, а также о важности
этих типов для CSS вы узнаете из гл. 1.
О Tem и их атрибутъ1 должны быть написаны в нижнем реmстре. Это же касается
и <body>.
О Для атрибутов тегов требуются кавычки. Например, ссылка <а href=http: 11
www. mi 55 i ngтanua l 5. сот> правилька в HTML, но не будет работать в XHTML.
Вы должны заключить значение атрибута href в кавычки: <а href="http: 11
www. тi ssi ngтanua l s. сот">.
О Все теm (даже пусТЪiе) должНъ1 быть закрыты. Например, абзац в XHTML
должен начинаться с <р> и заканчиваться </р>. Проблема в том, что некоторые
теги не имеют пар (пустые), то есть у них нет завершающего тега. Таков, например,
тег разрыва строки. Чтобы закрыть его, нужно вписать в конце тега, перед
закрывающей скобкой, символ обратного слэша: <br/>.
HTML 5 -новый виток
Всемирная паутина не ограничивается языками XML или XHTML. В 2006 году,
на момент выхода первого издания этой книги, Консорциум WЗС (Консорциум
Всемирной паутины, World Wide Web Consortium) работал над языком XHTML 2 -
новой, более мощной версией XHTML, которая должна была навсегда изменить
представление дизайнеров о том, как следует создавать неб-страницы. Однако мешала
одна маленькая проблема: все выглядело так сложно, что, казалось, без специального
образования в сфере компьютерных наук сделать неб-страницу просто
невозможно. После того как большинство создателей браузеров, включая таких,
как Mozilla (Firefox) и Apple (Safari), отказались делать браузеры, поддерживающие
XHTML 2, WЗС сменил направление деятельности и сформировал группу
разработчиков для очередного нового стандарта, которым стал HTML 5.
Программное обеспечение для CSS 21
Итак, HTML собирается вновь быть у руля. Но, по правде говоря, случится это
не раньше 2022 года. Иными словами, не беспокойтесь пока о том, что вам изучать:
HTML или XHTML.
В данный момент вы можете свободно использовать как HTML 4.01, так
и XHTML 1.0. Все браузеры понимают эти языки. В гл. 1 я вас познакомлю со способами,
которые укрепят связку HTML (или XHTML) и CSS.
ПРИМЕЧАНИЕ-----------------------------------------------Если
вы не очень хорошо знакомы с созданием веб-страниц, то многое покажется сложным и не
совсем понятным. Не волнуйтесь, в гл. 1 мы поговорим о таком современном инструменте, как WЗС
Validator, который служит для того, чтобы проверить правильность кода XHTML. Кроме того, он
проверяет правильностъ вашей страницы и сообщает, все ли в порядке.
Программное обеспечение для CSS
Чтобы создавать неб-страницы на языках HTML и CSS, вполне достаточно обычного
текстового редактора, такого как Блокнот в Windows или Text Edit в Macintosh. После
набора нескольких сотен строк кода HTML или CSS вы, наверное, захотите пользоваться
программ ой, более подходящей для работы с неб-страницами. В этом разделе
перечислены некоторые из них. Одни бесплатные, другие придется приобрести.
ПРИМЕЧАНИЕ-----------------------------------------------Существуют
буквально сотни программ, которые могут помочь вам в создании веб-страниц, поэтому
здесь приводится неполный список. Все же это самые популярные программы, которыми пользуются
любители CSS на сегодняшний день.
Бесплатные программы
Есть много бесплатных программ для редактирования неб-страниц и таблиц стилей.
Если вы все еще пользуетесь обычным текстовым редактором, то имеет смысл
попробовать одну из нижеприведенных программ.
О jEdit (Windows, Мае, Linux, http://jedit.org/). Бесплатный ___________текстовый редактор,
использующийjаvа, работает практически на всех компьютерах. В нем вы найдете
большинство тех функций, которые доступны в коммерческих программах,
включая подеветку синтаксиса для CSS.
О Notepad++ (Windows, http://notepad-plus.sourceforge.net/). Множество людей
просто преклоняются перед этим текстовым редактором. Естественно, в нем
есть встроенная функциональность, которая идеально подходит для написания
HTML- и СSS-кода, включая подеветку синтаксиса, - теги и другие ключевые
слова имеют собственные цвета, что значительно облегчает их поиск среди других
элементов HTML и CSS.
О НТМL-Кit (Windows, www.chami.com/html-kit/). Этот мощный редактор HTML/
XHTML предоставляет множество полезных средств для создания неб-страниц.
Среди них: предварительный просмотр неб-страницы непосредственно в программе
(поэтому вам не придется переключаться между браузером и редактором),
ярлыки для добавления НТМL-тегов и т. д.
22 Введение
О TextWrangler (Macintosh, www.barebones.com/products/textwranglerl). Эта бесплатная
программа - практически облегченная версия текстового редактора
BBEdit для Macintosh. У TextWrangler нет встроенных средств, облегчающих
редактирование HTML, но он обеспечивает цветовую подеветку синтаксиса
(имеется в виду, что теги и атрибуты просто подсвечиваются разными цветами
для удобного просмотра стран'ицы и определения ее фрагментов), имеется поддержка
протокола FTP (вы можете загружать файлы на сервер) и др.
Коммерческое программное обеспечение
Существует множество коммерческих программ для создания сайтов: от недорогих
тектовых редакторов до мощных конструкторов.
О EditPlus (Windows, www.editplus.com)- недорогой текстовый редактор, который
включает подеветку синтаксиса, поддержку FTP, автозавершение ввода и другие
функции.
О skEdit (Macintosh, www.skti.org)- дешевый редактор неб-страниц, полная поддержка
FTP /SFTP, подсказка команд и другие полезные функции.
О Coda (Мае, www.panic.com/codal). Многофункциональное средство для создания
неб-страниц. Включает в себя текстовый редактор, средство предварительного
просмотра страниц, FTP- и SFТР-клиент и графический интерфейс для создания
СSS-стилей.
О Dreamweaver (Macintosh и Windows, www.macromedia.com/software,ldreamweaver) -
визуальный редактор неб-страниц. Он позволяет видеть, как ваша страница выглядит
в браузере. Программа также включает мощный текстовый редактор
и превосходные инструменты создания кода CSS. Смотрите полную документацию
(например, мою книгу Dreamweaver: The Missing Manual, O'Reilly) для
эффективного использования этой мощной программы.
О Expression Web 2 (Windows, www.microsoft.com/expression)- новая программа
Microsoft для неб-дизайна. Она заменяет FrontPage и включает много профеесианальных
инструментов неб-дизайна, а также хорошую поддержку создания
кода CSS.
ПРИМЕЧАНИЕ-------------------------------------------------Здесь
речь идет о программах, которые позволяют редактировать код, написанный на НТМL/ХНТМL
и С55. Вам достаточно изучить всего одну из них для создания веб-страниц. Если у вас уже есть
любимый редактор HTML/XHTML, которым постоянно пользуетесь, но средства которого не позволяют
редактировать код С55, то можете найти (55-ориентированный редактор. Их список приведен
в приложении 3.
Об этой книге
Интернет-действительно очень удобное изобретение. К сожалению, правила, по
которым работает Сеть, не так просты для понимания. Программисты и технические
специалисты, которые пишут официальную документацию, поясняющую
основные понятия ее функционирования, не ориентируются на среднестатистического
пользователя. Зайдите на сайт www.w3.org{ТR/CSS21/, чтобы осознать, может
ли это быть понятно обычному человеку.
Об этой книге 23
Не существует никакого официального руководства для изучения CSS. Люди,
только начинающие заниматься этим, как правило, не знают, с чего начать. Цель этой
книги - служить руководством для обучения. На ее страницах вы найдете пошаговые
инструкции для создания красивых веб-страниц с использованием языка CSS.
Книга написана так, чтобы помочь читателям любого уровня. Для извлечения
МаКСИМалЬНОЙ ПОЛЬЗЫ ИЗ даННОГО материала ВЫ обязатеЛЬНО ДОЛЖНЫ УЧИТЬСЯ На
приведеиных примерах HTML и CSS. Если же вы никогда раньше не создавали
веб-страницы, то обратитесь к обучающему курсу, который приводится в конце
каждой главы.
Материал, содержащийся в этих главах, написан для продвинутых новичков
или тех, кто имеет средний уровень знаний в этой области. Если же вы плохо знакомы
с созданием веб-страниц, то для лучшего понимания освещаемой темы должны
ознакомиться с текстом врезки ~Информация для новичков~. С другой стороны,
если у вас имеется большой опыт создания веб-страниц, то не обращайте внимания
на эти врезки. Они содержат подсказки, nриемы и методы для компьютерных пользователей,
но не для опытных программистов.
ИНФОРМАЦИЯДЛЯНОВИЧКОВ
Разновидности CSS
Как производители операционных систем и уаройав
iPods, так и создатели CSS nоаоянно выnускают новые
версии своих nрограммных nродуктов. CSS 1, nоявившмйся
в1996 году, стал основой для дальнейшего
совершенавования языка каскадных таблиц стилей.
В этой самой nервой версии языка CSS были введены
основные nонятия и команды: Структура таблиц
стилей, nонятие идентификатора элемента (см. гл. 3)
и большая часть свойав CSS.
В версии CSS 2 были добавлены новые возможности,
включая совместимость с различными принтерами,
мониторами и другими устройствами. Здесь также
добавипись новые оnределения идентификаторов
злементов и сnособность точно nозиционировать злементы
на веб-араницах.
Данная книга nолностыо оnисывает версию языка CSS 2.1,
которая на сегодняшний день является стандартом
языка каскадныхтаблиц стилей. Она унаследовала все
возможности и особенности CSS 1. Сюда добавлены
некоторые новые свойава, а также исnравлены неточности
nредыдущих версий.
И все-таки CSS 2.1 мало чем отличается от CSS 2, и большинаво
браузеров давно адаnтированы nод лу версию.
Исключение составляет lnternet Explorer 6, всnедавие
чего вы найдете в книге много nримеров обходных
nутей nравильного отображения веб-страниц с исnользованием
CSS 2.1 в различных версиях браузера.
К счастью, в версии браузера lnternet Explorer 7 исnравлено
большинаво недостатков nредыдущих вер·
сий, а версия lntemet Explorer 8 наконец обрабатывает
nрактически все nравила CSS 2.1 верно.
Версия CSS 3 готовится к выnуску. Хотя Консорциум
World Wide Web (WЗС) еще не утвердил пот стандарт,
nроизводители некоторых браузеров уже адаnтируют
свои nрограммные nродукты с учетом рекомендаций
м особенноетем нового стандарта. Технология Safari
нового CSS 3 nредостав.nяет возможность добавлять
несколько изображений в фон одного элемента.
д вообще, очень много нововведений CSS 3 уже раб<r
тают в современных браузерах, так что вся глава 16
посвящена именно им. Лучшим ресурсом,вниматель·
но следящим за развитием нового стандарта CSS 3,
является сайт CSSЗ.info (http://www.cssЗ.info).
ПРИМЕЧАНИЕ------------------------------------------------
8 этой книге я периодически рекомендую nользоваться другой литературой по CSS, если темы недостаточно
развернуто освещены в данном руководстве.
24 Введение
Основные разделы книги
Книга разделена на четыре части, каждая из которых содержит несколько глав.
О Часть 1. Основы CSS. Здесь описано соэдание каскадных таблиц стилей в целом
и дан краткий обзор ключевых понятий, таких как наследоuание, идентификаторы
элементов, свойство каскадмости таблиц стилей. Попутно с изучением
CSS вы получите основные навыки написания кода HTML/XHTML.
Четыре обучающие программы закрепят полученные знания и дадут почувствовать
мощь каскадных таблиц стилей.
О Часть 2. Применеине CSS. Перенесет вас в реальный мир веб-дизайна. Вы изучите
наиболее важные свойства CSS и их использование для форматирования
текста, попрактикуетесь в создании полезных инструментов навигации и сможете
улучшить внешний вид своих экспериментальных веб-страниц, добавив
графику. Эта часть также содержит рекомендации, как улучшить вид распечатываемых
веб-страниц и как создавать красивые таблицы и фqрмы.
О Часть 3. Макет страницы. Поможет вам разобраться с самым запутанным, но
очень полезным аспектом CSS: управлением размещения элементов на странице.
Вы познакомитесь со схемами дизайна (размещение разделов в два и три
столбца) и узнаете, как добавить боковые меню. Вы также узнаете о двух основных
методах позиционирования элементов на странице: абсолютном и относительном.
Кроме того, главы этой части научат вас создавать совершенные веб-страницы,
которые выглядят одинаково хорошо как на экране монитора, так и в распечатанном
виде. Описаны также методы еще более эффективного применения CSS.
Ну и, конечно же, именно эдесь вы узнаете о будущем CSS, а также научитесь
использовать некоторые новейшие возможности CSS 3, работающие уже сегодня.
О Приложения. Справочник свойств CSS описывает каждое свойство в отдельности
в простой и доступной для понимания форме, служит для быстрого поиска
нужных эЛементов, облегчения повторения пройденного курса обучения.
По сути, это систематизированный справочник CSS. В остальных двух приложениях
находится описание инструментов и средств для создания и применения
каскадных таблиц стилей: от приемов создания кода CSS в программе
Dreamweaver до перечия полезных сайтов и книг.
Примеры программнога кода на CSS
Эта книга создана для того, чтобы организовать быструю и профессиональную
работу с вашими веб-проектами.
По ходу чтения книги вы будете находить примеры пошаzовых обучающих программ,
которые сможете выполнять, используя исходные данные (графические
образы и неэаконченные веб-страницы),'эагруженные с сайта www.sawmac.com/
css2e/. Вы немногому научитесь, если просто прочтете эти уроки, отвлекаясь на еще
что-нибудь. Однако если не будете торопиться, а станете терпеливо работать над
Основная терминология 25
примерами на компьютере, то это даст реальное понимание того, как проектировщики-
профессионалы создают веб-страницы.
В обуЧающих уроках вы также найдете URL законченных страниц, чтобы сравнить
свою работу с требуемым конечным результатом. Другими словами, вы не только
увидите, как веб-страницы должны выглядеть внешне, но и найдете их в Интернете.
О сайте MissingManuals.com
На сайте www.missingmanuals.com вы можете найти статьи, подсказки, обновления
к данной книге. Я охотно прислушиваюсь к вашим замечаниям, дополнениям, исправлениям,
касающимся содержания, и уЧИтываю их. Книга претерпевает изменения
всякий-раз, когда мы выпускаем очередной ее тираж, вносим уточняющие
исправления, выбранные из тех, которые вы предлагаете на сайте.
На сайте также можно подписаться на бесплатную рассылку, которая уведомит
вас о запуске в печать новых книг.
Основная термин_ология
При чтении данной книги и выполнении примеров на компьютере вы должны быть
знакомы с некоторыми терминами и понятиями.
О Щелчок кнопкой мыпm. Пользуясь манипулятором типа ~мышь>.> вашего компьютера,
вы можете выполнить три действия. Щелчок кнопкой мыши означает,
что нужно навести указате.т.rь мыши на какой-либо объект на экране монитора,
а затем, не перемешая указатель, нажать и отпустить левую кнопку мыши. Двойной
щелчок кнопкой мыши означает, соответственно, быстрое нажатие кнопки
мыши дважды, опять-таки не перемещая указатель. Перетаскивание мышью
означает перемещение указателя при нажатой и удерживаемой кнопке мыши.
Если говорится, что нужно выполнить щелчок кнопкой мыши на Macintosh или
Сtгl-щелчок на РС, то вы просто щелкаете кнопкой мыши, предварительно
нажав клавишу Х или Ctrl (две клавиши Ctrl находятся по обе стороны от клавиши
Пробел).
О Ме100. Это строка с кнопками, находящаяся вверху вашего экрана или окна: File
(Файл), Edit (Редактирование) и т. д. Чтобы появился список команд, соответствующих
каждому конкретному пункту меню, нужно просто щелкнуть кнопкой
мыши на нужном слове (пункте меню), в результате раскроется перечень
команд меню.
О ОперациоiПIЫе системы. В книге подразумевается, что вы знаете, как открывать
программы, просматривать страницы в Интернете, загружать файлы. Вы должны
знать, как пользоваться меню Пуск в Windows или • -меню в Macintosh, а также
Панелью управления в Windows или Системными настройками в Macintosh OS.
Если вы владеете всей этой информацией, то у вас есть необходимая техническая
основа для того, чтобы попробовать себя в программировании и насладиться
возможностями языка CSS, читая это руководство.
26Веедеtiие
Остреnках
В этой книге вы будете находить текст такого рода: •Откройте папку System ~ Library
~ Fonts (Система~ Библиотека~ Шрифты)~. Это сокращение ряда цепочки
команд, которые вы должны выnолнить, чтобы открыть nоследовательно три вложенные
папки. Это означает: • На жестком диске найдите папку под названием
System (Система). Откройте ее. В окне системной nаnки есть nапка под названием
Library (Библиотека); дважды щелкните кнопкой мыши, чтобы открыть ее. В этой
nапке находится папка с названием Fonts (Шрифты). Дважды щелкните кноnкой
мыши и также откройте ее~ .
Точно такие же сокращенные команды помогут вам открыть нужный пункт
меню, как показано на рис. 0.1.
Page S!turce CtrliU
E<J!Sal!en F11
XieW Sooxce O>art
Рмс. 0.1. Такой способ перехода по стрелкам уnрощает выnолнение команд меню
Например, выбор меню View ~ Text Size ~ Increase (Вид ~ Размер шрифта ~ Увеличить)-
более компактный способ сказать: • В nункте меню View (Вид) выберите подпункт
Text Size (Размер шрифта), а затем выберите подпункт Inaease (Увеличить)~.
Соглашения, использованные в данной
книге
Здесь приводится список соглашений, использованных в данной книге.
Шрифт для названий
Применяется для отображения URL, а также названий папок и выводимой на
экран информации.
ШрИфт для команд
Используется для имен файлов, названий путей, имен переменных и команд.
Например, путь будет выглядеть так: /Oeve 1 oper 1 Арр 1 i cat i ons.
Технология SafariФ 27
Шрифт с nостоянной шириной
Применяется для отображения примеров исходного кода и содержимого файлов.
Пол)'llирный wрифт с постоянной wириной
· Используется для выделения кода, добавленного в старый код.
Вам следует обращать особое внимание на специальные заметки, отделенные
от основного текста.
ПРИМЕЧАН ИЕ-----------------------------------------------Это
_________________подсказка, пожелание, заметка общего типа. Содержит nолезную nрикладную информацию no
рассматриваемой теме.
ВНИМАНИЕ---------------------------------------------------Это
предостережение или указание, говорящее о том, что вам необходимо быть внимательным. Оно
часто указывает на то, что ваши деньги или ваша частная информация могут оказаться под угрозой.
СОВЕТ ------------------------------------------------------
Это совет. Советы содержат полезную информацию no рассматриваемой теме, зачастую выделяя
важные концепции или лучшие практические решения .
Технология Safari®
Salari·
ВООК8 ONLINE
