Display as 12 point text using the Courier New font.

</P>

Или:

The text in this line will display as 18 point text using the

Arial font.

</p>

Посмотрим на результат:

The text in this line will display as 12 point text using the Courier New font.

The text in this line will display as 18 point text using the Arial font.

Mожно добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные стили.
Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги <div> (division - раздел) и <span> (промежуток).
Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между <div> и <span> состоит в том, что <div> создает принудительный разрыв строки, a <span> - нет.
Следовательно, нужно использовать <span> для изменения стиля любой части текста, меньшей абзаца.

Вот пример работы тега <div>:

<div style="font-family: Garamond; font-size: 18 pt;>"AII of the

Text within this section is 18 point Garamond.

AII of the text within this section is 18 point Garamond.

и тега <span>:

<span style="color:#ff3300;"> This text appears in the color red,

with no line break after the closing span tag </span> and the rest of

The text.

This text appears in the color red, with no line break after the closing span tag and the rest of the text.

Cовет

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

Внедренный стиль

Внедренные стили используют тег <style>, расположенный между тегами </head> и <bodу> в стандартном документе HTML.

Рассмотрим пример внедренного стиля:

<html>

<head>

<title>Embedded Style Sheet Example </title>

</head>

<style>

BODY{

background: #FFFFFF;

color: #000000;

}

