WikiSysop: 1 версия

2008-08-04T09:55:46Z

1 версия

BenderBot: реплицировано из внутренней CustisWiki

2006-03-09T04:41:49Z

реплицировано из внутренней CustisWiki

Новая страница

'''CSS''' (''Cascading Style Sheets'') — каскадные таблицы стилей. Служат для оформления преимущественно [[HTML]] документов, но в общем, предназначены для использования в любом [[XML]]-документе, который требует форматирования, например документа в форматах:
* [[XHTML]];
* [[XML]]-[[SGML Docbook|Docbook]] ;
* XUL (для оформления элементов графического интерфейса в браузере Mozilla).

==Введение==
Сценарий использования CSS приблизительно следующий: входной [[XML]]- или [[HTML]]- документ разбирается на иерархическое дерево элементов (в соответствии с их вложенностью).
Например, в спецификации CSS приводиться следующий пример [[HTML]]-документа:
<code-xml>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<НTML>
<TITLE>My home page</TITLE>
<BODY>
<H1>My home page</H1>
<P>Welcome to my home page! Let me tell you about my favorite
composers:
<UL>
<LI> Elvis Costello
<LI> Johannes Brahms
<LI> Georges Brassens
</UL>
</BODY>
</НTML>
</code-xml>
и соответствующему ему дерева (обратите внимание, что недостающие элементы достраиваются в соответствии с [[DTD]]-документа):

<graph>
digraph G{
rankdir=TB; ranksep=0.3; node[fontsize=8];
edge[arrowtail="none",arrowhead="crow"];
HTML->HEAD->TITLE;
HTML->BODY;
BODY->H1;
BODY->P;
BODY->UL;
LI1 [label="LI"];
LI2 [label="LI"];
LI3 [label="LI"];
UL->LI1;
UL->LI2;
UL->LI3;
}
</graph>

Далее, в зависимости от конечного устройства (''media'', устройства, на котором нужно представить документ), выбирается модель форматирования:

<graph>
digraph G{
rankdir=LR; node[fontsize=10pt]; edge[fontsize=9pt,fontcolor=blue];
"XML/HTML-документ"->"Дерево документа";
"Дерево документа"->"Экран" [label="визуальное форматирование"];
"Дерево документа"->"Печать" [label="страничная модель"];
"Дерево документа"->"Синтезатор" [label="модель звукового воспроизведения"];
}
</graph>

В соответствии с этой моделью выбираются наборы инструкций из подключенных CSS-листов, объявленных для данной модели форматирования. CSS-листы состоят из набора инструкций, каждая инструкция состоит из ''селектора'' (определяет, к какому узлу документа применяется инструкция) и ''определений атрибутов'' (какие атрибуты, в рамках данной модели обработки будут определены, и как, для данного узла). На выходе получается иерархическое дерево форматирования документа, каждый узел которого имеет набор атрибутов, определяющих представление документа на выбранном устройстве. Вообще это дерево может быть не изоморфно исходному дереву документа - т.е. некоторые элементы из исходного дерева могут отсутствовать (например, т.к. не воспроизводятся на конечном устройстве), и наоборот, могут присутствовать дополнительные элементы форматирования. Далее, программа (обычно называемая браузером) показывает (или озвучивает) это атрибутированное дерево документа.

== История ==
;Уровень 1 (CSS1): Рекомендация [[W3C]] принята 17 декабря 1996 года, пересмотрена 11 января 1999 года.
;Уровень 2 (CSS2) : Рекомендация [[W3C]] принята 12 мая 1998 года. Построена на CSS1 с сохранением обратной совместимости.
;Уровень 2.1 (CSS2.1): Кандидат Рекомендации [[W3C]] от 25 февраля 2004 года. Построена на CSS2, содержит исправления ошибок.
;Уровень 3 (CSS3): Рабочая версия.

== Подключение CSS к документам ==
=== HTML ===
CSS можно включать в HTML двумя способами:
* Непосредственно в HTML документе:
<code-xml>
<style type="text/css">
body {
color: red;
}
</style>
</code-xml>
* Ссылка в HTML, а CSS в отдельном файле:
<code-xml>
<link href="style.css" rel="stylesheet" type="text/css">
</code-xml>

=== XML ===
К [[XHTML]] можно подключать аналогично [[HTML]], но у любого [[XML]]-документа есть дополнительный способ: инструкция «xml-stylesheet».
Например, для документа в формате [[XML]]-[[SGML Docbook|Docbook]]:
<code-xml>
<?xml version='1.0' encoding="windows-1251"?>
<?xml-stylesheet href="cis-docbook.css" type="text/css"?>
<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook V5.0/EN"
"http://www.oasis-open.org/docbook/xml/5.0/docbook.dtd" [ ]>
<article><title>Инструкция по информационной безопасности</title>
<abstract><para>Данная инcтрукция по информационной безопасности
обязательна к прочтению всеми сотрудниками компании.</para></abstract>
<para>
<emphasis>Никогда</emphasis> не включайте компьютер без разрешения системного администратора!
</para>
</article>
</code-xml>

Где <tt>cis-docbook.css</tt> содержит следующие правила:
para { display: block }
abstract para { display: block; font-style: italic; }
emphasis { display: inline; font-style: upright; }

== Ссылки ==
* [http://www.w3.org/Style/CSS/ CSS на сайте W3C]
* [http://jigsaw.w3.org/css-validator/ CSS Validator]
* [http://loc.stack.ru/projects/CSS2/cover.html Русский перевод CSS2]

[[Category:Документирование]]
{{replicate-from-custiswiki-to-lib}}

StasFomin: - переход на

2005-12-05T12:35:39Z

<graphviz> - переход на <graph>

← Предыдущая	Версия 09:55, 4 августа 2008
(не показана 1 промежуточная версия 1 участника)
(нет различий)

← Предыдущая	Версия 12:35, 5 декабря 2005
(нет различий)

CSS - История изменений

WikiSysop: 1 версия

BenderBot: реплицировано из внутренней CustisWiki

StasFomin: - переход на