5.5 Задание отображения единичных элементов документа (локальные таблицы
стилей)
Как было сказано ранее, при создании html-документов можно использовать локальные
каскадные таблицы стилей . Для этого в конкретном html- элементе параметру style присваивается
14
значение, которое обычно записывается в скобках {} в строке таблицы стилей . Ниже приведен
переделанный пример 2, в котором реализовано определение локальных стилей (обратите
внимание, что при этом отпала необходимость определения глобальной таблицы стилей) ( пример
3).
Пример 3. Использование атрибута style
<HTML>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца </P>
<H1 style = "color: red; font-family: arial"> Измененный заголовок первого
уровня</H1>
<H2>Заголовок второго уровня </H2>
<P style = "font-style: italic"> Курсивный текст абзаца </P>
<H2 style = "color: blue; font-family: newroman"> Измененный заголовок
второго уровня</Н2>
<P style = "font-weigth : bold"> Полужирный текст абзаца </P>
</BODY>
</HTML>
5.6 Комментарии в таблице стилей
В таблицы стилей можно помещать комментарии. Однако синтаксис комментария CSS
отличается от комментария HTML. Комментарий в CSS задается следующим образом:
/* Это однострочный комментарий */
/* А здесь записан
многострочный комментарий */
5.7 Порядок применения стилей
Ранее говорилось не просто о таблицах стилей, а о каскадных таблицах стилей. Рассмотрим,
в чем же проявляется каскадирование и как его можно использовать.
Каскадирование проявляется при наличии в одной или нескольких используемых
документом таблицах стилей задания разных значений одного и того же свойства определенного
HTML-элемента или стилевого класса. Например, пусть в таблице есть следующие записи:
. . .
НЗ {text-align: right; color: black}
. . .
H3 {text-align: center}
Какое из значений свойства text-align будет использовано? Каскадирование предполагает,
что будет использовано последнее значение , которое присвоено этому сво йству. Анало гичным
образом выбираются значения при перекрытии не одного, а нескольких свойств.
Если нужно, чтобы присвоенное ранее значение нельзя было изменить, то при его задании
применяется модификатор important.
. . .
НЗ {text-align: right ! important; color: black}
. . .
H3 {text-align: center}
Теперь для всех HTML-элементов НЗ будет использоваться выравнивание по правому
краю, несмотря на то, что последним было определение выравнивания по центру.
Возможен также случай, когда в нескольких таблицах или в нескольких местах одной и той
же таблицы стилей установлен модификатор important сразу для нескольких значений одного и
того же свойства. Например:
. . .
НЗ {text-align: right ! important; color: black}
. . .
НЗ {text-align: center ! important}
. . .
H3 {text-align: left}
15
Единица |
Описание |
Пиксел (рх) |
Обозначает точку устройства отображения, например, монитора. Не имеет определенного выражения в метрических единицах, хотя и является абсолютной единицей |
Миллиметр (mm) |
Абсолютная единица |
Пика (рс) |
Абсолютная единица (типографская единица измерения). Равна 4,23 мм |
Сантиметр (cm) |
Абсолютная единица |
Дюйм (in) |
Абсолютная единица |
Ширина буквы m (em) |
Относительная единица. Зависит от конкретного шрифта и его размера. Применяется, так как буква m традиционно считается самым широким символом шрифта |
Высота буквы х (ех) |
Относительная единица. Зависит от конкретного шрифта и его размера |
Процент (%) |
Относительная единица. Обычно подразумевается доля от ширины или высоты доступного пространства (например, процент от высоты ячеек) |
В этом случае для свойства text-align принимается последнее значение с модификатором
important ( значения без important вообще не рассматриваются ). В этом случае также осу-
ществляется каскадирование , но не для всех значений сво йства , а только для значений с
модификатором important.