Введение

Каскадные таблицы стилей (Cascad Style Sheets)

Стиль - это группа аттрибутов идентифицируемые (обозначенные) одним именем, предназначены для форматирования текста и объектов. Изменение этих аттрибутов влечет изменение формата текста контролируемого стилем. Полное название стилей - каскадные таблицы стилей (Cascading Style Sheets).

Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.

Идея положенная в основу таблиц достаточно проста. К версии 4.0 HTML превращется в язык разметки, опирающийся на контейнерное представление документа, т.е. документ - это множество вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например, заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тега начала контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов типизирован.

Стили в документах HTML определяют форматирование текста: тип шрифта, размера, и выравнивания. Они могут также определить уникальные признаки HTML, например: позиционирование, специальные эффекты и др.

Пример

Вы любите оформлять свой гипертекст различными шрифтами, цветом и т.п. Если вы пользуетесь HTML редактором, то вероятно не испытываете проблем с этим. Но если вы пишете код вручную то большую часть времени у вас занимает написание HTML тегов.

Напишем обычный заголовок:

Это заголовок

Вот так выглядит описание этого текста на языке HTML:

<div align="center">
<font face="Arial, Helvetica, sans-serif" color="#330099" size="4">
<b>
<i>
Это заголовок
</i>
</b>
</font>
</div>

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

Эти трудности позволяет избежать применение стилей.


Описание стилей

Стили описываются двумя способами:

  • непосредственно в HTML файле;
  • в отдельном файле.

Описание в документе

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

В документе описание стилей записывается в заголовке документа между тегами <head> и </head> оформляется так:

<style type="text/css"> | Заголовок описаний
<!-- | Здесь начинается описание стилей
.stylename { | Имя стиля
font-family: Arial, sans-serif; | Здесь описываются аттрибуты стиля
color: #333333; |
} |
--> |
</style> |

Описание в файле

Для файла стилей применяется расширение .CSS.

Для того чтобы подключить этот файл к HTML документу необходимо в заголовок включить строку:

<link rel="stylesheet" href="filename.css">

К документу можно подключить несколько таких файлов. Если в подключаемых файлх встречаются одинаковые аттрибуты определенного стиля, то в документе будут действовать аттрибуты файла записанного последним.


Определение стилей

Существует два способа определения стилей:

  • переопределение существующего тега;
  • создание стиля с новым именем.

Переопределение тегов

Вы можете переопределить существующий HTML тег, т.е. присвоить ему новые аттрибуты или изменить старые: шрифт, размер, цвет и т.п.

Например переопределим тег <a>:

a {
font-family: Arial, sans-serif;
color: red;
}

После этого определения все гиперссылки в документе у нас будут выводиться шрифтом Arial красного цвета.

Создание стиля с новым именем

Создать новый стиль просто, для этого необходимо придумать стилю подходящее имя, а определение аттрибутов стиля также как и выше.

.redBoldArial {
font-family: Arial, sans-serif;
font-weight: bold;
color: red;
text-align: center;
}

Применение созданных стилей

Переопределенные теги записываются обычным образом и стили действуют автоматически.

Новый стиль используется в тегах поддерживающих аттрибут class - <div>, <span>, <p>, <td> и т.п.

Пример: <p class="redBoldArial">Текст</p>

Текст

Вы можете использовать стили в сочетаниях с обычными тегами.

Пример: <p class="redBoldArial"><i>Текст</i></p>

Текст


Стили текста

Аттрибуты стилей

В общем виде аттрибуты стилей записываются так: аттрибут: значение;. Аттрибуты стилей можно разделить на несколько категорий: аттрибуты шрифта, аттрибуты текста и т.д.

В качестве единиц измерения используются: пункты (pt), точки (px), дюймы (in), миллиметры (mm), сантиметры (cm).

Шрифт

Аттрибуты Описание
Font-family

Определяет тип шрифта, которым будет выводиться текст. Можно записать несколько шрифтов через запятую. Если на компьютере пользователя имеется первый шрифт из списка, то будет использован этот шрифт, иначе следующий и так далее.

Пример: | font-family: "Arial Cyr", Arial, sans-serif;
 | font-family: "Times New Roman", Times;
Font-size

Размер шрифта. Определяется двумя способами: относительно и абсолютно. Размеры относительно заданного шрифта могут изменяться браузером, а абсолютные размеры не изменяются браузером.

Относительный размер задается используя слова: xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large.

Пример: font-size: large;

xx-small
x-small
small
smaller
medium
large
larger
x-large
xx-large

Абсолютный размер определяется в единицах измерения.

Пример: | font-size: 12pt;
 | font-size: 14px;
Font-style

Стиль текста. Определяет является ли шрифт нормальным (normal), курсивным (italic) или наклонным (oblique).

Пример: font-style: italic;
normal italic oblique

