Новые книги
C# 2008 Programmer
C# 2008 Programmers Reference provides a concise and thorough reference on all aspects of the language. Each chapter contains detailed code samples that provide a quick and easy way to understand the key concepts covered.
Coders at Work: Reflections on the craft of programming
Peter Seibel

interviews 15 of the most interesting computer programmers alivetoday in

, offering a brand-new companion volume to Apress’shighly acclaimed best-seller

by Jessica Livingston. As thewords “at work” suggest, Peter Seibel focuses on how his interviewees tacklethe day-to-day work of programming, while revealing much more, like how theybecame great programmers, how they recognize programming talent in others, andwhat kinds of problems they find most interesting.

Coders at Work

Founders at Work

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

 

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://wm-help.net/other_site_redirect.php?http/localhost/css.htm" target="_blank" rel="nofollow">
	</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-разметки.

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