Построения таблицы стилей

Общая формулировка

В приведённом примере устанавливается стиль для заголовка 1 - ого уровня, а точнее- размер шрифта устанавливается в 30, цвет в синий.

Таблица стилей состоит из нескольких пар "Селектор" - "Описание стиля".

Селектор

1. Селектор может представлять собой один из контейнеров HTML, например:


• H1
• STRONG
• EM
Следует отметить, что для большинства задач использования стилей в HTML этого определения "селектора" достаточно.

2. Селектор может указывать на элемент, который лежит внутри нескольких контейнеров, например


• UL LI

селектор указывает на пункт неупорядоченного списка, который помещён в контейнер неупорядоченного списка
• A H1

селектор указывает на заголовок 1-ого уровня, помещённый внутрь ссылки
• P A LI

селектор указывает на пункт неупорядоченного списка, лежащего внутри ссылки, которая, в свою очередь, располагается внутри абзаца.
• TABLE TR TD H1

заголовок 1-ого уровня в нутри ячейки таблицы

Заголовок внутри ячейки таблицы

Сейчас в таблице находится заголовок 1-ого уровня, воспроизведённый в соответствие со стилем вложенности в ячейку таблицы

Слева направо через пробел располагаются подчинённые (вложенные) элементы.

3. Селектор может описывать класс логического стиля, например:


• P.blue
• P.strong
• P.masha
• .super

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

Указанные классы- это параметр CLASS логического стиля, например:

<P CLASS="blue">Абзац класса "blue"</P>

Заголовок класса "blue"

(не работает, поскольку класс blue был определён только для абзацев)

<DIV CLASS="super">Текстовый блок класса "super"</DIV>

<H2 CLASS="super"> Заголовок класса "super" </H2>

Параметр CLASS="класс" может использоваться во всех элементах. В случае использования с DIV(контейнер) перед применением аттрибутов класса тексту будет осуществлён переход на следующую строку. SPAN(контейнер) можно использовать без переноса текста. В зависимости от браузера, кавычки можно не использовать.

Особенно приятным понятие "класса" выглядит для тех, кто использует таблицы для достижения специальных эффектов. Обычная строка

<TABLE WIDTH=100% BGCOLOR=#FFFFFF> может быть приведена к виду
<TABLE class=my>

Пример (из методического пособия по педагогике) применения стилей для таблиц приведён здесь (интересен код). Написание, а тем более изменение такого кода без стилей сложно.

4. Подклассы ссылок



Подклассы ссылок представляют собой условное деление всех ссылок на обычные, посещённые, ссылки, над которыми находится указатель мыши, ссылки, по которым осуществляется переход.

Достаточно частый ход- это сделать ссылку голубой (ссылка выделяется на странице, её легко заметить), при наведении мыши- чёрной (легче читать), при посещении- чуть более тёмной, при переходе- красной, зелёной и т.д.

Широко используется также то, что непосещённые ссылки- подчёркнуты, а посещённые- нет.

Для ссылок в качестве селекторов используются:

A:Link		простая ссылка (непосещённая)
A:Active		Ссылка, по которой осуществляется переход
A:Visited		Посещённая ссылка
A:HOver		Ссылка при наведении мыши

Используя эти селекторы и способы задания цвета, можете поэкспериментировать (пример можно сразу помещать в тег комментария контейнера STYLE- контейнера HEAD- контейнера HTML):

A:Link {color:blue;}
A:Active {color:green;}
A:Visited {color:#0000EE;}
A:HOver {color:black;}

5. ID- это идентификатор (метка) элемента, который может использоваться в качестве внутренней ссылки. В то же время ID может быть селектором, который свяжет блок, имеющий метку и стиль.


• #green
• #blue
• P#red
• #bold

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

Абзац с идентификатором "green".

Заголовок 2-ого уровня с ID="blue"

DIV ID="red"

(не работает, поскольку идентификатор был прикреплён к абзацу)

DIV ID="bold" - Ok

6. Любое сочетание случаев A, B, C, D через запятую, например


• .small, P, H3 A

Также могут существовать вложенные конструкции, смешивающие класс, идентификатор и другие элементы, например:

• H1.green .red #blue A
• .mytable .colored .space



(ссылка)
в (элементе с идентификатором blue)
в (элементе с классом red)
в (заголовке 1-ого уровня класса green)

Такие "маленькие" селекторы также можно размещать через запятую.

Селектор: Резюме

Таким образом, селектором можно задавать:

• стандартные элементы HTML

H1, H2, EM, STRONG, EM, CODE и т.д.
наиболее простой и, тем не менее, достаточный способ для задания стилей в документе
• вложенные элементы HTML, изменяющие поведение стандартного стиля внутри определённого контейнера

TABLE TR TD H1, UL UL LI, A H1 и т.д.
задание стилей для вложенных в другие элементов позволяет более гибко управлять документом
• классы для всех контейнеров или для конкретного контейнера

.class1, .green, P.green и т.д.
класс указывается в параметре CLASS контейнера
использование классов даёт возможность получать из одного логического стиля несколько клише, которыми можно форматировать документ. Использование классов- это наилучший метод, но он достаточно сложен.
• Использование подклассов для ссылок. Четыре подкласса соответствуют условному делению ссылок на простые, активные, посещённые и ссылки, над которыми находится курсор.

A:Link, A:Active, A:Visited, A:HOver

• оформление для произвольного контейнера, имеющего идентификатор или только для конкретного типа

#green, P#blue и т.д.
метка указывается в параметре ID контейнера
задание стилей для идентификаторов- это трудоёмкий процесс, предусматривающий "штучное форматирование документа". Но также идентификаторы можно использовать и как исключения для единичных элементов. По стандарту HTML, между идентификатором и элементом существует однозначная зависимость. Изначально идентификатор- это точка перехода.
• Для присвоения одного и того же признака нескольким элементам сразу, эти элементы пишутся через запятую

.big, .small, H1, TABLE TR TD.grey

Всё сказанное в равной мере относится и к одиночным тегам

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

Описание стиля даётся в следующей форме:

Селектор {
параметр : значение ;
параметр : значение ;
параметр : значение ;
}

Данное описание размещается в таблице стилей, но есть ещё один способ задания стилей, например:

<P Style="font-size:30; font-weight : bold;">Текст параграфа</P>

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

Параметры и их значения

Положение данных внутри какой-либо области задаётся тремя параметрами:

• margins - отступ до бордюра окна
• border - параметры бордюра окна
• padding - отступ от бордюра до данных