Вертикальное форматирование

Ширина границы фиксированного блочного элемента определяют минимальное расстояние до краев окружающих полей. Две или более прилегающих вертикальных границы (т.е. без рамки, отступа и содержания между ними) сжимаются для максимального использования значения границы. В большинстве случаев после сжатия вертикальных границ результат приятнее на вид и ближе к ожидаемому дизайнером. В приведенном примере границы между двумя элементами 'LI' сжимаются с использованием максимума нижней границы первого элемента 'LI' и верхней границы второго элемента 'LI'. Аналогично, если заполнение между 'UL' и первым элементом 'LI' (значение "Е") было бы равно нулю, границы 'UL' и первого элемента 'LI' были бы сжаты.

В случае отрицательных границ, абсолютный максимум прилегающих отрицательных границ вычитается из максимума прилегающих положительных границ. Если положительных границ нет, абсолютный максимум негативных прилегающих границ вычитается из нуля.

Горизонтальное форматирование

Горизонтальное позиционирование и размеры фиксированного блочного элемента определяются семью свойствами: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' и 'margin-right'. Сумма этих семи составляющих равносильна ширине родительского элемента.

По умолчанию, "ширине" элемента присваивается значение 'auto'. Если элемент не является замещаемым, это значит, что UA считает "ширину" так, чтобы сумма указанных семи свойств была эквивалентна ширине родительского элемента. Если элемент замещаемый, то значение 'auto' для "ширины" автоматически заменяется внутренней шириной элемента.

Трем из семи свойств может быть присвоено значение 'auto': "левая граница", "ширина", и "правая граница". Для замещаемых элементов значение 'auto' для "ширины" автоматически заменяется внутренней шириной элемента, поэтому для них могут существовать только два значения auto'.

"Ширина" имеет неотрицательное минимально-допустимое значение, определяемое UA (которое может меняться от элемента к элементу, и даже зависеть от других свойств). Если "ширина" меньше допустимой (даже если она задана явным образом либо имела значение 'auto' и по приоритетному правилу должна быть меньше), ее значение будет заменено заменяется минимально-допустимым.

Если именно одно из свойств "левая граница", "ширина" или "правая граница" имеют значение 'auto', UA определит этому свойству значение, которое сделает сумму значений семи свойств эквивалентной ширине родительского элемента.

Если ни одно из свойств не имеет значения 'auto', то последнее будет присвоено свойству "правая граница".

Если более чем одному из трех вышеуказанных свойств будет присвоено значение 'auto', и одно из них- "ширина", то остальные ("левая граница", и/или "правая граница") будут приравнены к нулю, а "ширина" получит значение, необходимое, чтобы сделать сумму значений семи свойств эквивалентной ширине родительского элемента.

В противоположной ситуации, если как "правая граница" так и "левая граница" будут иметь значение 'auto', им будут присвоены равноценные значения. Элемент будет выронен по центру внутри родительского.

Если значение 'auto' было присвоено как значение для одного из вышеупомянутых семи свойств в строчном или плавающем элементе, это будет обработано так, как если бы им было присвоено нулевое значение.

В отличие от вертикальных границ, горизонтальные границы не сливаются.

Элементы-списки

Элементы со свойством 'display', имеющим значение 'list-item' ("список"), форматируются как блочные, но предваряются маркером. Тип маркера определяется свойством "стиль списка" ('list-style'). Маркер устанавливается в соответствии со значением свойства "стиль списка":

<STYLE TYPE="text/css"> UL { list-style: outside } UL.compact { list-style: inside } </STYLE>

<UL> <LI>первый пункт списка идет первым <LI>второй пункт списка идет вторым </UL>

<UL CLASS=COMPACT> <LI>первый пункт списка идет первым <LI>второй пункт списка идет вторым </UL>

Форматирование по данному примеру может выглядеть как:

* первый пункт списка идет первым

* второй пункт списка идет вторым

* первый пункт списка идет первым

* второй пункт списка идет вторым

Если текст выравнивается по ширине, маркеры должны быть на левой стороне поля.

Плавающие элементы

Используя свойство элемента "плавающий" ('float'), можно декларировать его в качестве внешнего по отношению к нормальному потоку элементов, а затем форматировать, как блочный элемент. Например, при установке значения 'left' для свойства "плавающий" применительно к изображению, последнее перемещается влево до границы отступа или рамки, либо достигает другого блочного элемента. Нормальный поток будет переноситься по правой стороне. Границы, рамки и отступы самого элемента будут учитываться, и никогда не будут сливаться с границами смежных элементов.

При позиционировании плавающего элемента должны выполняться следующие условия (см. раздел 4.1. для разъяснения терминов):

1. Левая внешняя граница левоориентированного плавающего элемента не может быть слева от левой внутренней границы родительского элемента. Аналогично для правоориентированных плавающих элементов.

2. Правая внешняя граница левоориентированного плавающего элемента должна быть справа от правой внутренней границы любого предшествующего (согласно исходному тексту HTML) левоориентированного элемента, или же вершина предшествующего элемента должна быть ниже чем низ последующего. Аналогично для правоориентированных плавающих элементов.

3. Правая внешняя граница левоориентированного плавающего элемента не может быть справа от левой внешней границы правоориентированного плавающего элемента, расположенного правее его. Аналогично для правоориентированных плавающих элементов.

4. Вершина плавающего элемента не может быть выше потолка родительского элемента.

5. Вершина плавающего элемента не может быть выше вершины любого из предшествующих плавающих или блочных элементов.

6. Вершина плавающего элемента не может быть выше вершины строчного поля (см. раздел 4.4) с содержанием, предшествующим описанию плавающего элемента в исходном тексте HTML.

7. Плавающий элемент должен расположиться как можно выше.

8. Левоориентированный плавающий элемент должен расположиться как можно левее, правоориентированный - как можно правее. Приоритетно крайнее положение устанавливается для более левого или правого элемента.

<STYLE TYPE="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE>
<BODY> <P> <IMG SRC=img.gif> Примерный текст, чтобы показать... </BODY>
Форматирование в приведенном примере будет выглядеть так:
________________________________________ | | max(граница BODY, граница P) | ______________________________ | | | Примерный текст, | г | г |границы IMG чтобы показать, как | р | р | _____ плавающие элементы | а | а | | | смещаются относительно | н | н | | IMG | к сторонам родительского | и | и | | | элемента, несмотря | ц | ц | |_____| на приоритет | a | а | границы, бордюра | | | и заполнения. | B | P | Обратите внимание, | O | |как смежные вертикальные границы | D | |сжимаются между фиксированными | Y | |блочными элементами.
Обратите внимание, как границы элемента 'P' окружают плавающий элемент 'IMG'.
Есть два случая, когда плавающие элементы могут перекрывать области границы, рамки и отступа других элементов:
когда плавающий элемент имеет отрицательную величину границы: отрицательные границы плавающих элементов имеют приоритет над иными блочными элементами; когда плавающий элемент выше или шире чем элемент внутри.

