|
||
|
aranea.ru || Спецификация CSS2 | 2.1. Краткое учебное пособие CSS2 для HTML.
2.1. Краткое учебное пособие CSS2 для HTML.В этом учебном пособие мы покажем, как легко можно выполнять дизайн, используя простые стилевые таблицы. Для этого пособия необходимо знать немного о HTML и некоторые базовые термины настольных издательских систем. Мы начнем с небольшого HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Для определения цвета текста в элементе H1, как голубой, вы можете написать следующее правило CSS:
H1 { color: blue }
Правило CSS состоит из двух главных частей: селектора (H1) и объявления ('color:blue'). Объявление состоит из двух частей: свойства ('color') и значения ('blue'). Когда выше указанный пример пытается влиять только на одно из свойств, необходимое для визуализации HTML-документа, он квалифицируется, как стилевая таблица. Объединенный с другими стилевыми таблицами (одна из фундаментальных особенностей CSS заключается в том, что стилевые таблицы комбинируются), этот пример определит заключительную презентацию документа. Спецификация HTML 4.0 устанавливает, как объявляют правила стилевых таблиц для HTML-документов: либо внутри HTML-документа, либо через внешний файл стилевых таблиц. Для размещения стилевой таблицы внутри документа, используйте элемент STYLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Для максимальной гибкости мы рекомендуем, чтобы авторы определяли внешние стилевые таблицы; так как можно вносить изменения без модификации источника HTML-документа, и можно разделять стилевые таблицы между несколькими документами. Для связи со внешней стилевой таблицы можно использовать элемент LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Элемент LINK определяет:
Для демонстрации тесной связи между стилевыми таблицами и структурированной разметкой, в этом учебном пособии мы продолжаем использовать элемент STYLE. Давайте добавим больше цвета:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Теперь стилевая таблица содержит два правила: первое определяет цвет для элемента BODY красный ('red'), а второе правило устанавливает цвет для элемента H1 голубой ('blue'). Поскольку значение цвета для элемента P не было установлено, то он будет наследовать цвет от родительского элемента, а именно от BODY. Элемент H1 также является дочерним элементом для BODY, но второе правило отвергает наследуемую величину. В CSS часто встречаются подобные конфликты между различными значениями, а эта спецификация описывает, как их разрешить. CSS2 имеют более 100 различных свойств, включая 'color' (цвет). Давайте посмотрим на другие:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Что необходимо отметить первым – это то, что несколько объявлений группируются внутри блока, заключенного в фигурные скобки ({ }), и разделяются точкой с запятой, и даже последняя декларация может заканчиваться точкой с запятой. Первое объявление в элементе BODY устанавливает семейство шрифта, как "Gill Sans". Если такой шрифт не доступен, то устройство вывода (часто упоминаемое, как "браузер") будет использовать шрифт из семейства 'sans-serif', которое является одним из пяти общих семейств, известных всем устройствам вывода. Дочерние элементы BODY будут наследовать значение свойства 'font-family' (семейства шрифта). Второе объявление устанавливает размер шрифта элемента BODY, как 12 пойнтов (point). Единица "пойнт" обычно используется в типографском деле для указания размеров шрифтов и значений длин других элементов. Это пример абсолютной единицы, которая не масштабируется по отношению к окружению. Третье объявление использует относительную единицу, которая масштабируется по отношению к окружению. Единица "em" ссылается на размер шрифта элемента. В этом случае результатом является то, что поля вокруг элемента BODY в три раза шире, чем размер шрифта. |