Font-weight

Вес шрифта. Может определяться словами: normal, bold, bolder, lighter или числовым значением 100 - 900. Normal соответствует 400, bold - 700.

Пример: | font-weight: bold;
 | font-weight: 900;

lighter normal bold bolder 900
Color

Цвет.

Можно задавать цвет используя функцию rgb(Red, Green, Blue); Red, Green и Blue должны принимать значения 0 - 255 или 0 - 100%. Значения большие этих округляются до максимальных.

Пример: | color: #123456;
 | color: rgb(255, 200, 0);
 | color: rgb(100%, 0%, 33%);

Текст

Атрибуты Описание
Text-decoration

Оформление украшает текст подчеркиванием (underline), линия сверху (overline), перечеркнутый (line-through), мерцаюций (blink) и обычный (none). Blink работает в браузере Netscape Navigator.

Пример: | text-decoration: underline overline;
 | text-decoration: none;

underline overline line-through blink none
Line-height

Определяет высоту блока текста. По умолчанию normal (высота определяется как высота текста).

Пример: line-height: 40px;

normal
50px
2cm
Text-align

Выравнивание текста по горизонтали. Определяется следующими значениями: влево (left), по центру (center), вправо (right), ровный столбец (justify).

Пример: text-align: right;

Vertical-align

Выравнивание по вертикали. Используются значения: top, bottom, text-top, text-bottom, middle, super, baseline, sub и можно указать значение (%). Применяется в основном для переопределения тега <td>.

Пример: | vertical-align: middle;
 | vertical-align: text-top;
Text-transform

Переводит текст в определенный регистр в зависимости от значений: верхний регистр (uppercase), нижний (lowercase), с прописной буквы (capitalize), не переводит (none).

Пример: text-transform : uppercase;

UpperCase LowerCase capitalize NoNe
Text-indent

Задает отступ от края.

Пример: | text-indent: 20px;
 | text-indent: 20pt;
 | text-indent: 15mm;
normal
indent 20px
indent 30mm
Letter-spacing

Устанавливает рассояние между буквами.

Пример: letter-spacing: 10px;

Текст (10px)

Фон

Эти аттрибуты задают цвет фона текста и фоновое изображение текста.

Атрибуты Описание
Background-color

Цвет фона текста.

Пример: background-color: #CCFF99;

Текст
Background

Фоновое изображение. Адрес файла изображения - url(fileurl) , по умолчанию изображение повторять (repeat), не повторять (no-repeat), повторять по оси X (repeat-x), повторять по осиY (repeat-y).

Можно выравнивать изображение по вертикали и горизонтали. Для выравнивания по горизонтали используются значения: left, center, right, а по вертикали - top, center, bottom.

Пример: | background: url(back.gif) repeat
 | background: url(back.gif) repeat-x
 | background: url(back.gif) norepeat right top

Текст с фоновым изображением (repeat)

Текст с фоновым изображением (repeat-x left center)

Текст с фоновым изображением (norepeat center center)

Отступы и дополнения

Атрибуты | Описание
Margin-left

Отступ от левого края. Используются единицы измерения.
Margin-top | Отступ от верхнего края.
Margin-right | Отступ от правого края.
Margin-bottom

Отступ от нижнего края.

Примеры: | margin-left: 10px;
 | margin-top: 5pt;
 | margin: 5px 10px;
Padding-left | Дополнение слева.
Padding-top | Дополнение сверху.
Padding-right | Дополнение справа.
Padding-bottom

Дополнение снизу.

Примеры: padding-bottom: 5px;

Списки

Эти аттрибуты действуют только на списки.

Атрибуты Описание
List-style

Определяет вид маркера или номера списка. Имеется несколько значений: диск (disc), окружность (circle), квадрат (square), десятичное число (decimal), строчные римские (lower-roman), прописные римские (upper-roman), строчная буква (lower-alpha), прописная буква (upper-alpha), нет (none).

Пример: list-style: square;

Изображение маркера определяется как: url(fileurl). Если необходимо убрать изображение, то используйте url(none).

Пример: list-style: url(bullet.gif);

  • Список
    • Первый элемент
    • Второй элемент
      • Третий элемент

Обрамление

Атрибуты | Описание
Border-left-width

Определяет ширину границы слева от текста.
Border-right-width | Определяет ширину границы справа от текста.
Border-top-width | Определяет ширину границы сверху от текста.
Border-bottom-width

Определяет ширину границы снизу от текста.

Пример: | border-left-width: 2px;
 | border-top-width: 1mm;
 | border-bottom-width: 1pt;
Border-left-color
Border-right-color
Border-top-color
Border-bottom-color

Цвета границы. Можно использовать сокращенный вариант - border-color, где цвета перечисляются в том же порядке через пробел.