Распознавание шрифта.

В связи с отсутствием общепринятой классификации свойств шрифта, распознавание свойств гарнитуры шрифта должно быть произведена особенно тщательно. Свойства идентифицируются в четко выраженном порядке, чтобы результаты распознавания были настолько последовательными, насколько позволяют UA (предполагается, что на каждом из последних установлена одна и та же библиотека гарнитур шрифта).

1. UA создает базу относящихся к CSS1 свойств всех известных для UA шрифтов. UA может быть осведомлен о шрифте, если тот был установлен локально или загружен из Интернет. Если найдены два шрифта с одинаковыми свойствами, один из них игнорируется.

2. Применительно к данному элементу и для каждого из символов данного элемента, UA подбирает свойства шрифта, применимые к этому элементу. Основываясь на полном наборе свойств, UA использует свойство "семейство" ('font-family') для выбора пробного семейства шрифта. Остальные свойства проверяются на предмет того, насколько пробное семейство соответствует критериям распознавания, описываемым каждым из свойств. Если все остальные свойства могут быть распознаны UA, то распознавание гарнитуры шрифта считается завершенным.

3. В случае, если в процедуре п. 2 не удается распознать гарнитуру шрифта, и если в запасе есть другое альтернативное семейство шрифтов, процедура п. 2 повторяется применительно к последнему.

4. Если гарнитуру шрифта удалось распознать, но оно не содержит глифа для текущего символа, процедура п. 2 повторяется для следующего альтернативного начертания шрифта, если таковое имеется. См. в приложении С описание шрифтов и кодировок.

5. Если с помощью процедуры п.2 не удалось распознать гарнитуру шрифта, берется гарнитура шрифта, определенного для UA по умолчанию, затем повторяется процедура п. 2, с использованием наилучших результатов, которые могут быть достигнуты со шрифтом по умолчанию.

(Вышеизложенный алгоритм может быть оптимизирован на предмет исключения дублирования проверок свойств CSS1 для каждого символа).

Из правил распознавания свойств (2) вытекает следующее:

1. "Начертание" ('font-style') пробуется в первую очередь. "Курсив" ('italic') считается распознанным если курсив явно указан, либо данная гарнитура шрифта в базе UA отмечена зарезервированными для CSS словами 'italic' (предпочтительное), или 'oblique'. В противном случае значения должны быть распознаны правильно, иначе "начертание" считается нераспознанным.

2. Следующим пробуется "вариант". "Нормальным" считается шрифт, не отмеченный как "малые прописные" ('small-caps'); "малые прописные" считается (1) шрифт, помеченный как 'small-caps', (2) шрифт, в котором синтезированы малые прописные символы или (3) шрифт, в котором строчные буквы заменены прописными. Малые прописные буквы могут быть синтезированы путем уменьшения размеров прописных букв нормального шрифта.

3. "Вес" шрифта опознается следующим и никогда не бывает неопознанным. (См. далее "Задание веса шрифта").

4. "Размер" шрифта ('font-size') должен распознаваться в допустимых пределах, установленных UA. (Обычно размеры масштабируемых шрифтов округляются до ближайшего целого пикселя, так что допуск для растровых шрифтов на экране может доходить до 20%.) Дальнейшая обработка, например, значений в единицах "м" других свойств, основано на том значении "размера", которое используется, а не на том, которое определено.

Задание семейства шрифта ('font-family').

Значение: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] По умолчанию: определяется UA Область приложения: все элементы Наследование: есть Процентное выражение: неопр.

Значение свойства представляет собой перечень гарнитур шрифтов и/или их названий в порядке приоритетности. В отличие от других свойств CSS1, здесь значения могут разделяться запятой для указания альтернатив:

BODY { font-family: gill, helvetica, sans-serif }

Имеются два типа перечней значений:

<family-name> Названия избранных гарнитур шрифта (в последнем примере - "gill" и "helvetica"). <generic-family> В нижеследующем примере последнее значение указывает на семейство шрифта. Определены следующие семейства:

'serif' (напр. Times) 'sans-serif' (напр. Helvetica) 'cursive' (напр. Zapf-Chancery) 'fantasy' (напр. Western) 'monospace' (напр. Courier)

В таблицах стилей дизайнерам рекомендуется использовать указание семейства шрифта в качестве последней альтернативы.

Названия семейств, содержащие пробелы, должны быть в кавычках:

BODY { font-family: "new century schoolbook", serif }

Если кавычки отсутствуют, то символы пробела перед и после названия гарнитуры игнорируются и любая последовательность символов пробела внутри названия семейства преобразуется в слитное написание.

Задание начертания шрифта ('font-style')

Значение: normal | italic | oblique По умолчанию: normal Область приложения: все элементы Наследование: да Процентное выражение: неопр.

Свойство "начертание" ('font-style') определяет выбор между нормальным (иногда обозначается также терминами "roman" или "upright"), курсивным и наклонным начертанием шрифта.

Значение "нормальный" ('normal') принимается для шрифта, если он классифицирован как нормальный ('normal') в базе шрифтов UA, в то время как "наклонным" считается шрифт, помеченный как 'oblique'. По значению "курсив" ('italic') выбирается шрифт, обозначенный как 'italic' , либо, при отсутствии такового, обозначенный как 'oblique'.

Шрифт, обозначенный как "наклонный" ('oblique') в базе шрифтов UA, может также генерироваться программным способом путем наклона линий нормального шрифта.

Шрифты, имеющие в названиях такие слова, как Oblique, Slanted или Incline, обычно обозначаются в базе данных UA как "наклонные". Шрифты, имеющие в названиях такие слова, как Italic, Cursive или Kursiv, обычно обозначаются как "курсив".

H1, H2, H3 { font-style: italic } H1 EM { font-style: normal }

В вышеприведенном примере подчеркнутый текст, относящийся к H1, будет отрабатываться как нормальный.

Задание варианта шрифта ('font-variant').

Значение: normal | small-caps По умолчанию: normal Область приложения: все элементы Наследование: есть Процентное выражение: неопр.

Другой тип варьирования внутри семейства шрифтов - это "малые прописные". В таких шрифтах строчные буквы выглядят подобно заглавным, только меньше размером и с несколько иными пропорциями. Такой шрифт определяется свойством "вариант" ('font-variant' ).

