Мы говорили, что язык HTML предназначен для логической разметки текста, выделения заголовков, основного текста и т.д. Но он плохо подходит для оформления и описания макета web-страницы. В языке отсутствуют средства для точного расположения объектов на странице (для этого приходится использовать невидимые таблицы). В языке нет средств для управления внешним видом текста, например, нельзя задавать точный размер текста, расстояние между строками (интерлиньяж) и многие другие параметры, доступные дизайнеру, работающему в полиграфии. Стандартный тег <FONT> отчасти решает эту проблему, но использовать его крайне неудобно. Описанные проблемы позволяет решить технология, названная Cascading Style Sheets (каскадные таблицы стилей).

5.1. Три вида таблиц стилей

Термин стиль пришел из полиграфии. В профессиональных текстовых редакторах мы можем задать описание, как будет выглядеть в тексте все заголовки, цитаты и т.д.

В MS Word для этого служит команда формат - стили и форматирование

Теперь, если мы внесем изменения в стиль, то это изменение автоматически коснется всех объектов, для которых этот задан стиль. При проектировании web-страниц нам доступны стили трех видов:

связанные стили
Мы можем создать текстовый документ с расширением .css и описать в нем как будут выглядеть в окне браузера различные теги. Ниже представлен пример такого файла:

Листинг № 6.

h1 {
  font-family: "Courier New";
  font-size: 22px;
  color: #A90E12;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin-left: 40px;
}
a { 
  color: #7A8CED;
  text-decoration: underline;
}

В нем приведены описания для трех тегов H1, P и A. Так для тега H1 описано три свойства: шрифт, размер и цвет. Способ расположения строк в файле может быть любым, важно, чтобы все свойства разделялись символом «точка с запятой» и группировались с помощью фигурных скобок. Для того чтобы назначить стиль web-странице, необходимо в блоке <head> </head> добавить строку:
<link href="/style.css" rel="stylesheet" type="text/css">

Предполагается, что файл style.css находится в том же каталоге, что и html-документ. Мы можем добавить эту строчку к каждому документу нашего сайта, и теперь для увеличения размера заголовков, достаточно внести изменения в один единственный файл.

внедренные стили
Такие стили внедряются в тело html-документа. Принцип построения стиля аналогичен описанному выше. С помощью партного тега <style> </style> таблица стилей помещается внутрь раздела <head></ head>.Давайте рассмотрим пример:

Листинг № 7.

<style>
body {
  background-color: #CCCCCC;
  margin-top: 0 px;
  margin-left: 0 px;
}
a {
  font-size: 12px; 
  line-height: 100%;
  color: #003399;
  font-weight: bold;
  text-decoration: none
}
h1 {
  font-size: 18 px;
  font-weight: bold;
  font-style: normal;
}
</style>

Отличие внедренного стиля от связанного состоит в том, что он относится только к данному конкретному html-документу.

встроенные стили
Встроенный стиль применяется к конкретному тегу внутри html-документа. Для этого используется параметр style, который можно использовать практически для любого тега:
<p style="font: 12pt Arial">К данному абзацу применен встроенный стиль</p>

В примере мы сообщили браузеру, что текст нужно отобразить шрифтом Arial, размером 12 пунктов. Я думаю, вы догадались, что встроенные стили позволяют «тонко» настраивать свойства объекта, но изменять их во всем документе - это достаточно трудоемкая задача. Поэтому применять встроенные стили необходимо только в особых случаях.

5.2. Каскадирование

На одной странице можно применить все три вида стиля одновременно, но что произойдет, если мы опишем стиль тега h1 сразу в трех таблицах стилей? В примере, показанном на рисунке 33, связанный стиль говорит браузеру, сделать размер заголовка 22 пикселя, внедренный - 18 пикселей, а встроенный, соответственно 14 пикселей.

Каскадирование
Рис. 33. Каскадирование.
К тегу
H1 применено сразу три стиля, какой размер будет у заголовка?

Такое перекрытие стилей называется «каскадированием». В примере размер данного заголовка будет 14 пикселей, так как встроенный тег перекрывает все предыдущие описания. А размер всех остальных заголовков первого уровня на данной странице будет равен 18 пикселей, так как внедренный стиль перекрывает связанный.

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

Давайте рассмотрим более сложную ситуацию. Предположим, что внутри абзаца, стиль которого описан в связанном файле нам необходимо выделить какой-то фрагмент, например, цитату. Для этого нам поможет парный тег <span> (промежуток).

<p>Артемий Лебедев утверждает: <span style="font-style: italic" style="color: #8C8C8C">«Люди боятся показаться недостаточно умными. Люди, считающие себя творческими Ч особенно. Авторы учебников - вдвойне. Дизайнеры - втройне.»</span>.</p>

В примере цитата, в отличие от остального текста будет выделена курсивом и окрашена серым цветом.

5.3. Классы

Если цитата используется единожды на странице, то использование внедренного стиля вполне оправдано. Но если некоторый фрагмент повторяется многократно имеет смысл создать класс - именованное описание фрагмента текста. название класса всегда начинается с точки. Теперь цитату из предыдущего примера можно оформить проще:

Листинг № 8.

<html>
<head>
<title>Использование классов</title>
<style>
  p {
    font-size: 16 px;
    font-style: normal;
  } 
  .quote {
    font-style: italic;
    color: #8C8C8C
  }
</ style > 
</head>
<body>
  <p>Артемий Лебедев утверждает: 
  <span class="quote">«Люди боятся показаться недостаточно умными.
  Люди, считающие себя творческими - особенно. 
  Авторы учебников - вдвойне. Дизайнеры - втройне.»</span>.</p>
</body>
</html>