Пример: border-left-color: red;
border-top-color: yellow;
border-color: red yellow red yellow;
Border-left-style
Border-right-style
Border-top-style
Border-bottom-style

Стиль границ. Используются следующие значения: нет (none), пунктир (dotted), сплошная (solid), штриховая (dashed), двойная (double). Сокращенный вариант для всех линий - border-style.

Пример: | border-left-style: dashed;
 | border-style: solid;


Дополнительные возможности

Курсор

Атрибуты Описание
Cursor

Изменяется вид курсора при наведении на объект.

Используются значения: auto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize , text, wait, help. По умолчанию значение: auto.

Пример: cursor: wait;

Наведите курсор на любую ячейку.

help | crosshair | default
hand | move | e-resize
ne-resize | nw-resize | n-resize
se-resize | sw-resize | s-resize
w-resize | text | wait

Фильтры

Фильтры используются для создания различных эффектов над изображениями или текстом. В общем случае записывается: filter: эффект1 эффект2 ... эффектN, т.е. можно к объекту (текст, изображение) применять одновременно несколько фильтров.

Фильтр Описание
Alpha

Градиентная заливка.

Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY);

Opacity
Уровень непрозрачности, 0-100, где 0 прозрачный, 100 полностью непрозрачный.

FinishOpacity
Конечный уровень непрозрачностиl, 0-100.

Style
Значение может быть 0, 1 (линейный), 2 (радиальный) или3 (прямоугольник).

StartX, StartY
Начальная координата градиента.

FinishX, FinishY
Конечная координата градиента.

Пример: filter: Alpha(Opacity=0, FinishOpacity=70, Style=2);
Blur

Размытие.

Blur(Add=add, Direction=direction, Strength=strength);

Add
Логическое значение, любое число - к оригинальному объекту добавляется размытый объект, 0 - оригинальный объект не рисуется.

Direction
Угол под которым происходит размытие.

Strength
 Сила размытия.

Пример: filter: Blur(Add=0, Direction=135, Strength=25);

Chroma

Выбраный цвет делается прозрачным.

Chroma(Color=color);

Пример: filter: Chroma(Color="red");
Gray

Обесцвечивает объект.

filter: Gray;
Invert

Негатив.

filter: Invert;
Xray

Рентген.

filter: Xray;
Wave

Волна.

Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength);

Freq
Число волн.

LightStrength
Сила волны.

Phase
Угловое смещение волны, в процентах (100% = 360 градусов, 25 % = 90 градусов.

Strength
Сила эффекта.

Пример: Wave(Add=0, Phase=50, Freq=5, LightStrength=5, Strength=5);
BlendTrans

Смешение. Может применяться к любому визуальному объекту.

filter: BlendTrans(Duration=duration);

Duration
Время выполнения в секундах.

Пример: filter: BlendTrans(Duration=2.1);
RevealTrans

Выводит объект используя эффект.

filter: RevealTrans(Duration=duration, transition=trans);

Transition
Номер эфекта.
  1. Прямоугольник в центр
  2. Прямоугольник из центра
  3. Круг в центр
  4. Круг из центра
  5. Сверху
  6. Снизу
  7. Слева
  8. Справа
  9. Вертикальные жалюзи
  10. Горизонтальные жалюзи
  11. Шахматная доска поперек
  12. Шахматная доска вниз
  13. Случайно
  14. Закрывание горизонтально
  15. Раскрывание горизонтально
  16. Закрывание вертикально
  17. Раскрывание вертикально
  18. Диагональ из правого верхнего
  19. Диагональ из правого нижнего
  20. Диагональ из левого верхнего
  21. Диагональ из левого нижнего
  22. Случайные горизонтальные полосы
  23. Случайные вертикальные полосы
  24. Случайный выбор эффекта

Номеp эффекта: Вpемя выполнения:

Примечание.

Для двух последних эффектов был использован JavaScript.

В общем случае это записывается так:

Изображение:
<img id="imgID" src="pic.jpg" style="visibility: hidden" class="stylename">

Кнопка:
<input type="button" value="Применить фильтр" onclick="Trans()">

Скрипт:
<script language="JavaScript">
<!--
function Trans() {
imgID.filters.item(0).Apply()
imgID.style.visibility=""
imgID.filters.item(0).Play()
}
-->
</script>


Руководство по применению стилей в создании online гипертекста

Руководство по применению каскадных таблиц стилей в создании online гипертекста

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

Основные разделы руководства:

  • Введение
  • Описание стилей
    • описание в документе
    • описание в файле
  • Определение стилей
    • переопределение тегов
    • создание стиля с новым именем
    • применение стилей
  • Стили текста
    • шрифт
    • текст
    • фон
    • отступы и дополнения
    • списки
    • обрамление
  • Дополнительные возможности
    • курсор
    • фильтры
© 1999, Александр Ермолаев
e-mail: swift@glazov.udm.net