Значение 'normal' определяет шрифт без малых прописных букв, 'small-caps' - с малыми прописными. Для CSS1 желательно (но не обязательно), чтобы малые прописные создавались путем замены строчных букв уменьшенными символами прописных. В крайнем случае, для замены шрифта с малыми прописными используются прописные буквы.

В нижеследующем примере в элементе H3 результатом будет шрифт в варианте "малые прописные", с подчеркнутыми наклонными малыми прописными буквами.

H3 { font-variant: small-caps } EM { font-style: oblique }

В семействе шрифтов возможны и другие варианты, например, шрифты со старинными цифрами, малыми прописными цифрами, сжатыми или растянутыми буквами и т.п. CSS1 не предусматривает свойств для их определения.

Ядро CSS1: как для преобразования текста в написанный заглавными буквами, так и для 'text-transform' используются одинаковые соображения. (Досл.: CSS1 core: insofar as this свойство causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply)

Задание веса шрифта ('font-weight')

Значение: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 По умолчанию: normal Область приложения: все элементы Наследование: есть Процентное выражение: неопр.

Свойство "вес шрифта" определяет степень толщины линий при начертании. Это ряд значений от 100 до 900, где каждый номер указывает вес, соответствующий по крайней мере не меньшей жирности начертания, чем для предшествующего. Нормальный шрифт 'normal' соответствует номеру 400, полужирный 'bold' - 700. Другие слова, использованные вместо 'normal' или 'bold', зачастую истолковывались как названия гарнитур, и поэтому была принята численная шкала в 9 позиций.

P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */

Значения 'bolder' и 'lighter' определяют вес шрифта по отношению к унаследованного от родительского:

STRONG { font-weight: bolder }

Дочерние элементы наследуют результирующее значение веса, но не его ключевое слово.

Шрифты (данные шрифтов) обычно имеют одно или более свойств, значения которых являются терминами, описывающими их веса. Общепринятых, универсальных описаний названий весов не существует. Первичная функция этих условных имен - различать жирность внутри одного семейства шрифтов. В целом по разным семействам шрифта терминология весьма разнообразна: к примеру, шрифт, который по внешнему виду отнесли бы к полужирным, может быть назван как Регулярный (Regular), Романский (Roman), Книжный (Book), Средний (Medium), Полужирный (Semi- или DemiBold), Жирный (Bold), или как Black, в зависимости от относительной "жирности" нормального шрифта данного семейства. В связи с отсутствием стандартных названий, свойство "вес" для CSS1 в численном выражении соизмеряется со значением 400, которое соответствует нормальному шрифту данного семейства. Этому весу обычно соответствуют такие условные имена шрифтов, как Book, Regular, Roman, Normal, Medium, Обыкновенный, Книжный, Средний, Нормальный.

Соотнесение остальных весов шрифтов в семействе с их численным обозначением предполагает сохранение только относительной жирности в пределах ряда, установленного для данной семьи. Тем не менее в ряде типичных случаев можно поступать в соответствии со следующей логикой:

Если семейство шрифта уже использует числовую шкалу с девятью градациями (к примеру, как шрифт Open Type), вес шрифта может быть пересчитан напрямую. Если гарнитура отмечена как Medium, а в семействе есть хотя бы одна, помеченная как Book, Regular, Roman или Normal, то гарнитура Medium ассоциируется с весом 500. Шрифт, отмеченный как Bold, обычно соответствует весу 700. Если шкала жирности шрифта имеет меньше 9 градаций, используется следующий метод интерполяции. Если значение 500 невозможно присвоить, вместо него также присваивается 400. Если невозможно присвоить одно из значений следующего ряда - 600, 700, 800, 900 - то берется ближайшее значение для более жирного шрифта, если таковое имеется, в противном случае - для менее жирного. Если невозможно присвоить одно из значений следующего ряда - 300, 200, 100, - то берется ближайшее значение для менее жирного шрифта, если таковое имеется, в противном случае - для более жирного.
Данный метод иллюстрируют два нижеследующих примера. Возьмем для некоего условного семейства шрифтов "Example1" четыре градации веса по возрастающей: Regular, Medium, Bold, Heavy. Возьмем также шесть градаций веса для другого условного семейства шрифтов "Example2": Book, Medium, Bold, Heavy, Black, ExtraBlack. Обратите внимание на то, как во втором примере шрифт "Example2 ExtraBlack" не был с чем-либо ассоциирован.
Доступные шрифты Назначен вес Включены также "Example1 Regular" 400 100, 200, 300 "Example1 Medium" 500 "Example1 Bold" 700 600 "Example1 Heavy" 800 900
Доступные шрифты Назначен вес Включены также "Example2 Book" 400 100, 200, 300 "Example2 Medium" 500 "Example2 Bold" 700 600 "Example2 Heavy" 800 "Example2 Black" 900 "Example2 ExtraBlack" (none)
В зависмости от того, как ключевые слова 'bolder' и 'lighter' делают шрифт в семействе жирнее или светлее, и в связи с тем, что семейство шрифта может не содержать шрифтов, соответствующих всем весовым значениям, обработка значения 'bolder' до следующего более жирного и значения 'lighter' до менее жирного ограничена для UA пределами семейства шрифта. Если точнее, то ключевые слова 'bolder' и 'lighter' означают следующее.

Значение 'bolder' выбирает для шрифта следующий вес, соответствующий более жирному шрифту, чем родительский. Если такого веса нет, то обычно используется ближайшее большее численное значение (при сохранении шрифта неизменным), если наследуемое значение не было равно 900, в противном случае вес остается равным 900. Аналогично со значением 'lighter', но в обратном порядке: выбирается ближайшее значение, соответствующее менее жирному шрифту, если же таковой отсутствует, то принимается ближайшее численное значение для менее жирного шрифта, при сохранении шрифта неизменным.
Это не дает гарантии, что для любого значения "веса" найдется более жирный шрифт; к примеру, некоторые фонты бывают только нормальными или полужирными, остальные могут иметь восемь гарнитур с различным весом. Нельзя заранее угадать, как именно UA сопоставит формализованные шрифтовые параметры с конкретными шрифтами различной жирности. Можно быть уверенным лишь в том, что шрифт заданного наименования будет не менее жирным, чем имеющиеся в семействе менее жирные шрифты.

Задание размера шрифта ('font-size').

Значение: <absolute-size> | <relative-size> | <length> | <percentage> По умолчанию: medium Область применения: все элементы Наследование: есть Процентное выражение: относительно размера шрифта родительского элемента

<absolute-size>

