Каскадные таблицы стилей были предложены 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>
Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.
Новые 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>, что позволяет выделить первую
букву в отображаемом абзаце.
Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные теги.
Новые свойства контейнеров 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-разметки.
Назад | Содержание | Вперед |