Классы имеет смысл использовать также в том случае, если у нас на странице есть два вида одного и того же объекта. Так ссылки в строке меню, как правило, отличаются от ссылок внутри документа.

Для ссылок существует еще несколько встроенных классов. Так класс a:hover задает, как ссылки будут вести себя при наведении на них курсора мыши, Класс a:visited задает вид посещенных ссылок.

Листинг № 9.

<html>
<head>
<title>Использование классов</title>
<style> 
  a { color: #1E4AD0 }
  a:hover { color: #B30006 }
</ style > 
</head>
<body>
  <a href="#">гиперссылка</a>
</body>
</html>

5.4. Свойства элементов

В настоящее время насчитывается довольно большое количество свойств элементов HTML, которыми можно управлять. Мы рассмотрим только некоторые, полный список можно найти в специальной литературе, или в сети интернет.

Таблица 2. Свойства элементов weстраницы.

Свойства шрифта.

font-family

Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
пример: P {font-family: Times New Roman, sans-serif;}

font-style

Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - Курсив, oblique - Наклонный.
пример: P {font-style: italic;}

font-weight

Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
пример: B {font-weight: bolder;}

font-size

Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
пример: H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;}

Цвет элемента и цвет фона

color

Определяет цвет элемента
пример: I {color: green;}

background-color

Устанавливает цвет фона для элемента Ц именно для элемента, например для текста.
пример: H4 {background-color: yellow;}

background-image

Устанавливает или получает фоновый рисунок для элемента
Может принимать значения none (по умолчанию), в таком случае используется цвет родительского объекта или Url - задается абсолютный или относительный путь к рисунку
пример: H3 {background-image: url(../32.jpg);}

Свойства текста

text-decoration

Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст
примеры: H4 {text-decoration: underline;} - подчеркивание, A {text-decoration: none;} - стандартный текст, I {text-decoration: line-through;} - зачеркивание, B {text-decoration:overline;} - надчеркивание

text-align

Определяет выравнивание элемента. Возможные значения: left, right, center, justify
пример: P {text-align:justify}

text-indent

Устанавливает отступ первой строки текста. Используется для создания параграфов с «красной» строкой.
пример: P {text-indent: 50pt;}

line-height

Управляет интервалами между строками текста.
пример: P {line-height: 50 %}

word-spacing

Устанавливает интервалам между словами. Можно использовать отрицательные значения
пример: P {word-spacing: 50 %}

letter-spacing

Устанавливает интервалам между буквами
пример: P {letter-spacing: 50 pt}

vertical-align

Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom
пример: P {vertical-align: 50 pt}

Границы
Параметры данного раздела описывают атрибуты стиля border, который позволяет задать вид границ вокруг объектов. Данные параметры могут быть применены не только к таблицам, а к любым объектам.

border-width

Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая).
пример:

border-color

Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно
пример: table {border-color: green;}

border-style

Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset
пример: table {border-style: dashed;}

Отступы

margin

Задает ширину отступа от четырех сторон объекта
примеры: H4 {margin:1cm;} body {margin:5mm;}
Используя свойства margin-top, margin-bottom, margin-left, margin-right вы задаете размер отступа от объекта сверху снизу, слева, справа.

padding

Задает, вставляемого между объектом и его отступом или, если объект имеет границы, между объектом и его границей
пример: td {padding:2cm;}
Используя свойства padding-bottom, padding-top, padding-left, padding-right вы задаете размер пространства, вставляемого между объектом его верхнее, нижней, левой и правой границей

5.5. Использование таблиц стилей в Dreamweaver

Dreamweaver предлагает удобные средства для создания таблиц стилей. Вам нужно выбрать команду меню Text - CSS Styles - New (Текст - Стили CSS - Новый)

Выбор/создание файла с таблицей стиля
Рис. 34. Выбор/создание файла с таблицей стиля (а).
Выбор/создание объекта таблицы стилей (б). На рисунке выбран тег h2 и показаны его свойства: цвет, шрифт, размер

Вы можете щелкнуть на кнопку Edit и оказаться в окне, в котором можно задавать свойства выбранного тега. Все свойства сгруппированы в восемь категорий, представленных слева на рисунке 35.

адание свойств объектов каскадных таблиц в Dreqamweaver
Рис. 35. Задание свойств объектов каскадных таблиц в Dreqamweaver.

Задав нужное свойство, например, в списке Weight (вес) выбрав значение bold, вы автоматически добавляете строчку в css-файле.

Практические задания:

1. Создайте связанную таблицу стилей для своего мини-сайта, рассказывающего про вас и ваши увлечения. Опишите в таблице стилей цветовую схему вашего сайта, используемые шрифты, создайте отдельный класс для ссылок основного меню, так чтобы они отличались визуально.

2. Для полученного макета html-страницы создайте внедренную таблицу стилей, так, чтобы ваш макет визуально напоминал дизайн-макет, подготовленный дизайнером сайта (рисунок 36). Обратите внимание на цвета, отступы, заголовки, оформление ссылок на листе. Скачать задание.

Дизайн-макет страницы
Рис. 36. Дизайн-макет страницы (1), которая должна получиться у вас
после создания таблицы стилей у предложенной
html-страницы (2) .

Данный дизайн-макет сделан для Кузбасской части сайта Всероссийской эстафеты «Равнение на Победу!» http://ravnenie-na-pobedu.ru/

Вопросы для самоконтроля:

  1. Чем удобны связанные стили?
  2. Как задать стиль для фрагмента абзаца, например для ключевых терминов?
  3. В чем смысл каскадирования?
  4. Приведите примеры свойств элементов, используемых в CSS.
  5. Как создавать таблицу стилей в Macromedia Dreamweaver?