Значение абсолютного размера (<absolute-size>) есть индекс таблицы размеров шрифта, поддерживаемых и отрабатываемых UA. Возможные значения следующие: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. На дисплее градации масштабируются с шагом х1,5: если 'medium' - кегль 10, то 'large' - кегль 15. Различные мультимедийные устройства могут потребовать различные шкалы масштабирования. Кроме того, UA должен обеспечивать качество и разборчивость шрифтов при отработке таблицы. Для разных семейств шрифтов таблицы могут отличаться.

<relative-size>

Относительный размер (<relative-size>) отрабатывается, исходя из таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения - [ larger | smaller ]. Например, если размер шрифта родительского элемента 'medium', то значение 'larger' преобразует шрифт текущего элемента в 'large'. Если для размера шрифта родительского элемента нет близкого вхождения в таблицу, то UA волен интерполировать данные таблицы или округлить размер до ближайшего значения. UA может также экстраполировать табличные значения, если численное значение выходит за пределы зарезервированных слов.

Для значений длины и процентного выражения таблица размеров шрифта не должна приниматься в расчет, пока не будет вычислен размер шрифта элемента

Отрицательные значения не допускаются.

Для всех других свойств, значения длины 'em' и 'ex' относятся к размеру шрифта текущего элемента. Для свойства "размер шрифта" эти единицы длины относятся к размеру шрифта родительского элемента.

Заметим, что приложения могут переиначивать явно заданный размер в зависимости от содержания. К примеру, для трехмерной сцены VR размер шрифта будет изменяться в зависимости от перспективы.

примеры:

P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em }

Если используется градация масштабирования 1.5, то три последних случая равнозначны.

Задание шрифта в целом ('font')

Значение: [ <font-style> <font-variant> <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> По умолчанию: не определено для обобщающего свойства Область применения: все элементы Наследование: есть Процентное выражение: допускается для <font-size> и <line-height>

Свойство "шрифт" есть обобщающее свойство для определения 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' в одном и том же месте таблицы стилей. Синтаксис этого свойства основан на традиционном для полиграфии способе указания группы свойств, относящихся к шрифтам.

Для определения допускаемых значений и значений по умолчанию см. вышеописанные свойства. Если для тех или иных свойств значения явно не указаны, то для них принимаются значения по умолчанию.

P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy }

Во втором примере размер шрифта, указанный в процентном выражении (80%), считается от размера шрифта родительского элемента. В третьем примере высота линии, выраженная в процентах, считается от размера шрифта самого элемента.

В первых трех примерах начертание, вариант и вес шрифта явно не заданы, и по умолчанию всем им присваивается значение 'normal'. В четвертом примере вес шрифта явно указан как 'bold', стиль как 'italic', а варианту по умолчанию присваивается значение 'normal'.

В пятом примере указан вариант "малые прописные" ('small-caps'), размер (120% от родительского шрифта), высота линии (120% от размера шрифта), и гарнитура ('fantasy'). Следовательно, значение 'normal' присваивается по умолчанию двум свойствам: "стиль" и "вес".

Определение цвета ('color')

Значение: <color> По умолчанию: Определяется UA Область применения: все элементы Наследование: есть Процентное выражение: неопр.

Это свойство описывает цвет текста в элементе (зачастую именуемый как цвет переднего плана). Есть несколько разных способов описать, к примеру, красный цвет:

EM { color: red } /* natural language */ EM { color: rgb(255,0,0) } /* RGB range 0-255 */

См. раздел 6.3. для описания возможных значений цвета.

Определение цвета обоев ('background-color').

Значение: <color> | transparent По умолчанию: transparent Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Это свойство описывает цвет обоев элемента.

