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

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

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

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


	<style type="text/css">

	<!-- Описание стилей -->

	</style>

Вообще говоря, в Netscape поддерживают еще одну нотацию описание таблиц стилей - нотация JavaScript:


	<style type="text/javascript">

	<!-- Описание стилей -->

	</style>

При описании таблиц стилей мы будем опираться на документацию Netscape, т.к. - это наиболее популярный браузер Internet. Internet Explorer поддерживает только спецификацию w3c.

Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии документа:

Пример 1.28


	<html>

	<head>

	style type="text/css">

	p {color:blue; font-family: times; font-size:10pt;}

	h1 {color:black; font-size:12pt;

	 font-style:Arial; text-align: center;}

	</style>

	</head>

	<body>

	<h1>Test Style Sheets in Communicator</h1>

	<p> This is a first part of the document

	</body>

	</html>

То же самое но в JavaScript-нотации будет выглядеть следующим образом:

Пример 1.29


	<html>

	<head>

	<style type="text/javascript">	

	tags.p.color="blue";

	tags.p.fontFamily="times";

	tags.p.fontSize="10pt";

	tags.h1.color="black";

	tags.h1.fontSize="12pt";

	tags.h1.fontStyle="Arial";

	tags.h1.textAlign-"center";

	</style>

	</head>

	<body>

	<h1>Test Style Sheets in Communicator</h1>

	<p> This is a first part of the document

	</body>

	</html>

Сoзданный таким образом документ будет отображаться следующим образом:

Рис. 1.28. Пример отображения документа с каскадными описателями стилей

Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.

Новые HTML-контейнеры

С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще говоря LINK - это не новый таг, а новое применение старого тага.

Контейнер STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.

Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей:


	/* contents of the external style 

	sheets file  css.htm*/

	p {color:blue; font-family: times;

	 font-size:10pt;}

	h1 {color:black; font-size:12pt; 

	font-style:Arial; text-align: center;}

	/* the end of style sheets definition */

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

Пример 1.30


	<html>

	<head>

	<link REL=STYLESHEET TYPE="text/css"

	 HREF=http://localhost/css.htm>

	</head>

	<body>

	The body of the document should be here.

	</body>

	</html>

Из данного примера видно, что писание стилей в фале css.htm полностью совпадает с описанием в контейнере STYLE. В тексте файла описания стилей не нужно указывать таги контейнера STYLE.

Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. Часто SPAN применяют для достижения типографских эффектов, таких например, как выделение заглавной буквы абзаца:

Пример 1.31


	<HTML>

	<!--

	Author:	Paul Khramtsov

	Date:	September 19, 1997

	URL:	http://polyn.kiae.su/Internet/intro.html

	-->

	<HEAD>

	<style TYPE="text/css">

	FS.all { color:red; font-size: 24pt; font-family:

	 times;}

	H1 {color:navy; text-transform: uppercase;

	font-size: 18pt; 

	font-weight: bold; font-family: times;}

	H2 {color:navy; font-size: 14pt; font-weight:

	 bold; font-style: italic; 

	font-family: times;}

	H3 {color:navy; font-size: 10pt; font-weight: 

	bold; font-family: times;}

	P  {color:navy; font-size: 12pt; font-family: 

	times; text-align: justify}

	P.HELP {color:darkgreen; font-size: 10pt; 

	font-family: times; text-align: justify;}

	P.LEFT {color:navy; font-size: 12pt; 

	font-family: times; text-align: right;}

	</style>

	</HEAD>

	<BODY bgcolor=lightyellow>

	<center>

	<h3>Центр информационных технологий</h3>

	<h1>Информационные Ресурсы Internet</h1>

	<h3>(Учебное пособие для компьютерных

	 непрофессионалов)</h3>

	<h3>Храмцов П.Б.</h2>

	<h3>Москва, 1997</h2>

	<hr>

	</center>

	<p><span class=FS>C</span>обществу 

	глобальных компьютерных сетей 

	Internet в 1995 году исполнилось 25 лет.

	 На настоящий момент - это самый

	большое информационный ресурс мира. Одновременно 

	Internet - это самая 

	популярная и массовая компьютерная сеть планеты. 

	По оценкам международного 

	центра координации сетевой деятельности 

	в рамках Internet(Internic-Internet 

	Information Center) на 1997 год в сети 

	насчитывалось несколько десятков 

	миллионов постоянно зарегистрированных 

	компьютеров-серверов, которые 

	откликаются на запросы пользователей 365 дней

	 в году и 24 часа в сутки. Этот 

	огромный информационный ресурс полностью

	 децентрализован и не подчиняется ни 

	одному правительству или крупной финансовой

	 компании мира.

	</BODY>

	</HTML>

В данном примере, контейнер SPAN применен сразу после тага начала параграфа <p>, что позволяет выделить первую букву в отображаемом абзаце:

Рис. 1.29. Эффект от применения контейнера SPAN

Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные таги.

Новые свойства контейнеров HTML

Перечень новых атрибутов у тагов HTML следует начать с атрибута STYLE. Этот атрибут используется для определения стиля отображаемого контейнера непосредственно внутри тага начала контейнера:


	<h3 style="line-hieght:24pt; font-weight:bold;

	 color: blue">The blue text

	<h3 style="lineHeight='24pt'; fontWeght='bold'; 

	color='blue'">The blue text

Можно также определить класс стилей и использовать его при помощи атрибута CLASS:


	<style type="text/css">

	h3.class1 {font-size:12pt;color=blue}

	</style>

	.....

	<h3 class="class1">This is a blue text

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


	<style type="text/css">

	all.class1 {font-size:12pt;color=blue}

	</style>

Kроме определения классов существует еще возможность создания поименованных стилей. Поименованный стиль создается как уточнение какого-либо класса:


	<style type="text/css">

	all.class1 {font-size:12pt;color=blue}

	#C1 { font-size: 20;}

	</style>

	....

	<h3 class="class1">This is a blue text

	<h3 class="class1" id="C1">This is a blue text

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

Свойства контейнеров, управляемые описателями стилей

Первую группу свойств составляют свойства шрифтов:

font-size, font-family, font-weight, font-style.

Вторую группу свойств составляют свойства текста:

line-height, text-decoration, text-transform, text-align, text-indent.

Третью группу свойств составляют свойства блоков текста:

margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color

Четвертую группу составляют описатели цвета фона и цвета текста:

color, background-image, background-color.

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

Назад | Содержание | Вперед

Используются технологии uCoz