Формально стиль отображения элементов разметки задается ссылкой в элементе разметки на селектор стиля. Синтаксис описания стилей в общем виде представляется следующим образом:
selector[, selector[,...]]
{ attribute:value;
[atribute:value;...] }
или
selector selector [selector...]
{ attribute:value;
[atribute:value;...] }
В первом варианте перечислены селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль. Напомним, что речь в данном случае идет об описаниях стилей в нотации text/css. Описания стилей размещаются либо внутри элемента STYLE, либо во внешнем файле.
· В качестве селектора можно использовать имя элемента разметки, имя класса и идентификатор объекта на HTML-странице.
Селектор — имя элемента разметки
Когда автор Web-узла хочет определить общий стиль всех страниц, он просто прописывает стили для всех элементов HTML-разметки, которые будут использоваться на страницах. Это дает возможность скомпоновать страницы из логических элементов, а стиль отображения элементов описать во внешнем файле.
|
|
Такой способ создания сайта позволяет автору изменять внешний вид всех страниц путем внесения изменений в файл описания стилей, а не в файлы HTML-страниц.
Внешний файл при этом может выглядеть следующим образом:
I, EM { color:#003366,font-style:normal }
A I { font-style:normal;font-weight:bold;
text-decoration:line-through }
В первой строке этого описания перечислены селекторы-элементы, которые будут отображаться одинаково:
<I>Это курсив</I> и это тоже <EM>курсив</EM>
Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:
<A NAME=empty><I>SevNTU</I></A>
В данном случае переопределение состоит в том, что текст отображается внутри гипертекстовой ссылки перечеркнутым, причем жирным шрифтом.
Селектор — имя класса
Имя класса не является каким-либо стандартным именем элемента HTML-разметки. Оно определяет описание класса элементов разметки, которые будут отображаться одинаково. Для того, чтобы отнести элемент разметки к тому или иному классу, нужно воспользоваться его атрибутом CLASS (открыть):
<STYLE>
.test {color:white;background-color:black;}
</STYLE>
...
<P CLASS="test">
Этот параграф мы отобразим белым цветом по
черному фону
</P>
...
<P>
Эту <A CLASS="test">гипертекстовую ссылку</A>
мы отобразим белым цветом по черному фону.
</P>
Таким образом, в любом элементе разметки можно сослаться на описание класса отображения. При этом совершенно необязательно, чтобы элементы разметки были однотипными. В примере к одному классу отнесены и параграф, и гипертекстовая ссылка в другом параграфе.
|
|
Лидирующую точку в имени класса можно опустить. Она задается из соображений сохранения единства описания. Например, можно определить классы отображения однотипных элементов разметки:
a.menu { color:red;background-color:white;
text-decoration:normal; }
a.paragraph { color:navy;
text-decoration:underline; }
В данном примере класс гипертекстовых ссылок menu имеет одно описание стиля, а класс гипертекстовых ссылок paragraph — совершенно другое. При этом каждый из этих классов нельзя применить к другим элементам разметки, например, параграфу или списку. Если имя элемента разметки не задано, это означает, что класс можно отнести к любому элементу разметки — корневой класс описания стилей. Это очень похоже на обозначение имени корневого домена в системе доменных имен. Собственно ничего удивительного здесь нет, т.к. система классов объектов на HTML-странице представляет собой дерево. Элементы разметки — это узлы дерева.
Селектор — идентификатор объекта
Объектная модель документа (Document Object Model) описывает документ как дерево объектов. Объектами являются: сам документ, изображения, параграфы, приложения и т.п. Каждый из объектов можно поименовать и обращаться к нему по имени. Данная возможность используется при программировании страниц на стороне клиента.
Применение идентификатора объекта оправдано еще и в случае модификации атрибута описания стиля для данного объекта в его CSS-описании. Вместо двух описаний классов, которые отличаются только одним из параметров, можно создать одно описание класса и описание идентификатора объекта. Описание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом "#":
a.mainlink { color:darkred;
text-decoration:underline;
font-style:italic; }
#blue { color:#003366 }
...
<A CLASS=mainlink>основная гипертекстовая
ссылка</A>
<A CLASS=mainlink ID=blue>модифицированная
гипертекстовая ссылка</A>
В таблице 1 представлены некоторые элементы CSS.
Таблица 1 - Элементы CSS
Наименование Элемента | Описание |
СВОЙСТВА ШРИФТА | |
font-family | Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. P {font-family: Times New Roman, sans-serif;} |
font-weight | Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder B {font-weight: bolder;} |
font-size | Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 {font-size: 200%;} H2 {font-size: 150px;} |
ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА | |
Color | Определяет цвет элемента I {color: yellow;} |
background-color | Устанавливает цвет фона для элемента – именно для элемента, а не для страницы. Обратите внимание, что браузеры отображают это свойство по-разному: |
СВОЙСТВА ТЕКСТА | |
text-decoration | Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} A {text-decoration: none;} .wrong {text-decoration: line-through;} |
text-align | Определяет выравнивание элемента. P {text-align: justify} H1 {text-align: center} |
text-indent | Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. P {text-indent: 50pt;} |
line-height | Управляет интервалами между строками текста. P {line-height: 50 %} |
СВОЙСТВА ГРАНИЦ | |
Margin-left | Устанавливают значения отступов вокруг элемента. IMG { margin-right: 20pt} P { margin-left: 2cm} |
Margin-right margin-right margin-top | Устанавливают значения отступов вокруг элемента. IMG { margin-right: 20pt} P { margin-left: 2cm} |
ЕДИНИЦЫ ИЗМЕРЕНИЯ | |
Px | Пикселы |
Cm | Сантиметры |
Mm | Миллиметры |
Pt | Пункты (типограф.) |
% | Проценты |