Шаг 2: Создание таблиц стилей

Давайте создадим таблицу стилей, которая сделает на сайте «Ботинки не лю­бовь. Хорошая разметка» такой же внешний дизайн, как на сайте «Ботинки не любовь. Плохая разметка». В главе 5 мы начали работать над таблицей дляоформления текста (см. табл. 5.1). Можете использовать эту таблицу в качестве основы для создания своих таблиц стилей. 

Рис. 7.9. Перед созданием таблицы стилей сайт должен выглядеть, как простой старый HTML-сайт. На самом деле единственный способ убедиться в том, что вы провели хорошую работу по созданию разметки, — посмотреть, как сайт выглядит без таблиц стилей. Если сайт работает правильно, это знак того, что вы сделали страницу с основательной структурной разметкой. У вас будет хорошая возможность увидеть, что получат пользователи неграфических браузеров, таких как карманные компьютеры и браузеры Брайля.

Таблицы стилей созданы из правил (rules), а правила составлены из селек­торов (selectors), значений (values) и свойств (properties). Этот фрагмент тек­ста — CSS-правило:

body   {

color:      #ffffff background-color:   #333333; margin-left:    70px; margin-right:   70px;}

Браузер знает, что это правило должно применяться по отношению к телу HTML-страницы благодаря первой строке — селектору тела (body selector). После селектора тела стоят фигурные скобки, которые говорят браузеру, что ему сейчас будут сообщены некоторые свойства. Первое свойство — это цвет (color) основного шрифта. Это свойство имеет шестнадцатеричное значение белого — #ffffff. Укороченная версия, #f f f, может быть также использована для того, чтобы сэкономить несколько байтов трафика пользователя. Это очень просто. Удостоверьтесь в том, что вы используете двоеточие для отделе­ния свойств от их значений. Некоторые люди используют знак равенства — это делается интуитивно и является ошибкой.

После свойства color в листинге указано еще несколько свойств стиля и их значения. Обратите внимание, что каждое свойство стиля отделено от своего «соседа» точкой с запятой. Вообще, последнее в правиле свойство стиля не нужно отделять точкой с запятой, однако использовать этот знак в данном слу­чае все равно полезно в целях единообразного оформления листинга и во из­бежание ошибок, которые могут возникнуть, если в дальнейшем вы поменяете порядок, в котором перечислены свойства, или добавите другие свойства. Кро­ме того, в листинге есть свойство фона со значением #333333 (приятный тем­но-серый цвет), а также свойства ширины правого и левого полей, каждое из которых имеет значение 70 пикселей. Закрывающие фигурные скобки сообща­ют, что определение правила было закончено. Таким образом, теперь у вас есть документ с одним правилом, который делает сайт с белым текстом, темно-се­рым фоном и правым и левым полями по 70 пикселей.

Вы можете дополнять сайт, создавая новые правила и добавляя в них новые свойства и значения. Теперь, когда вы знаете, как называется каждая из частей CSS-документа, можете сделать такой документ для сайта «Ботинки не любовь».

Давайте создадим таблицу стилей, которая предложит нам такой же дизайн, как на рис. 7.8, с применением возможностей, которыми обладает только CSS. Начнем с простых вещей: цвета и оформления текста.

Цвет и оформление текста

Вам необходим темно-серый фон, белый текст и два вида шрифтов: Verdana для основного текста и Georgia для заголовков (листинг 7.10). Конечно, как обсуж­далось в главе б, если бы это была таблица стилей реального сайта, вам бы по­надобились запасные шрифты, чтобы быть уверенным, что дизайн будет рабо­тать на различных платформах, включая те, которые не располагают шрифтами Verdana или Georgia. Поэтому включите и запасные шрифты в таб­лицу стилей.

Листинг 7.10.  Таблица стилей для сайта на рис.  7.8

  1. body   {
  2. color:    #ffffff;
  3. background-color:   #3 33333;
  4. font-family:   verdana,   geneva,   arial,   sans-serif;
  5. margin-left:   70px;
  6. margin-right:   70px;}
  7.  div,   p,   th,   td,   li,   dd,   dl,   dt   {
  8. color   :    #ffffff;
  9. font:   llpx/18px verdana,   geneva,   arial,   sans-serif;}
  10. hi,   h2,   h3,   h4,   h5,   h6        {
  11. color   :   iffffff;
  12. font-family:   georgia,   times  new  roman,   times,   serif;
  13. margin-bottom:   lpx;  }
  14.  [•
  15. hi       {
  16. font-size:   1.8em;
  17. text-transform:   uppercase;
  18. text-align:   justify;}

 

Строки 1-18 таблицы стилей basic.ess (листинг 7.10) задают цвет и парамет­ры для оформления текста сайта (рис. 7.8).

Строка 1 начинается с правила для селектора тела. Строка 2 сообщает свой­ство цвета со значением #ffffff- иначе говоря, задает белый цвет. Строка 3 определяет цвет фона сайта (#333333, или темно-серый), а строка 4 — шрифты по умолчанию, такие как Verdana, Geneva, Arial или любой шрифт без засечек, который установлен в вашем компьютере.

Строки 5 и б добавляют к правилу тела сайта еще два свойства и, таким обра­зом, берут на себя работу, которую раньше должны были выполнять таблицы: они определяют края слева и справа от содержания сайта. Всего лишь две стро­ки CSS выполняют работу, которую раньше делало множество HTML-таблиц. Это, дамы и господа, экономия.

Впрочем, CSS не полностью экономичны, по крайней мере, в том, что зави­сит от поддержки различных браузеров. CSS предлагают экономию, благодаря тому что свойства-потомки наследуют признаки от свойств-родителей. Прави­лу абзаца, например, следует унаследовать свойства и значения у правила тела. Таблица стилей не должна быть избыточной (то есть задавать одно и то же несколько раз). Однако наследование не всегда очевидная вещь для браузеров, особенно для Netscape 4.O. Поэтому в строке 8 длинное правило. Это правило для разделов, абзацев, заголовков таблиц, ячеек таблиц и других самых разно­образных элементов. Для различных браузеров вам следует подробно написать, что каждый из этих элементов должен отображаться белым, поэтому строки 9 и 10 определяют цвет, шрифт, размер шрифта для целой массы элементов. Все равно это намного эффективней, чем заворачивать каждую строку текста в тег шрифта.

Строки 12-15 определяют правило для заголовков. Эти свойства и значения сообщают браузеру, что заголовки должны отображаться белым шрифтом Georgia (или Times New Roman, или Times, в зависимости от имеющихся на компьютере пользователя шрифтов).

Значения и свойства — это все, что требуется. Вы можете добавлять какие угодно значения и свойства. Многие из этих значений и свойств делают вещи, которые простой старый HTML просто не мог сделать, потому что он никогда и не собирался это делать. Некоторые из этих свойств и значений описывают­ся далее.

Поля, интерлиньяж и другие пустые пространства

Возможно, вы обратили внимание, что в строке 10 размер шрифта выражен как 11 пикселей/18 пикселей (11 рх/18 рх), а строка 15 определяет нижний отступ для всех заголовков как 1 пиксель (1 рх). Здесь CSS выполняют тон­чайшую работу, которая просто не может быть сделана с помощью HTML, ко­торый используется для внешнего вида сайта. Строка 11 рх/18 рх сообщает браузеру о том, что текст должен отображаться размером 11 пикселей, но оставлять небольшой междустрочный пробел. Если вы вернетесь назад и сравните рис. 7.7 (старая школа, нет междустрочных пробелов) с рис. 7.8, вы увидите, насколько междустрочные пробелы улучшают читабельность тек­ста в последнем примере. Также нижний отступ в 1 пиксель под элементами заголовка позволяет удачно разместить текст относительно заголовка. Таким образом проще визуально идентифицировать абзац, чем если бы заголовок был сразу же над текстом. HTML-форматирование старой школы не может такого сделать.

Для получения более подробной информации относительно полей, отсту­пов и междустрочных пробелов смотрите первую спецификацию Cascading Style Sheets на сайте W3C (www.w3.org/TR/REC-CSSl). Здесь многому придется учиться, но с этими знаниями вам будет намного лучше.

Преобразование текста

Давайте немного развлечемся, прежде чем перейдем от оформления текста к верстке страницы. При помощи CSS вы можете легко преобразовывать текст. Строка 17 содержит правило, которое определяет элемент hi более точно (лис­тинг 7.10). Строка 19 содержит свойство text-transform со значением uppercase (заглавные буквы). Это сообщает Web-браузеру о том, что все элемен­ты текста в <hl> должны быть отображены заглавными буквами. Вы можете ис­пользовать такое преобразование текста для того, чтобы, например, отобра­зить первые несколько слов абзаца буквами. Опять-таки, первая спецификация Cascading Style Sheets на сайте W3C расскажет вам о том, как использовать пре­образование текста (см. www.w3.org/TR/REC-CSSl).

Верстка страницы

Теперь, когда мы разобрались с оформлением текста и цветом, давайте разбе­ремся с компоновкой (версткой) сайта. Верстка — это просто. Для того чтобы создать макет страницы, необходимо разбить ее на три основных части: нави­гация, боковая панель и область основного текста. Затем нужно создать прави­ла, которые разместят эти фрагменты в различных областях экрана.

Когда вы подчистите HTML-страницу, ваша навигация превратится в спи­сок. Теперь вы должны немного «поколдовать» над CSS, чтобы изменить ото­бражение этого списка. Можно было бы создать правило для всех ненумеро­ванных списков, но тогда получится, что все они будут выглядеть, как навигация. А ваш сайт, возможно, содержит некоторые простые старые спис­ки, которые не занимаются навигацией. Поэтому вам надо создать специаль­ное правило, которое распространяется исключительно на ненумерованный список в навигационной области. Это делается благодаря созданию идентифи­катора (identifier), который позволяет таблице стилей создать специальный внешний вид для списка в навигации.

Определение

CSS Селекторы класса (Class Selectors) и ID-селекторы (ID Selectors). CSS использу­ет селекторы класса и ID-селекторы для того, чтобы отбирать и оформлять некоторые блоки HTML из Web-страницы. Работают они практически одинаково, но идентифика­торы (они же ID-селекторы) используются только один раз на странице, а классы мо­гут использоваться повторно. Используйте селекторы класса, когда вы хотите офор­мить элемент, который будет появляться на странице много раз, например абзац или заголовок. ID-селектор надо применять для единственного в своем роде элемента, на­пример для панели навигации или логотипа.

ID-селектор в таблице стилей создается при помощи знака решетки (#). Синтаксичес­кая структура выглядит следующим образом: #someidentifier    {

Таким образом можно задать любой элемент в HTML-документе, у которого есть id-атрибут:

<div   id=»someidentifier»></div>

Идентификаторы класса выглядят приблизительно так же, но вместо знака решетки здесь используется точка:

.someclass   { } Из HTML-документа берутся элементы с атрибутом class, а не с атрибутом id:

<div   class=»someclass»></div>

Селекторы могут и должны использоваться для всего сайта. Старайтесь давать селек­торам значимые названия — так вам будет проще их запомнить. Когда вы создаете верхнюю и боковую навигацию, используйте селекторы с именами tppnav и sidenav. Один мой коллега давал селекторам изящные, но ничего не значащие имена, напри­мер pimpkinbox. Если бы за каждый раз, что мне приходилось возвращаться к таб­лицам стилей, чтобы вспомнить имя того или иного селектора, мне платили по центу, я бы отоваривалась исключительно в бутиках, а не на распродажах. При изменении дизайна вам будет значительно легче, если у вас будут подобающие названия селек­торов в таблицах стилей и разметке; тот факт, что имена логичны и просты для запо­минания, упростит вашу работу по переделке дизайна.

Обратите внимание, что это всего лишь часть информации о селекторах: существуют также типовые (type selectors) и универсальные селекторы (universal selectors). Исполь­зование каждого вида селектора определяется сложными правилами. Для более под­робного ознакомления с ними см. страницу www.w3.org/TR/1999/REC-html401-1 9991 224/types.html#type-id.

На XHTML-странице вам необходимо прикрепить идентификатор (атрибут id) к списку навигации. Листинг 7.11 показывает ненумерованный список, за­несенный в тег раздела div.

Листинг 7.11.  Простая разметка уменьшает количество ненужного балласта на сайте

  1. <div id=»menu»>
  2. <ul>
  3. <lixa    href =» index. html» >Ботинки   —   Г л авнаж / ах / Н >
  4. <lixa    href = » /story/ «>Ваша ис ториж / ах / Н >
  5. <lixa    href =» /read/ «>Читайте   истории<ах /П>
  6. <lixa    href =» /help/ «>Получите   помощь<ах / Н>
  7. <lixa    href = » /answers/ «>Найдите  ответы<ах/И>
  8. <lixa    href =» /forum/» Поучаствуйте   в   форуме<ах/И>
  9. </ul>
  10. </div>
  11. <div  id=»sidebar»>
  12. <pximg  src= «images/carriel    6mo_c .gif»   alt = «Увлечение  ботинками
  13. может  коснуться  даже  молодых.»  width=»239″   height=»243″   />
  14. <cite>Дaжe   в  шесть  месяцев  я  была  сильно  привязана  к ботинкам.   Это  была  семейная  шутка,
  15. но  для  меня  это  не  было  шуткой.   Это  было  по-настоящему.  . .</ cite>    (читайте   больше   об   <а  href=»story.html»>истории
  16. Мелиссы</а>) . </р>
  17. <pximg  src= » images/susan . gif »   alt=»Жизнь  снова  может  стать хорошей»  width=»239″  height=»243″   />
  18. <cite>OTcyTCTBne  необходимости  покупать  ботинки  сделала  меня новой  женщиной…</cite>    (читайте   больше   об
  19. <а  href=»story.html»>истории  Кейт</а>).</р>
  20. </div>
  21. <п2>3ачем  нам  нужны  ботинки?</п2>
  22. <p>Lorem  ipsum  dolor   sit   amet,    consectetuer  adipiscing  elit. Sed  commodo   elit  viverra   lectus.    Sed  nisi   dolor,   porttotor
  23. sit  amet,   posuere  nee,   iaculis  at,   orci.   <a
  24. href=»erat.html»>maecenas,libero  erat</a>,   mattis  at,   volutpat   in,
  25. fermentum  at,   dui .   Phasellus  ut   erat  nee   lorem  vestibulum lacinia.   Cras   turpis  nulla,   aliquot  vulputate,   vestibulum  at,
  26. rhoncus   eu,    leo.   Nam  rutrum.    Integer  consectetuer  tortor  nee nunc .   Nullam  vehicula  mauris .    Sed  accumsan,   mi   eget
  27. ultrices   lobortis,    lacus  nulla  voluptat  dolor,   ut   faucibus tellus   justo   in   lectus.
  28. Morbi  bibendum.   Interger  quis  risus.  Morbi  accumsan  lectus id  dui.   <a  href=»sapien.html»>etiam  purus  sapien</a>,   tempus  ut,
  29. laoreet  id,   tempor  vitae,  diam.
  30. Cras  odio  metus,   lobortis  non,  pulvinar  in,  accumsan  id, ante,   aliquam  neque.   Pellentesque  eros.  Nam  ultricies  sem  nee
  31. ante.  </p>
  32. <Ь2>Есть  ли  у  вас  проблемы  с  ботинками?</п2>
  33. <р>  Pellentesque  habitant  morbid  tristique  senectus  et  netus et  malesuada  fames
  34. ac  turpis  egestas.   Pellentesque  habitant  morbid  tristique senectus  et  netus
  35. et  malesuada  fames  ac  turpis  egestas.</p>

Тег div содержит идентификатор (id) меню (menu). Это все, что вам нужно. Вы можете дать этому идентификатору любое название, однако лучше всего давать название, которое имеет смысл и которое легко запомнить и написать. Теперь CSS-правила, которые вы создаете для этого идентификатора, будут применены к этому разделу внутри тега div.

Поэтому давайте создадим правило или — в данном случае — правила. Для обеспечения необходимого внешнего вида вам понадобится три.CSS-правила. Листинг 7.12 показывает, как выполняется эта задача. Пример продолжает CSS-документ, начатый в листинге 7.10, где мы оформили основные элементы стра­ницы, такие как тело, абзацы и заголовки.

Листинг 7.12.  Таблица стилей выполнит работу по оформлению

  1. .first {
  2. margin-top:   0;
  3. padding-top:   0;
  4. text-transform:   uppercase;}
  5. #menu  ul,   #menu  li  {
  6. display:   inline;
  7. margin:   0;
  8. padding:   0;
  9. color:   #333399;
  10. text-transform:  uppercase;
  11. text-align:   justify;}
  12. #menu  ul  {
  13. width:   800px;}
  14. tmenu  li  a   {
  15. padding:   7рх;
  16. background:   #666666;
  17. color:   tffffff;
  18. border:   solid  lpx  #999999;
  19. text-decoration:  none;}
  20. #menu  li  a:hover  {
  21. background:   #333333;}
  22. #sidebar  {
  23. width:   245px;
  24. text-align:   justify;
  25. padding:   20px,   Opx,   20px,   2 Opx;
  26. float:   right;}
  27.  #menu  li   a   {
  28. padding:    7px;
  29. background:    #666666;
  30. color:    #ffffff;
  31. border:    solid  lpx   #999999;
  32. text-decoration:   none;}
  33. #menu   li   a: hover   {
  34. background:    #333333;}
  35. #sidebar   {
  36. width:    245px;
  37. text-align:    justify;
  38. padding:   20px,   Opx,   2Opx,   2Opx;
  39.  float:   right;}