H1 { background-color: #F00 }

Определение рисунка фона ('background-image').

Значение: <url> | none По умолчанию: нет Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Это свойство определяет рисунок фона элемента. При назначении изображения для рисунка фона, необходимо также определить цвет фона, который будет использоваться в случае недоступности изображения. Если изображение доступно, оно перекрывает цвет фона сверху.

BODY { background-image: url(marble.gif) } P { background-image: none }

Определение повтора рисунка фона ('background-repeat').

Значение: repeat | repeat-x | repeat-y | no-repeat По умолчанию: repeat Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Если рисунок фона определен, значение свойства "повтор рисунка фона" определяет, повторяется ли изображение и каким образом.

Значение 'repeat' указывает, что изображение повторяется как в горизонтальном, так и в вертикальном направлении. Значение 'repeat-x' ('repeat-y') устанавливает повтор изображения соответственно только в горизонтальном (вертикальном) направлении, создавая одну полосу из изображений от одного края до противоположного. При значении 'no-repeat' изображение не повторяется.

BODY { background: red url(pendant.gif); background-repeat: repeat-y; }

В вышеприведенном примере изображение рисунка фона повторяется только в вертикальном направлении.

Определение привязки фона ('background-attachment').

Значение: scroll | fixed По умолчанию: scroll Область приложения: все элементы Наследование: нет Процентное выражение: неопр.

Если определен рисунок фона, значение свойства "привязка" ('background-attachment') определяет, привязан ли рисунок к холсту или перемещается вместе с содержанием.

BODY { background: red url(pendant.gif); background-repeat: repeat-y; background-attachment: fixed; }

Ядро CSS1: UA вправе рассматривать 'fixed' как 'scroll'. Тем не менее рекомендуется, чтобы они правильно отрабатывали 'fixed' по крайней мере для элементов HTML и BODY, т.к. для автора не существует возможности использовать изображение только для браузеров, поддерживающих 'fixed'. (См. гл.7).

Определение положения фона ('background-position')

Значение: [<percentage> | <length>]{1,2} | [top | center | bottom] [left | center | right] По умолчанию: 0% 0% Область применения: блочные и замещаемые элементы Наследование: нет Процентное значение: по отношению к стороне самого элемента

Если рисунок фона был определен, значение свойства "положение фона" определяет его начальное расположение.

При парном значении '0% 0%', верхний левый угол изображения устанавливается в верхнем левом углу поля, окружающего содержание элемента (т.е. не того поля, что окружает отступ, рамку или границу). При парном значении '100% 100%', нижний правый угол изображения устанавливается в нижнем правом углу элемента. При парном значении '14% 84%', точка изображения 14% вправо и 84% вниз будет установлена на точке элемента 14% вправо и 84% вниз.

При парном значении '2cm 2cm', верхний левый угол изображения будет установлен на расстоянии 2 см правее и 2 см ниже верхнего левого угла элемента.

Если задано только одно процентное выражение или абсолютные единицы, они устанавливают только горизонтальное положение, а вертикальное по умолчанию будет 50%. Если заданы два значения, то первое из них - горизонтальное положение. Допускаются комбинации абсолютных единиц и процентных выражений, например, '50% 2cm'. Допускаются отрицательные значения.

Для обозначения положения изображения фона могут быть также использованы ключевые слова, которые можно комбинировать с процентным выражением или абсолютными единицами. Ниже перечислены возможные комбинации ключевых слов и их расшифровка:

'top left' или 'left top' равноценны '0% 0%'. 'top', 'top center' или 'center top' равноценны '50% 0%'. 'right top' или 'top right' равноценны '100% 0%'. 'left', 'left center' или 'center left' равноценны '0% 50%'. 'center' или 'center center' равноценны '50% 50%'. 'right', 'right center' или 'center right' равноценны '100% 50%'. 'bottom left' или 'left bottom' равноценны '0% 100%'. 'bottom', 'bottom center' или 'center bottom' равноценны '50% 100%'. 'bottom right' или 'right bottom' равноценны '100% 100%'.

примеры:

BODY { background: url(banner.jpeg) right top } /* 100% 0% */ BODY { background: url(banner.jpeg) top center } /* 50% 0% */ BODY { background: url(banner.jpeg) center } /* 50% 50% */ BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

Если рисунок фона привязан относительно холста (см. раздел "Определение привязки фона"), изображение устанавливается относительно холста, но не элемента. К примеру:

BODY { background-image: url(logo.png); background-attachment: fixed; background-position: 100% 100%; }

В вышеприведенном примере изображение устанавливается в нижний правый угол холста.

Определение свойств фона в целом ('background')

Значение: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> По умолчанию: для обобщающего свойства не определено Область приложения: все элементы Наследование: нет Процентное выражение: применительно к <background-position>

Свойство "фон" ('background') - это обобщающее свойство для установки отдельных свойств фона (т.е. цвета, рисунка, повтора, привязки и положения) в одном правиле таблицы стилей.

Возможные значения обобщающего свойства "фон" включают совокупность возможных значений каждого из составляющих свойств.

BODY { background: red } P { background: url(chess.png) gray 50% repeat fixed }

Свойство "фон" всегда устанавливает все совокупные свойства фона сразу. В первой строке вышеуказанного примера явно задан только цвет фона, а значения остальных свойств принимаются по умолчанию. Во второй строке все совокупные свойства заданы явным образом.

Установка интервалов ('word-spacing')

Значение: normal | <length> По умолчанию: normal Область применения: все элементы Наследование: есть Процентное выражение: неопр.

Численное выражение длины указывает добавление к установленной по умолчанию величине интервалов между словами. Это значение может быть отрицательным, но в этом случае могут иметь место различные ограничения, накладываемые методами отработки. UA вправе самостоятельно выбирать алгоритм вычисления интервалов. Интервалы между словами могут также зависеть от способа выравнивания абзаца (последний определяется значением свойства "выравнивание" ('align')).

H1 { word-spacing: 0.4em }

Здесь интервал между словами в элементе H1 увеличен на единицу "м" ('1em')(0,4em?), (м соответствует круглой - прим. перев.).

Ядро CSS1: UA вправе квалифицировать любое значение "интервала" как 'normal' (См. раздел 7.)

Установка трекинга ('letter-spacing')

Численное выражение длины указывает на добавление к установленной по умолчанию величине межбуквенных пробелов. Это значение может быть отрицательным, но в этом случае могут иметь место различные ограничения, накладываемые методами отработки. UA вправе самостоятельно выбирать алгоритм вычисления интервалов. Межбуквенные интервалы могут также зависеть от способа выравнивания абзаца (последний определяется значением свойства "выравнивание" ('align')).

BLOCKQUOTE { letter-spacing: 0.1em }

Здесь межбуквенный интервал для элемента BLOCKQUOTE' увеличен на '0.1em'.

В случае значения 'normal', UA может менять межбуквенное расстояние для выравнивания абзаца. Этого не произойдет, если для "трекинга" будет указано значение длины в численном выражении:

BLOCKQUOTE { letter-spacing: 0 } BLOCKQUOTE { letter-spacing: 0cm }

Если образующийся межбуквенный интервал не идентичен интервалу по умолчанию, UA не будет использовать лигатуры.

Ядро CSS1: UA может интерпретировать любое значение трекинга как 'normal'. (См. секцию 7.)

Установка оформления текста ('text-decoration')

Значение: none | [ underline overline line-through blink ] По умолчанию: none Область применения: все элементы Наследование: нет с условием см ниже Процентное выражение: неопр.

Это свойство описывает способ оформления текста в элементе. Если в элементе нет текста (напр., элемент 'IMG' в HTML), либо в случае пустого элемента (напр. '<EM></EM>'), это свойство не имеет силы. Значение 'blink' делает текст мерцающим.

Цвет(а), требуемые для оформления текста, должны быть производными от значения свойства "цвет".

Это свойство не наследуется, но элементы должны соответствовать родительским. Например, если в элементе подчеркивание, черта должна передаваться дочерним элементам. Цвет подчеркивания остается даже в случаях, когда дочерние элементы имеют другие значения цвета.

A:link, A:visited, A:active { text-decoration: underline }

В вышеуказанном примере будет подчеркиваться текст для всех видов ссылок (т.е. все элементы 'A' с атрибутом 'HREF').

UA должны распознавать зарезервированное слово 'blink', хотя не обязательно должны поддерживать мерцание текста.

Установка вертикального выравнивания текста ('vertical-align').

Свойство влияет на вертикальное положение элемента. Используется набор следующих зарезервированных слов, указывающих положение относительно родительского элемента:

'baseline'

совмещает базу элемента (или его низ, если элемент не имеет базы), с базой родительского элемента 'middle'

выравнивает среднюю линию элемента (обычно изображения) по уровню "база плюс половина высоты ('x-height') родительского элемента" 'sub'

делает элемент подстрочным 'super'

делает элемент надстрочным 'text-top'

выравнивает верх элемента по верху шрифта родительского элемента 'text-bottom'

выравнивает низ элемента по низу шрифта родительского элемента

Другой набор значений свойства определяет выравнивание относительно форматируемой линии, частью которой является указанный элемент:

'top'

выравнивает вершину элемента по самому высокому элементу линии 'bottom'

выравнивает низ элемента по самому низкому элементу линии.

При использовании значений 'top' и 'bottom' могут возникать неразрешимые ситуации, когда зависимости одних элементов от других образуют замкнутый цикл.

Процентное выражение соотносится со значением свойства "высота линии" ('line-height') самого элемента. Таким способом база элемента (или низ, если таковая отсутствует) повышается на определенный уровень относительно базы родительского элемента. Допускаются отрицательные значения. Например, при значении '-100%' элемент будет опущен так, что его база достигнет уровня, где должна лежать база следующей линии. Это позволяет позиционировать по вертикали элементы, не имеющие базы - скажем, изображения, используемые для замещения букв.

Предполагается, что в будущей версии CSS в качестве значения этого свойства будет допускаться <length>.

Установка преобразования текста ('text-transform')

Значение: capitalize | uppercase | lowercase | none По умолчанию: none Область применения: все элементы Наследование: есть Процентное выражение: неопр.

'capitalize'

устанавливает первую букву каждого слова прописной 'uppercase'

устанавливает все буквы элемента прописными 'lowercase'

устанавливает все буквы элемента строчными 'none'

аннулирует наследованное значение.

Фактически преобразование в каждом случае будет зависеть от используемого языка . См. способы определения языка элемента в [4] .

H1 { text-transform: uppercase }

В вышеприведенном примере для элемента 'H1' все буквы устанавливаются прописными.

Ядро CSS1: UA может игнорировать преобразование текста (т.е. отрабатывать как по значению 'none'), для символов, не относящихся к набору для кодировки Latin-1 и для элементов на языках, для которых преобразование отличается от принятого для таблиц преобразования Unicode [8].

Установка выравнивания текста ('text-align')

Значение: left | right | center | justify По умолчанию: определяется UA Область применения: блочные элементы Наследование: есть Процентное выражение: неопр.

Это свойство описывает способ выравнивания текста внутри элемента. Фактически используемый UA алгоритм будет зависеть от языка документа.

Пример:

DIV.center { text-align: center }

Поскольку выравнивание текста наследуется, все блочные элементы внутри элемента 'DIV' с 'CLASS=center' будут выровнены по середине. Обратите внимание, что выравнивание производится относительно ширины элемента, а не холста. Если UA не поддерживает выравнивание по ширине ('justify'), он должен поддерживать замену - для западных языков это будет, как правило, выравнивание по левому краю.

Ядро CSS: UA вправе интерпретировать выравнивание по середине как выравнивание по левому или правому краю, в зависимости от установленного по умолчанию для элемента направления письма - соответственно слева направо или справа налево.

Установка абзацного отступа ('text-indent')

Значение: <length> | <percentage> По умолчанию: 0 Область применения: блочный элементы Наследование: есть Процентное выражение: относительно ширины родительского элемента.

Это свойство определяет величину отступа перед первой форматируемой линией абзаца. Значение для абзацного отступа может быть отрицательным, но в пределах, накладываемых особенностями обработки. Отступ не используется в середине элемента, если тот был разбит другим (напр. 'BR' для HTML).

Пример:

P { text-indent: 3em }

Установка высоты строки ('line-height').

Значение: normal | <number> | <length> | <percentage> По умолчанию: normal Область применения: все элементы Наследование: есть Процентное выражение: относительно размера шрифта самого элемента.

Данное свойство определяет расстояние между базами двух смежных строк.

Если численное значение явно определено, высота строки определяется как высота шрифта, умноженная на численное значение. Отличие от процентного выражения - в способе наследования: если определено численное значение, то наследуется сам коэффициент, а не результирующее значение, как в случае в процентным или иным способом выражения.

Отрицательные значения не допускаются.

В трех строках следующего примера получаются одинаковые результаты высоты строки:

DIV { line-height: 1.2; font-size: 10pt } /* number */ DIV { line-height: 1.2em; font-size: 10pt } /* length */ DIV { line-height: 120%; font-size: 10pt } /* percentage */

Значение 'normal' устанавливает "рациональное" соотношение высоты строки и высоты шрифта элемента. Предполагается, что UA в случае значения 'normal' устанавливает это соотношение в пределах 1,0....1,2.

См. раздел 4.7. , описание того, как свойство "высота строки" влияет на форматирование блочного элемента.

Установка верхней границы ('margin-top').

Значение: <length> | <percentage> | auto По умолчанию: 0 Область применения: все элементы Наследование: нет Процентное выражение: по отношению к ширине родительских элементов.

Это свойство определяет верхнюю границу элемента:

H1 { margin-top: 2em }

Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом обработки.

Установка правой границы ('margin-right').

Это свойство определяет правую границу элемента:

H1 { margin-right: 12.3% }

Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом обработки.

Установка нижней границы ('margin-bottom').

Значение: <length> | <percentage> | auto По умолчания: 0 Область применения: все элементы Наследование: нет Процентное выражение: по отношению к ширине родительских элементов

Это свойство определяет нижнюю границу элемента:

H1 { margin-bottom: 3px }

Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом обработки.

Установка левой границы ('margin-left')

Значение: <length> | <percentage> | auto По умолчанию: 0 Область применения: все элементы Наследование: нет Процентные значения: refer to родительский элемент's width

Это свойство устанавливает левую границу элемента:

H1 { margin-left: 2em }

Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом обработки.

Установка обобщающего свойства "граница" ('margin').

Значение: [ <length> | <percentage> | auto ]{1,4} По умолчанию: не определено для обобщающих свойств Область применения: все элементы Наследование: нет Процентное выражение: по отношению к ширине родительских элементов

Обобщающее свойство "граница" используется для одновременной установки свойств верхней, правой, нижней и левой границы в одном месте таблицы стилей.

При явном указании четырех значений длины они соответственно применяются к верхней, правой, нижней и левой стороне. Если явно указано одно значение, оно применяется ко всем сторонам, если два или три значения, то отсутствующие значения берутся по значению противоположной стороны.

BODY { margin: 2em } /* all margins set to 2em */ BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

Последняя строка вышеприведенного примера равноценна нижеследующему примеру:

BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side (right) */ }

Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом обработки.

