Директива @import может содержать список названий устройств отображения, к которым должна применяться данная таблица стилей, разделенных запятыми. Например:
@import url("fineprint.css") print; @import url("bluish.css") projection, tv;
Если списка названий устройств нет, то предполагается, что он равен all, т.е. импортируемая таблица стилей применима ко всем устройствам.
Директивы @import должны располагаться в элементе <style> или в css-файле перед первым правилом и не могут находиться внутри текстового блока; в противном случае они игнорируются обозревателем.
Стили, подставляемые в строку (inline styles)
Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и тега <style>. Типичный случай – элемент встречается единожды в документе или на сайте, но требует особого оформления. В этом случае возможно воспользоваться атрибутом style:
<p style="color:yellow; background-color:black">Это абзац, в кото-
ром шрифт визуализируется желтым цветом на черном фоне, других таких на сайте нет</p>
Как видно из примера, внутри атрибута style можно написать несколько CSS-объявлений, разделённых точкой с запятой, фигурные скобки не используются.
3.3. Шрифт
Общее свойство font позволяет полностью определить стиль шрифта. Последовательность указания значений роли не играет. Можно указывать не все значения.
Рассмотрим составные свойства, значения используются и в общем свойстве.
60
Свойство font-family задает список имен семейств шрифтов, применяемых при отображении содержимого элемента. Этот список состоит из имен семейств шрифтов, разделенных запятыми. Имена семейств располагаются в порядке предпочтения. Например, свойство
font-family: Verdana, Arial, sans-serif;
следует читать так: «использовать шрифт Verdana; если его нет, то использовать шрифт Arial; если его нет, то использовать родовой шрифт sans-serif». Такой список необходим, поскольку заранее не известно, какие именно шрифты установлены на компьютерах у пользователей.
Имя семейства шрифтов может быть задано двумя способами:
1)имя-семейства задает название семейства шрифтов. Если это название содержит пробелы, то оно должно быть заключено в кавычки или апострофы;
2)родовое-имя задает одно из следующих имен: serif, sans-serif, cursive, fantasy и monospace.
Для достижения наибольшей совместимости рекомендуется задавать родовое имя шрифта последним в списке. В этом случае, если обозреватель не найдет на компьютере-клиенте ни одного из заданных шрифтов, он использует свой родовой шрифт с заданным именем.
Свойство font-style задает стиль шрифта, применяемого для отображения содержимого элемента. Оно может иметь значения normal (обычный шрифт) и italic (курсивный):
span {font-style:italic;}
Свойство font-weight задает степень жирности шрифта, применяемого для отображения содержимого элемента. Оно может принимать следующие основные значения: normal (обычный шрифт) и bold (полужирный):
h1 {font-style:normal;}
Свойство font-size задает размер шрифта, применяемого для отображения содержимого элемента. Оно может задаваться несколькими способами:
61
Значения
xx-small | x-small | small | medium | large | x-large | xx-large
задаютабсолютныйразмер шрифта(отнаименьшего кнаибольшему). Значения
smaller | larger
задают размер шрифта относительно родительского шрифта (меньше или больше). Также может быть задан абсолютный или относительный (относительно шрифта по умолчанию) размер шрифта.
3.4. Текст
Для оформления текста общее свойство не предусмотрено, однако существуют составные.
Свойство text-indent задает отступ первой строки (красную строку) при отображении блочных элементов. Отступ может быть отрицательным и задается абсолютным либо относительным (в процентах относительно ширины блока) способом:
h2 {text-indent:1.2em;}
Свойство text-align задает выравнивание текста для блочных элементов и может принимать следующие значения:
left выравнивание по левому краю, right выравнивание по правому краю, center выравнивание по центру, justify выравнивание по ширине.
p {text-align:center;}
Свойство text-decoration позволяет оформить текст следующим
образом: |
|
none |
обычный текст, |
line-through |
перечеркнутый текст, |
overline |
надчеркнутый текст, |
underline |
подчеркнутый текст. |
a:link { text-decoration: none}
/* убирает подчеркивание с ссылок */
62