2.3.1. Размещение информации о стилях

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

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

• Создать обычный текстовый файл и описать в нем с помощью языка CSS необходимые стили;

• Разместить этот файл на Web-сервере;

• В Web-страницах, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него.

Ссылки на таблицы стилей выполняются с помощью тега <LINK>, располагающегося внутри тега <HEAD>:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Первые два атрибута этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой Web-странице будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.

Во втором случае размещения информации о стилях, при котором описание стилей располагается внутри Web-страницы, внутри тега <BODY> используется тег <STYLE type="text/css">... </STYLE>. Атрибут type="text/css" является обязательным и служит для указания браузеру использовать CSS.

И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который описывается. Это делается с помощью атрибута STYLE, который может использоваться с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.

Рассмотрим механизм, с помощью которого стили присваиваются элементам Web-страниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:

НАЗВАНИЕ_ЭЛЕМЕНТА {СВОЙСТВО: ЗНАЧЕНИЕ;},

где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега <P>...</P>, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, внутренние элементы параграфа также унаследуют значения отступов, указанные для этого параграфа.

CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.

Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).Пример:

.b-с {font-weight: bold; text-align: center} - описание стиля класса с именем b-с.

Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы.

<P CLASS="b-с">Текст параграфа</P>– параграфу присвоен стиль класса b-с.

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

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

В таблице 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;} H3 {font-size: 400pt;}
ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
color	Определяет цвет элемента I {color: yellow;}
background-color	Устанавливает цвет фона для элемента – именно для элемента, а не для страницы. Обратите внимание, что браузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом. Пример: <HTML> <HEAD> <TITLE>Пример использования CSS</TITLE> <STYLE type=”text/css”> H1 {font-size: 300%;} </STYLE> </HEAD> <BODY bgcolor=white> <center><BR> <H1 style=”background-color: teal; color: white;”>Cascading</H1> <H1 style=”background-color: navy; color: yellow;”>Style</H1> <H1 style=”background-color: gold; color: brown;”>Sheets</H1> </BODY> </HTML> В этом примере в разделе <STYLE> всем элементам <Н1> на этой страничке был установлен размер 300 % от нормы. Затем каждому из элементов <H1> были присвоены собственные значения цвета фона и цвета символов.
СВОЙСТВА ТЕКСТА
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	Пункты (типограф.)
%	Проценты