Установка верхнего отступа ('padding-top').

Значение: <length> | <percentage> По умолчанию: 0 Область применения: все элементы Наследование: нет Процентное выражение: по отношению к ширине родительских элементов

Это свойство определяет величину верхнего отступа элемента.

BLOCKQUOTE { padding-top: 0.3em }

Отрицательные значения для отступа не допускаются.

Установка правого отступа ('padding-right').

Это свойство определяет величину правого отступа элемента.

BLOCKQUOTE { padding-right: 10px }

Отрицательные значения для отступа не допускаются.

Установка нижнего отступа ('padding-bottom').

Это свойство определяет величину нижнего отступа элемента.

BLOCKQUOTE { padding-bottom: 2em }

Отрицательные значения для отступа не допускаются.

Установка левого отступа ('padding-left').

Это свойство устанавливает величину левого отступа элемента..

BLOCKQUOTE { padding-left: 20% }

Отрицательные значения для отступа не допускаются.

Установка обобщающего свойства " отступ" ('padding').

Значение: [ <length> | <percentage> ]{1,4} По умолчанию: 0 Область применения: все элементы Наследование: нет Процентное выражение: по отношению к ширине родительских элементов

Свойство "отступ" является обобщающим для установки свойств верхнего, правого, нижнего и левого отступа в одном правиле таблицы стилей.

