Каскадные таблицы стилей (Cascad Style Sheets). Практическое введение в программирование на JavaScript. Портал Сетевых Проектов

Поиск по сайту:

Главная

О проекте

Web-мастеру
     HTML & JavaScript
     SSI
     Perl
     PHP
     XML & XSLT
     Unix Shell

MySQL

Безопасность

Хостинг

Другое

Самое читаемое:

Учебник PHP - "Для Чайника".
Просмотров 4096 раз(а).

Иллюстрированный самоучитель по созданию сайтов.
Просмотров 6757 раз(а).

Учебник HTML.
Просмотров 3717 раз(а).

Руководство по PHP5.
Просмотров 5991 раз(а).

Хостинг через призму DNS.
Просмотров 4809 раз(а).

Подборка текстов стандартных документов.
Просмотров 56244 раз(а).

Учебник PHP - Самоучитель
Просмотров 3702 раз(а).

Документация на MySQL (учебник & справочное руководство)
Просмотров 8335 раз(а).

Внешние атаки...
Просмотров 4563 раз(а).

Учебник PHP.
Просмотров 3172 раз(а).

SSI в примерах.
Просмотров 175 раз(а).

| Добавить в избранное | Сделать стартовой | Помощь

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 Shits 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 Shits 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-разметки.

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

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