H1{

font: 14pt verdana; color: #CCCCCC;}

P{font: 12pt times;}

A{color: #FFOOOO; text-decoration: none}

</style>

Как видно из примера, приведенного выше, таблица стилей теперь отличается от кода стандартной страницы HTML, но все же логику проследить нетрудно. В нашем случае для основной части страницы (body) указаны цвет фона, цвет текста и верхнее, левое и правое поля в дюймах.
Для заголовка первого уровня (HI) указывается шрифт (название шрифта и размер в пунктах). В этом и состоит удобство каскадных таблиц стилей - вы можете задавать размеры не только в пунктах, но и пикселях (рх), процентах (75%) и сантиметрах (cm).

Примечание

Существует и несколько новых единиц измерения, самой примечательной из которых является m.
В отличие от пунктов или пикселов, представляющих абсолютные размеры различных объектов, 1m - ширина строчной буквы m в том шрифте о котором идет речь. Правда, большинство броузеров об этом не догадываются и поэтому определяют 1m просто как размер, заданный по умолчанию. Например, в Internet Explorer 4.0 и выше для гарнитуры Verdana размер 1m соответствует 12 пунктам. Точнее сказать "соответсвует значению, которое пользователь установил в качестве размера шрифта по умолчанию. Таким образом, если установить в броузере размер шрифта по умолчанию 16 пунктам, то и 1m тоже станет равна 16 пунктам, и все остальные размеры будут соответственно увеличены.

Но! Не все броузеры способны понимать эти новые единицы измерения. Я попробовала применить новую единицу измерения m во внедренной таблице стиля страницы "Дизайн на основе правил" (webrules.htm). Броузер Internet Explorer 5.0 показал эту страницу таким образом, как она задумывалась. Когда же просмотр страницы осуществлялся броузером Internet Explorer 3.0, результат был плачевным - несколько черных штрихов и никакого текста.

Однако, вернемся к нашему примеру.
Другой интересный момент этой таблицы стилей - различие стилей шрифтов заголовка и абзаца. Они отличаются цветом, отступом и гарнитурой.
В теге якоря (А) можно увидеть еще один очень удобный элемент синтаксиса. Строка text-decoration: none удаляет подчеркивание ссылок, так что результат выглядит чисто и привлекательно.

Связанные таблицы стилей

Связанные (linked), или внешние (external), таблицы стилей являются расширением понятия внедренных стилей.Используется тот же самый код, что и для внедренной таблицы стилей, но он помещается в отдельный документ (файл с расширением .css). После этого с этим документом (файлом) связываются все страницы, к которым необходимо применить данный стиль.

Вот как выглядит пример связанной таблицы стилей:

<style>

BODY{

background: #ffffcc;

color: #000000;

}

P {

font-family : sans-serif;

font-style : italic;

font-size : 16pt;

color: #006633;

}

H1{

font-family: Arial, Helvetica, sans-serif;

font-size: 24pt;

color: #996633;

}

</style>

Теперь сохраним этот документ как отдельный файл. Назовем его style-l.css и поместим в папку таблиц стилей с именем style.
С этим документом любое количество страниц HTML. Для этого нужно использовать между тегами </title> и </head> следующую конструкцию:

Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле style_1.css. Код этой страницы выглядит следующим образом:

<html>

<head>

<title>Пример использования связанной таблицы стилей</title>

</head>

<body>

<h1>Старинная студенческая песня</h1>

<P>

Поднявши меч на наш союз <br>

достоин будет худшей кары,<br>

и я за жизнь его тогда<br>

не дам и ломанной гитары.<br>

Как вожделенно жаждет век<br>

нащупать брешь у нас в цепочке...<br>

Возьмемся за руки друзья,<br>

чтоб не пропасть поодиночке.<br>

</P>

<p>

Среди совсем чужих пиров<br>

и слишком ненадежных истин,<br>

не дожидаясь похвалы, <br>

мы перья белые почистим.<br>

Пока безумный наш султан<br>

сулит дорогу нам к острогу,<br>

возьмемся за руки друзья,<br>

возьмемся за руки, ей-богу.<br>

</p>

<p>

Когда ж придет дележки час,<br>

не нас калач ржаной поманит,<br>

и рай настанет не для нас,<br>

зато Офелия помянет.<br>

</p>

<p>

Пока ж не грянула пора<br>

нам отправляться понемногу,<br>

возьмемся за руки друзья,<br>

возьмемся за руки, ей-богу.<br>

</p>

Это стихотворение Булата Окуджавы, ставшее уже классикой.<br>

<a href="css.htm#метка_51">Вернемся? </a>

</body>

</html>

Здесь важно помнить о смысле концепции каскадирования. Если вам нужны 10 страниц HTML, на которые глобально воздействует эта таблица стилей, вы можете ее применить. Затем, если нужно внести небольшие корректировки в отдельные страницы, можно либо внедрить в эти страницы дополнительные стили, либо использовать встроенный стиль.

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

Cовет

Обязательно просматривайте страницы с таблицами стилей в соответствующем броузере - Internet Explorer 3.0 и выше и Netscape 4.0 и выше. В противном случае все ваши стили могут исчезнуть! Следует всегда тестировать такие страницы без таблицы стиля (используйте более старый броузер или просто временно измените название таблицы стилей, чтобы броузер не мог ее найти) и проверять, чтобы они выглядели приемлемо.

Поддержка шрифтов в таблицах стилей

Один из наиболее привлекательных аспектов таблиц стиля - это возможность применения различных шрифтов к определенной странице без необходимости использовать многочисленные теги <font>. Таблицы стилей позволяют выбирать ряд шрифтов и применять их к конкретным разделам страницы типа номера заголовка, абзаца или другого фрагмента. Однако вместо стандартного тега HTML <font> используется атрибут таблицы стилей font-family. Вы можете добавлять в этот тег многие атрибуты либо использовать классы и группировку, чтобы реализовать всю мощь средств работы со шрифтами с помощью таблиц стилей.
Практическая реализация поддержки шрифтов в таблицах стилей аналогична проблемам, с которыми пользователи сталкиваются при использовании тегов <font> и соответствующих атрибутов. Конкретный шрифт д олжен быть установлен на том компьютере, где происходит просмотр страницы. Как и тег <font>, таблицы стилей позволяют указывать любое число шрифтов, чтобы увеличить вероятность того, что броузер клиента подберет нужный шрифт из списка. Например, если у них не будет шрифта Century Schoolbook, то, возможно, найдется Garamond и т. д. Хотя сами эти шрифты различаются довольно значительно, их семейства достаточно похожи, чтобы считать, что они выполняют сходные дизайнерские задачи.
Таблицы стилей распознают пять семейств шрифтов:Serif (С засечками) , Sans Serif (Рубленые),Script (Рукописные), Monospace (Моноширинные), Decorative (Декоративные).

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

H1{font-family:Arial,Halvetica,Verdana,sans-serif;

font-weight:bold; color:#333399;}

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

Задание свойств и значений шрифта

У шрифтов есть очень много свойств, которые можно изменять, и очень много значений, которые могут принимать эти свойства.
Как и для стандартных шрифтов HTML, можно задавать свойства для управления размером и цветом. Однако для шрифтов HTML нельзя изменять насыщенность и тип шрифта, а также высоту строки или интерлиньяж (расстояние между отдельными строками текста). Кроме того, доступные в таблицах стилей методы управления размером шрифта намного превосходят уровень, предлагаемый стандартами HTML.
Цвет
Таблицы стилей используют стандартные методы работы с цветами браузера. Другими словами, для получения оптимальных результатов используйте шестнадцатиричный (и лучше всего, поддерживаемый браузерами) цвет. Вы можете добавлять цвет, как и другие свойства стиля, в любой подходящий тег HTML для встроенных, внедренных и связанных стилей.
Например, при описании цвета заголовка первого уровня указоно значения color:#333399;, в результате мы видим заголовок "Каскадные таблицы стилей" темно-синего цвета.
Насыщенность
Насыщенность (weight) показывает толщину шрифта. Например, для гарнитуры Arial существуют такие разновидности: жирный (black), полужирный (bold), светлый (light) и т. д.

Cовет

Для шрифтов существуют различные начертания. Если вы не уверены на сто процентов, что на компьютере клиента установлен определенный шрифт, разумнее будет применять начертание, доступное для всех шрифтов. Существует только одна (не считая нормальной) стандартная насыщенность, которая доступна для большинства шрифтов. Это - полужирное начертание!

Вот пример применения встроенного начертания:

<p style="font-family: arial, helvetica, sans-serif; font-weight: bold;

color=#cc99ff;">