Если явно указаны четыре значения, они применяются соответственно к верхнему, правому, нижнему и левому отступу. Если явно указано только одно значение, оно применяется ко всем сторонам, если два или три, то отсутствующие значения принимаются по значениям противоположной стороны.

Поверхность отступа определяется с помощью свойства "фон" ('background'):

H1 { background: white; padding: 1em 2em; }

В вышеприведенном примере устанавливается горизонтальный отступ величиной '1em' (правый и левый) и вертикальный отступ величиной '2em' (верхний и нижний). Величина 'em' определяется относительно размера шрифта элемента: 1em соответствует размеру применяемого шрифта.

Отрицательные значения для отступа не допускаются.

Установка ширины верхней рамки ('border-top-width').

Значение: thin | medium | thick | <length> По умолчанию: 'medium' Область применения: all элементы Наследование: нет Процентное выражение: неопр.

Это свойство определяет ширину верхней рамки элемента. Ширина, определяемая зарезервированным словом, зависит от UA, но при этом выдерживается зависимость: 'thin' меньше, чем 'medium', а последнее меньше, чем 'thick'.

Ширина рамки, определенная с помощью зарезервированного слова, является для документа величиной постоянной:

H1 { border: solid thick red } P { border: solid thick blue }

В вышеуказанном примере у элементов 'H1' и 'P' будет та же самая рамка независимо от размера шрифта. Чтобы установить относительную ширину, можно использовать единицы 'em':

H1 { border: solid 0.5em }

Величина рамки не может быть отрицательной.

Установка ширины правой рамки('border-right-width').

Значение: thin | medium | thick | <length> По умолчанию: 'medium' Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Это свойство определяет ширину правой рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').

Установка ширины нижней рамки('border-bottom-width')

Это свойство определяет ширину нижней рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').

Установка ширины левой рамки 'border-left-width'

Это свойство определяет ширину левой рамки элемента. Остальное эквивалентно установке ширины верхней рамки ('border-top-width').

Установка обобщающего свойства "ширина рамки" ('border-width')

Это свойство является обобщающим для установки верхней, правой, нижней и левой ширины рамки в одном правиле таблицы стилей.

Может быть указано от одного до четырех значений, обрабатываемых следующим образом:

одно значение: используется для установки ширины всех четырех рамок два значения: ширина верхней и нижней рамок устанавливаются по первому значению, правое и левое - по второму три значения: ширина верхней рамки устанавливается по первому значению, правого и левого по второму, а нижнего по третьему четыре значения: соответственно ширина верхней, правой, нижней и левой рамок.

В нижеследующем примере комментарии указывают на получившуюся величину ширины верхней, правой и левой рамок:

H1 { border-width: thin } /* thin thin thin thin */ H1 { border-width: thin thick } /* thin thick thin thick */ H1 { border-width: thin thick medium } /* thin thick medium thin */ H1 { border-width: thin thick medium none } /* thin thick medium none */

Величина рамки не может быть отрицательной.

Установка цвета рамки ('border-color').

Значение: <color>{1,4} По умолчанию: значение свойства 'color' Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Свойство "цвет рамки" ('border-color') определяет цвет четырех сторон рамки. "Цвет рамки" может иметь от одного до четырех значений, которые устанавливают цвета сторон рамки аналогично вышеописанному для толщины рамки.

Если не задано ни одного значения цвета, по умолчанию присваивается значение свойства "цвет" самого элемента:

P { color: black; background: white; border: solid; }

В вышеуказанном примере рамка представляет собой сплошную черную линию.

Установка стиля рамки ('border-style')

Свойство "стиль рамки" устанавливает стиль четырех сторон рамки. Оно может иметь от одного до четырех значений для разных сторон, устанавливаемых аналогично вышеописанному для ширины рамки.

#xy34 { border-style: solid dotted }

В вышеприведенном примере горизонтальные стороны рамки будут сплошными, а вертикальные - пунктирными.

Так как значение стиля рамки по умолчанию - 'none', то в случае, если стиль рамки явно не задан, видимой рамки не будет.

Возможны следующие стили рамки:

none

рамка не изображается (независимо от значения ширины рамки) dotted

рамка - пунктирная линия поверх обоев элемента dashed

рамка - штриховая линия поверх обоев элемента solid

рамка - сплошная линия double

рамка - двойная линия поверх обоев элемента. Сумма толщин двух линий и промежутка между ними соответствует толщине рамки. groove

объемная канавка, цвета на основе значения свойства "цвет". ridge

объемный гребень, цвета на основе значения свойства "цвет". inset

объемная складка внутрь, цвета на основе значения свойства "цвет". outset

объемная складка наружу, цвета на основе значения свойства "цвет".

Ядро CSS: UA может обрабатывать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как сплошную линию ('solid').

Установка обобщающего свойства "верхняя рамка" ('border-top')

Значение: <border-top-width> <border-style> <color> По умолчанию: для обобщающего свойства не определено Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для верхней рамка элемента.

H1 { border-bottom: thick solid red }

В вышеуказанном примере установлены ширина, стиль и цвет для рамки элемента H1. Отсутствующим значениям присваиваются значения по умолчанию:

H1 { border-bottom: thick solid }

В вышеуказанном примере значение цвета опущено и цвет рамки будет установлен по значению свойства "цвет" самого элемента.

Обратите внимание, что в отличие от свойства "стиль рамки ", для обобщающего свойства "верхняя рамка" задается только одно значение стиля.

Установка обобщающего свойства "правая рамка" ('border-right')

Значение: <border-right-width> <border-style> <color> По умолчанию: для обобщающего свойства не определено Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для правой рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".

Установка обобщающего свойства "нижняя рамка" ('border-bottom')

Значение: <border-bottom-width> <border-style> <color> По умолчанию: для обобщающего свойства не определено Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для нижней рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".

Установка обобщающего свойства "левая рамка" 'border-left'

Значение: <border-left-width> <border-style> <color> По умолчанию: для обобщающего свойства не определено Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для левой рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".

Установка обобщающего свойства " рамка" 'border'

Значение: <border-width> <border-style> <color> По умолчанию: для обобщающего свойства не определено Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для всех четырех сторон рамки элемента. В нижеследующем примере первая строка равнозначна четырем последующим:

