<body>
<STYLE TYPE="text/css">
<!--
#red {color: red; }
#bgcol {background-color: grey; }
-->
</STYLE> </body>
<H1 ID="red">Текст заголовка первого уровня отображается красным цветом </H1>
<TT ID="red">Моноширинный текст отображается красным цветом </TT>
<H1 ID="bgcol">Текст заголовка первого уровня отображается на сером фоне</H1>
<P ID="bgcol">В абзаце используется фон серого цвета</P>
Добавлено (2006-11-15, 4:45 Pm)
---------------------------------------------
1.1 Связывание таблиц стилей с web-документами
Для отображения документа согласно предписанным правилам CSS браузер должен знать о существовании и местоположении таблицы стилей. Чтобы удовлетворить этому условию, необходимо выполнить операцию связывания таблицы CSS и HTML-документа одним из четырех методов.
1) Связывание – позволяет использовать одну таблицу CSS, хранящуюся в отдельном файле, для форматирования нескольких страниц HTML. Причем выбранная таблица применяется ко всему документу. Связывание выполняется с помощью тэга <LINK> в разделе документа <HEAD>.
<HEAD>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”style1.css”>
</HEAD>
Параметр REL указывает тип присоединяемого к документу файла, параметр TYPE указавает тип стилевой таблицы, HREF обращается к местоположению таблицы. Использование данного метода позволяет применять одинаковый набор правил для группы документов для обеспечения их одинакового отображения в браузере.
2) Внедрение – задает все правила CSS в стилевом блоке самого документа, обеспечивая их применение ко всей странице. Стилевой блок находится в заголовочном разделе документа и ограничивается тэгами <STYLE> и символами комментариев для HTML, что позволяет исключить выполнение правил браузерами, не поддерживающими таблицы стилей.
<HEAD>
<STYLE TYPE=”text/css”>
<!--
H1 {color: red; font-family: “Courier New”; }
P {background-color: lightsteelblue; }
-->
</STYLE>
</HEAD>
3) Импортирование – позволяет связать с HTML-документом таблицу стилей, расположенную на сервере, и использовать ее для любого фрагмента. Внешняя таблица импортируется в тэге <STYLE> с помощью свойства @import таблиц стилей.
@import: url (style2.css);
Приведенное свойство указывается в начале стилевого блока или связываемой таблицы до блока с другими заданными правилами. В качестве значения этого свойства используется URL-ссылка, определяющая месторасположение стилевого файла.
4) Встраивание в дескрипторы документа – задает правила форматирования для отдельных элементов документа. Этот метод предназначен для адресного изменения свойств отображения определенного фрагмента страницы. В этом случае таблица стилей встраивается в отдельный тэг с помощью параметра STYLE, который может определяться практически для любого дескриптора. Значения этого параметра задаются в соответствии с синтаксисом каскадных таблиц стилей.
<H1 STYLE=”color: red; font-size: 14pt”> Заголовок первого уровня отображается красным цветом, шрифтом размера 14 пунктов </H1>
Подобное использование таблиц стилей лишает разработчика преимуществ задания CSS в отдельном файле или в головной части документа, в случае необходимости изменения параметров отображения придется просмотреть весь документ. Этот метод похож на форматирование документа с помощью отдельных дескрипторов и их атрибутов.
2
2.1 Специальные селекторы
Использование в качестве селектора HTML-дескриптора, изменяет форматирование внешнего вида всех элементов, относящихся к данной категории. Но часто требуется определить стиль форматирования только для некоторых элементов, объединенных в класс по какому-то признаку или не связанных между собой. Для этого применяются специальные селекторы к которым относятся селекторы CLASS, ID и контекстные селекторы.
Селектор CLASS
Этот селектор позволяет задавать правила форматирования для элемента, определенного конкретным дескриптором, или для всех элементов документа. Имя класса указывается в селекторе правила и отделяется от дескриптора точкой. Для одного тэга в таблице можно определять несколько стилей форматирования и с помощью параметра CLASS применять их в документе.
В таблице стилей правила с использованием классов записываются следующим образом:
<STYLE TYPE=”text/css”>
<!--
H1.red {color: red; }
H1.bgcol {background-color: grey; }
P.blue {color: blue; }
-->
</STYLE>
В тексте документа ссылка на элемент стилевой таблицы задается через имя класса, стоящее в селекторе после точки, которое указывается как значение параметра CLASS.
<H1 CLASS=”red”>Текст заголовка первого уровня отображается красным цветом </H1>
<H1 CLASS=”bgcol”>Текст заголовка первого уровня отображается на сером фоне</H1>
<H1>Текст отображается с параметрами установленными по умолчанию</H1>
<P CLASS=”blue”>Текст данного абзаца отображается голубым цветом</H1>
Таким образом, задаются классы для отображения элементов конкретного типа. Если правила форматирования следует применять к разным элементам одного документа, то селектор задается без указания дескриптора с именем класса и предшествующей точкой, указывающей на наличие объекта CLASS:
<STYLE TYPE=”text/css”>
<!--
.red {color: red; }
.bgcol {background-color: grey; }
.blue {color: blue; }
-->
</STYLE>
Свойства классов red, bgcol, blue можно применять к любым элементам документа:
<P CLASS=”red”>Текст данного абзаца отображается красным цветом </P>
<H3 CLASS=”bgcol”>Текст заголовка тертьего уровня отображается на сером фоне</H3>
<B>Текст отображается с параметрами установленными по умолчанию</B>
<EM CLASS=”blue”>Текст, выделенный курсивом, отображается голубым цветом</EM>
Селектор ID
В качестве специального селектора может применяться и селектор ID, определяющий уникальное название элемента таблицы стилей, указываемое после префикса (#). С его помощью устанавливаются ссылки в сценариях и в теле документа. Параметр ID, в качестве значения которого используется имя правила таблицы, может использоваться в любом дескрипторе документа.
В таблице стилей правила с использованием ID записываются следующим образом:
<STYLE TYPE=”text/css”>
<!--
#red {color: red; }
#bgcol {background-color: grey; }
-->
</STYLE>
В тексте документа ссылка на элемент стилевой таблицы задается следующим образом:
<H1 ID=”red”>Текст заголовка первого уровня отображается красным цветом </H1>
<TT ID=”red”>Моноширинный текст отображается красным цветом </TT>
<H1 ID=”bgcol”>Текст заголовка первого уровня отображается на сером фоне</H1>
<P ID=”bgcol”>В абзаце используется фон серого цвета</P>
Для форматирования конкретных элементов не следует злоупотреблять использованием идентификаторов отдельных частей документа. Лучше использовать правила форматирования, встраиваемые в тэги. Это связано с принципом приоритетности таблиц.
Контекстные селекторы
При создании HTML-документов может возникнуть задача форматирования вложенных элементов. Например, требуется изменить стиль отображения текста выделенного тэгом <DFN> во фрагменте документа, образованным тэгом <DIV>. Некоторые свойства элемента-родителя наследуются элементом-потомком, например, цвет шрифта. Для отображения вложенных элементов со своими свойствами их можно задать отдельно в стилевой таблице:
DIV {color: yellow}
DFN {color: silver}
В таком случае текст, отмеченный тэгом <DFN>, во всем документе будет отображаться шрифтом серебряного цвета. Если необходимо изменить стиль определения только в данном фрагменте текста используются контекстные селекторы, состоящие из нескольких дескрипторов отделенных пробелом.
DIV DFN {color: silver}
Интерпретатор браузера, просматривая документ, выявляет определения DFN, порожденные элементом DIV, и применяет к ним указанное правило форматирования. Правила с контекстными селекторами задаются, используя синтаксис таблиц стилей для одиночных селекторов.
1). Примените правила форматирования, включающие специальные селекторы, для текстовых элементов, размеченных в документе дескрипторами <B>, <EM>, <TD>, <DIV>.
2). Для одного и того же тэга HTML-документа запишите три правила, каждое из которых имеет специальный селектор и различные значения одного и того же свойства, и присоедините их с помощью метода связывания и внедрения.
3
Псевдоклассы используемые в HTML-документах
Правила форматирования применяются к элементам документа, имеющим определенное положение в структуре документа и использующим заданные атрибуты. Элементы могут объединяться в классы по расположению в структуре и по различным критериям. Если в классе можно выделить какую-то общность элементов, то она будет называться псевдоклассом, а элементы псевдоэлементами. Использование псевдоклассов и псевдоэлементов расширяет возможности адресации стилевых правил и позволяет внешней информации влиять на форматирование фрагментов документа. Псевдоэлементы используются для указания местоположения частей документа, а псевдоклассы – для форматирования стилей элементов различных типов.
В большинстве современных браузеров реализуется наиболее распространенный, а иногда и единственный, псевдокласс для элементов связей А.
Обычно браузеры отображают посещенные связи отлично от непосещенных, чаще всего используется цветовое отображение или отображение подчеркиванием.
Первый уровень CSS регламентирует отображение связей через псевдокласс элемента А:
A: link {color: aqua} /* непосещенная связь */
A: visited {color: blue} /* посещенная связь */
A: active {color: fuchsia} /* активная связь */
A: hover {color: maroon} /* связь, на которой расположен курсор манипулятора */
В каскадных таблицах символ /*…*/ используется для написания комментариев. Активной связью является связь, выбранная в данный момент, или связь в которой выполняется какой-то процесс, например, загружение или сохранение какой-то информации.
В данном примере связи отображаются различным цветом в зависимости от действий, совершенных пользователем.
Браузер Microsoft Internet Explorer 4.0 правильно реализует указанные псевдоклассы связей, тогда как Netscape Navigator 4.0 воспринимает только псевдоклассы link и visited. Поскольку псевдоклассы применяются только к типу элементов А, то справедлива запись правил без указания тэга в селекторе.
: link {color: aqua} /* непосещенная связь */
: visited {color: blue} /* посещенная связь */
МОДЕЛЬ ФОРМАТИРОВАНИЯ ЭЛЕМЕНТОВ
Для форматирования элементов в стилевых таблицах применяется модель, представляющая собой вложенные прямоугольники, в центре которых находится содержимое самого элемента (рис.2).
Блок содержимого элемента отделен от границы отступом. Внешней оболочкой является поле. Поле является прозрачным, его цвет наследует элемент-родитель (для текста это элемент BODY). Отступ имеет цвет фона самого элемента. Цвет границы задается отдельно. По особенностям форматирования различаются блочные и встроенные элементы.
Рис. 2 Модель форматирования тестового блока
Блочные элементы
В модели на рис. 2.1 к каждому элементу может быть применено свойство display задающее отображение элемента со значениями yes или no, а также его вид блочный (block), встроенный (inline) или список (list-item). Элементы со значением свойства display равным block, list-item, а также элементы со значением параметра float равным none являются блочными элементами.
Для форматирования блочного элемента по горизонтали используются семь свойств: левое поле (margin-left), левая граница (border-left), левый отступ (padding-left), ширина элемента (width), правый отступ (padding-right), правая граница (border-right), правое поле (margin-right). Сумма значений параметров горизонтального выравнивания равна ширине элемента-родителя или ширине окна браузера, если отсутствует вложение.
Встроенные элементы
Если элементы не форматируются по правилам блочных элементов, то они являются встроенными элементами. Эти элементы для отображения используют область строки. В случае недостаточной ширины строки для отображения, элемент будет разбит на два, помещенных в разные строки. Приведем один пример встроенного элемента.
<P> В абзаце располагается
<EM STYLE=”color:lime”> встроенный элемент, отображаемый красным цветом и курсивом
</EM> </P>
Задание к лабораторной работе №3
Задайте HTML-таблицу, поместите в одну ячейку изображение, а в другую текстовый фрагмент. Используя параметры тэгов <TABLE>, <TD> и правила таблиц стилей отформатируйте изображение таким образом, чтобы расстояние между границей и блоком было 20мм, а расстояние между блоками 35мм.
Какие темы сегодня прошли??? Мож кому ни в лом, кинет лекцию на мыло (буду премного благодарна 