Правило, которое начинается в строке 26, устанавливает основные характе­ристики ненумерованного списка. Это правило определяет внешний вид тек­ста и устанавливает, что этот список будет отображаться горизонтально, а не вертикально, как это обычно принято:

строка 27 содержит свойство отображения со значением inline (в ряд).Это сообщает браузеру, что вы хотите, чтобы ненумерованный список и пункты списка, идентифицированного как menu, отображались в ряд (го­ризонтально, а не вертикально). Это не является гарантией того, что текст автоматически не перейдет на новую строку; это обеспечивает лишь то, что браузер не будет выставлять разрыв новой строки после каждого предмета в списке;

  • строка 32 содержит свойство text-align (выравнивание текста) со зна­чением justify (по ширине), которое отключает выравнивание по левому или по правому краю;
  • строка 38 оставляет немного места между пунктами меню, чтобы текст мог располагаться более свободно;
  • строка 39 придает кнопкам меню светло-серый фон;
  • строка 40 делает текст белым;
  • строка 41 добавляет каждой кнопке окантовку в 1 пиксель.

Чтобы задать включенное состояние ролловера, строки 44 и 45 сообщают браузеру о том, что, когда пользователь наводит курсор на ссылку, фон кнопок меню должен поменяться на темно-серый (#333333).

Теперь поговорим о боковой панели. Все, что вам нужно от этой панели, -чтобы она отображалась в правой части окна браузера. Опять-таки, надо со­здать специальный идентификатор sidebar. Прикрепите его к разделу страни­цы, который должен появляться в виде панели (листинг 7.11, строка 25). Затем опишите идентификатор в таблице стилей; в нашем примере он записан в стро­ке 47 листинга 7.12. CSS-правила для панели говорят о том, что эта область должна быть шириной в 245 пикселей, выравнивать текст по ширине, да­вать тексту немного свободного пространства и находиться в правой части таб­лицы.

Когда вы создаете еще стили для сайта, удостоверьтесь, что они будут под­держиваться большим числом браузеров. Если вы создаете стиль, который не будет работать на Netscape 4.0, просто вытащите этот стиль из документа basic.ess и поместите его в таблицу стилей fancy.css. Netscape 4.0 — не единствен­ный браузер, у которого возникают проблемы с CSS-правилами, но у него са­мая слабая поддержка CSS из всех браузеров, которые сегодня используются. Перемещение неблагоприятных для Netscape 4 правил в импортируемую таб­лицу стилей fancy.css предохранит браузер Netscape 4 от сбоев и поможет лю­дям, использующим этот браузер, быстро просматривать ваш сайт.

Posted in Экономичный Web-дизайн.