P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }

В отличие от обобщающих свойств "граница" и "заполнение", для обобщающего свойства "рамка" нельзя задать разные значения четырех сторон рамки. Чтобы так сделать, необходимо использовать одно или более из других вышеприведенных свойств рамки.

Поскольку свойства в известной мере функционально перекрываются, при их обработке важен также порядок, в соответствии с которым они были назначены. Рассмотрим следующий Пример:

BLOCKQUOTE { border-color: red; border-left: double color: black; }

В вышеприведенном примере цвет левого края рамки будет черным, в то время как для остальных - красным. Это является результатом установки ширины, стиля и цвета для свойства "левая рамка". Поскольку значение цвета не было явно задано для свойства "левая рамка", будет использовано значение, заданное для свойства "цвет". То, что свойство "цвет" определено позже свойства "левая рамка", не играет роли.

Обратите внимание, что если для свойства "ширина рамки" устанавливается до четырех значений, то для рассматриваемого - только одно.

Установка свойства "ширина" ('width')

Значение: <length> | <percentage> | auto По умолчанию: auto Область применения: блочные и замещаемые элементы Наследование: нет Процентное выражение: по отношению к ширине родительского элемента

Это свойство может быть использовано для текстовых элементов, но чаще - для замещаемых, таких как изображения. Если необходимо, ширина изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранена, если для свойства "высота" указано значение 'auto'.

Пример:

IMG.icon { width: 100px }

Если для свойств "ширина" и "высота" замещаемого элемента использовано значение 'auto', то обрабатываются значения, соответствующие собственным размерам элемента.

Отрицательные значения для свойства "ширина" не допускаются.

См. также модель форматирования глава 4, описание зависимости между настоящим свойством, границей и заполнением.

Установка свойства "высота" 'height'

Значение: <length> | auto По умолчанию: auto Область применения: блочные и замещаемые элементы Наследование: нет Процентное выражение: неопр.

Это свойство может быть использовано для текстовых элементов, но чаще - для замещаемых, таких как изображения. Если необходимо, высота изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранена, если для свойства "ширина" указано значение 'auto'.

Пример:

IMG.icon { height: 100px }

При использовании применительно к текстовым элементам, реализация заданной высоты может быть осуществлена, например, с помощью скроллинга.

Отрицательные значения свойства "высота" не допускаются.

Ядро CSS1: UA могут игнорировать свойство "высота" (т.е. присваивать ему значение 'auto'), если элемент не является замещаемым.

Установка свойства "плавающий" ('float')

Значение: left | right | none По умолчанию: none Область применения: все элементы Наследование: нет Процентное выражение: неопр.

При установке значения 'none', элемент отображается там, где он присутствует в тексте. При значении 'left' ('right'), элемент смещается влево (вправо), а перенос текста производится по правой (левой) стороне элемента. При значении 'left' ('right'), элемент будет отображаться как блочный (в том смысле, что свойство "выделение" - 'display' - игнорируется). См. полную спецификацию раздел 4.1.4.

IMG.icon { float: left; margin-left: 0; }

В вышеприведенном примере все элементы IMG, имеющие класс icon, будут установлены вдоль левой стороны родительского элемента.

Это свойство чаще всего используется для позиционирования обтекаемых текстом изображений, но также может применяться для текстовых элементов.

Установка свойства "чисто" ('clear')

Значение: none | left | right | both По умолчанию: none Область применения: все элементы Наследование: нет Процентное выражение: нет

Это свойство устанавливается, если элемент допускает размещение на своих сторонах плавающих элементов. Если точнее, то значение данного свойства указывает стороны, где плавающие элементы не ставятся. Если для свойства элемента "чисто" указать значение 'left', то для такого элемента все плавающие элементы на левой стороне будут опущены вниз. Если указано значение 'none', то плавающие элементы устанавливаются на всех сторонах. Пример:

H1 { clear: left }

Установка свойства "показ" ('display')

Значение: block | inline | list-item | none По умолчанию: block Область применения: все элементы Наследование: нет Процентное выражение: неопр.

Это свойство описывает, показывается ли элемент на холсте (печатная страница, экран и т.п.) и каким образом.

Элемент со значением 'block' свойства "показ" открывает новое поле. Поле устанавливается относительно смежных полей в соответствии с принципами форматирования CSS. Обычно такие элементы как 'H1' и 'P' относятся к типу "блочные". Значение 'list-item' будет здесь аналогично значению 'block', с той лишь разницей, что добавляется маркер элемента списка. Для HTML это значение обычно имеет элемент 'LI'.

Элемент со значением 'inline' свойства "показ" открывает новое строчное поле в той же самой строке, что и предыдущее содержание. Размеры поля согласуются с размером отформатированного содержания. Если содержание - текст, он может быть разделен на несколько строк, на каждой из которых будет поле. Свойства границы, бордюра и заполнения применяются к строчным ('inline') элементам, но их эффект не будет проявляться в местах переноса строк.

Значение 'none' отменяет показ элемента, включая дочерние элементы и окружающее поле.

P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none }

Последняя строка отключает показ картинок.

По умолчанию свойству "показ" ('display') присваивается значение 'block', но UA обычно присваивает всем элементам HTML значения по умолчанию в соответствии с предлагаемыми спецификацией HTML для соответствующих элементов [2].

Ядро CSS1: UA может игнорировать свойство "показ" и использовать собственные установки по умолчанию. (См. раздел 7).

Установка пробелов ('white-space')

Значение: normal | pre | nowrap По умолчанию: normal Область: блочный элементы Наследование: есть Процентное выражение: неопр.

Это свойство описывает, каким образом внутри элемента поддерживаются пробелы: при значении 'normal' пробелы сжимаются, значение 'pre' действует подобно элементу PRE для HTML, а при значении 'nowrap' перенос производится только с помощью элементов BR:

PRE { white-space: pre } P { white-space: normal }

По умолчанию свойству "пробелы" присваивается значение 'normal', однако UA обычно ставит значения по умолчанию для всех элементов HTML в соответствии с указанным для этих элементов в спецификации HTML [2].

Ядро CSS1: UA может игнорировать свойство "пробелы" в таблице стилей автора или читателя, и использовать взамен собственные значения по умолчанию. (См. раздел 7).

Установка типа маркера перечня ('list-style-type')

Это свойство служит для установки появления маркера перечня, если свойству "рисунок маркера перечня" ('list-style-image') присвоено значение 'none', либо, если изображение, указанное в URL, не может быть отображено.

OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL { list-style-type: lower-alpha } /* a b c d e etc. */ OL { list-style-type: lower-roman } /* i ii iii iv v etc. */