Когда вы видите рисунок Safari® EnaЫed на обложке своей
любимой технической книги, это значит, что вы можете по лучить
доступ к этой книге в Интернете с помощью электронной
библиотеки O'Reilly Safari.
Safari предлагает более продвинутую систему, чем электронные
книги . Это виртуальная библиотека, которая по-
зволяет проводить nоиск по тысячам лучших технических
книг, копировать фрагменты примеров исходного кода, загружать целые главы,
а также находить быстрые ответы на вопросы, когда вам нужна наиболее точная
и современная информация по данной теме. Воспользуйтесь бесплатно этой библиотекой
по адресу http:/ /my.safa riЬooksonline.com.
От издательства
Ваши замечания, предложения и вопросы отправляйте по адресу электронной почты
halickaya@minsk.piter.com (издательство ~литер!>, компьютерная редакция).
Мы будем рады узнать ваше мнение!
На сайте издательства http:/ /www.piter.com вы найдете подробную информацию
о наших книгах.
ЧАСТЬ 1
Основы CSS
Глава 1.CSS- новый подход к HTML
Глава 2. Создание стилей и таблиц стилей
Глава 3. Селекторы: определение элементов стилизации
Глава 4.Механизм наследования стилей
Глава 5. Управление сложной структурой стилей: каскаднесть
1 css -новый подход
кНТМL
Ваша неб-страница должна иметь грамотно написанный НТМL-код, чтобы можно
было сказать, что вы достигли наилучших результатов, применяя CSS. Из этой главы
вы узнаете, как писать НТМL-код, хорошо адаптированный под нужды CSS. Если
вы используете на своих неб-страницах CSS, то фактически становится ле?:Че писать
НТМL-код. Больше не нужно применять средства НТМLдля создания и улучшения
дизайна страниц (собственно, HTML для этого никогда и не предназначался). Все,
что связано с графическим дизайном страниц, обеспечивается с помощью CSS.
Соответственно, работа над основным кодом неб-страниц на языке HTML упрощается,
поскольку НТМL-страницы, написанные для совместной работы с CSS, имеют
менее громоздкИй, более попятный и прозрачный код. При этом, естественно, страницы
загружаются быстрее, что немаловажно для посетителей вашего сайта.
Посмотрите на рис. 1.1. Дизайн обеих страниц одинаков, однако верхняя создана
лишь с использованием CSS, а нижняя- только с помощью HTML. Размер
НТМL-файла верхней страницы всего 4 Кбайт, в то время как его размер для нижней
страницы, полностью написанной на HTML, - почти в четыре раза больше
(14 Кбайт). Подход к написанию неб-страниц с применением исключительно
HTML требует намного большего объема кода, чтобы достичь практически тех же
визуальных эффектов: 213 строк НТМL-кода по сравнению с 71 строкой для версии
с применением CSS.
HTML:прошлое и настоящее
Как говорилось во введении, HTML или XHTML на сегодняшний день являются
основой для написания любой неб-страницы во Всемирной паутине. При использовании
CSS написание кода на языке HTML коренным образом меняется. Забудьте
про НТМL-теги, которые совсем не подходят для создания дизайна страниц
и достижения визуальных эффектов. Особенно это касается НТМL-тегов типа
<font>. В следуюЩих разделах я объясню почему.
ПРИМЕЧАНИЕ------------------------------------------------
8 этой главе все, что говорится про HTML, касается и XHTML. Существует множество разновидностей
HTML и XHTML. В итоге нужно выбрать свой вариант и убедиться, что в вашей неб-странице определены
тип и версия языка разметки, иначе браузеры посетителей не смогут корректно отобразить
содержимое веб-страниц. О том, как сообщить CSS о версии HTML/XHTML, на котором написаны
ваши веб-страницы, я расскажу чуть ниже.
HTML: прошлое и настоящее
8 Saucy Succutents to Splce Up Your ledroom
loгem ipsum dolor sit omet,lorem ipsum dolor slt omet.
sed dlom nonummy nJЬh eulsmod tfncldunt ut.
lfADIМEЯ08Y
8 Saucy Succulents to Splce Up Your Bedroom
lorem fpsum doloг s!t amet,lorem ipsum dolor sll amet, sed
IIUDnt8SТCМIY
~ ... ..., .........
Lorem ipNm dolor ~i t e
o"...t.
Lorem ipsum dotor ~i1e
omei,
lrtdoorurwt.s: sod or
sнd?
L'O'fё'm' ipsum dolor site
2!!l!1
DolorSИAmet
Lorem iotviТ' dolor site
Рмс. 1.1. Веб-диэайн с применением CSS делает написание НТМL-кода проще
Прошлое HTML:все выглядело прилично
Когда rpynna ученых создала Интернет, 'который первоначально предмазначался
для совместного использования и поиска технической документации, никто и не
задумывалея о том, что документы могут содержать графическую информацию.
HTML нужен был только для структурирования информации и представления
32 Глава 1. CSS- новый подход к НТМL
документов ____________в простом и понятном виде. Возьмем для примера тег <hl>. Он выде:
тяет в тексте важный заголовок, а тег <h2> создает подзаголовок с меньшим размером
шрифта. Другой широко используемый тег -<о 1 > ( ordered list - «упорядоченный
список~) - создает нумерованный список для перечислений типа: «Десять
причин не играть с медузой~.
Когда язык HTML стали применять не только ученые, но и обычные пользователИ,
они захотели, чтобы их неб-страницы выглядели красиво. С тех пор дизайнеры
неб-страниц начали использовать теги для стилизации страниц в дополнение
к их основному назначению - структурированию данных. Например, вы можете
применить тег <Ь 1 ockquote> (предназначен для цитирования материала из другого
источника) к любому тексту, который нужно выделить небольшим отступом вправо.
Вы можете пользоваться тегами заголовков, чтобы выделить любой текст полужирным
шрифтом большего размера, независимо от того, заголовок это или нет.
Достаточно сложный способ применеимя тега <tab 1 е> был придуман веб-дизайнерами,
чтобы создать колонки текста, а также точно позиционировать изображения
и текст на странице.
Поскольку тег первоначально предназначался для отображения таких таблиц,
как результаты исследовательских данных, расписания поездов и т. д., проектировщикам
пришлось упражняться в применении тега <tab 1 е> самыми необычными
способами, создавая неоднократно вложенные таблицы, чтобы содержимое небстраниц
смотрелось красиво.
Тем временем производители браузеров также прилагали усилия в совершенствовании
языка разметки, вводя новые теги и атрибуты для улучшения дизайна
неб-страниц. Например, тег <font> позволяет определять цвет, Irачертания и один
из семи размеров шрифта (это приблизительно в 100 раз меньше типоразмеров
шрифта, чем предлагает редактор Microsoft Word).
Наконец, когда проектировщики не могли добиться нужных результатов, они
часто применяли графику. Например, использовали очень большой рисунок в качестве
фона для неб-страницы или нарезали его на маленькие графические файлы
и собирали их воедино в таблицах, чтобы воссоздать оригинальное изображение.
По мере использования всех этих премудростей и применеимя атрибутов тегов,
широкого употребления изображений и т. д. для изменения дизайна страниц
НТМL-код разрастался до неузнаваемости.
Настоящее HTML:фундамент для CSS
Независимо от того, что представляет собой неб-страница - календарь промыслового
сезона, схему проезда к ближайшему супермаркету или фотоальбом прошлого
дня рождения вашего ребенка, - именно ее дизайн создает имидж, заставляя сайт
выглядеть профессионально. Хороший дизайн страниц сайта помогает донести послание
его посетителям, которые должны легко найти там именно то, что ищут.
Таким образом, чтобы неб-страницы на языке HTML выглядели привлекательно,
дизайнерам приходилось усиленно трудиться. Дизайн с помощью CSS позволяет
HTML вернуться к исполнению своей прямой обязанности - созданию структуры
документа. Использование HTML для дизайна неб-страниц на сегодняшний
день является признаком дурного тона. Поэтому не волнуйтесь по поводу того, что
Написание НТМL-кода для CSS 33
у тега <hl> слишком большой размер шрифта или отступы упорядоченного списка
очень велики. Вы сможете изменить их с помощью таблиц стилей CSS. Во время
написания кода думайте о HTML как о средстве структурирования. Используйте
его, чтобы упорядочить содержимое страницы, а CSS- чтобы сделать это содержимое
привлекательным.
Написание НТМL-кода для CSS
Для тех, кто не очень хорошо знаком с веб-дизайном, возможно, будут полезны
некоторые подсказки относительно языка HTML. Если раньше вы уже создавали
веб-страницы, то сможете избавиться от стиля написания НТМL-кода, который
. лучше быстрее забыть. Сейчас речь пойдет о стиле написания НТМL-кода для его
совместного использования с кодом CSS.
Думайте о структуре
HTML придает особый вид тексту путем деления его на логические блоки и их
определения на веб-странице: например, основное назначение тега <hl>- создать
заголовок-введение, предшествующий основному содержимому страницы. Заголовки
второго, третьего уровней и т. д. - подзаголовки - позволяют делить содержимое
страниц на менее важные, но связанные разделы. У веб-страницы, как у книги,
которую вы держите в руках, должна быть логическая структура. У каждой главы
этой книги есть заголовок (отформатированный, например, тегом <hl>), а также
несколько разделов и, соответственно, подзаголовков (например, с тегом <h2>),
которые, в свою очередь, содержат подразделы с заголовками более низкого уровня.
Представьте, насколько сложнее было бы читать эту книгу, если бы весь текст
состоял из одного длинного абзаца, без деления на разделы, подразделы, пункты,
без выделения примечаний, гиперссылок и т. д.
ПРИМЕЧАНИЕ-----------------------------------------------Дополнительную
литературу по языкам разметки HTML./XHTML вы сможете найти в руководстве
HTML & XHTML: Тhе Defiпitive Guide Чака Мусциано (Chuck Musciaпo) и Билла Кеннеди (Bill Кеппеdу),
издательство O'Reilly, а обучающие программы и примеры-на сайте www.wЗschools.com. Полный
перечень всех доступных тегов языков разметки HTML./XHTML приведен на сайте www.wЗschools.
com/tags/.
Помимо тегов заголовков, в HTML есть множество других тегов дляразметки
содержимого веб-страницы, а также для определения назначения ее каждого логического
фрагмента. Наиболее часто применяют следующие теги: <р> - для создания
абзацев текста, <ul>- для создания маркированных (ненумерованных) списков.
Далее по степени применения идут теги, отображающие специфичное содержимое,
например <abbr> - сокращения, аббревиатуры, <code> - программный код.
При написании НТМL-кода для CSS, выбирая теги, ориентируйтесь на роль,
которую играет фрагмент текста на веб-странице, а не на внешний вид, который
текст приобретает благодаря этому тегу (рис. 1.2). Например, перечень ссылок на
нанели управления - это и не заголовок, и не абзац текста. Больше всего это
34Глава 1. CSS- новый nо.Ф<од к HTML
похоже на маркированный список параметров. Таким образом, выбираем тег <ul >.
Вы можете сказать, что элементы маркированного списка расположены вертикально
один за другим, а нам требуется горизонтальная паиель управления, в которой
все ссылки располагаются горизонтально. Об этом можно не беспокоиться. Средствами
CSS очень просто преобразовать вертикальный список ссылок в элегантную
горизонтальную паиель управления, о чем вы сможете прочитать в гл. 9.
