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'.
Есть два случая, когда плавающие элементы могут перекрывать области границы, рамки и отступа других элементов:
- когда плавающий элемент имеет отрицательную величину границы: отрицательные границы плавающих элементов имеют приоритет над иными блочными элементами; когда плавающий элемент выше или шире чем элемент внутри.
4.2 Строчные элементы
Элементы, не форматируемые как блочные, относятся к строчным. Строчный элемент может делить пространство строки с другими элементами. Рассмотрим следующий пример:
<P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG>.</P>
Элемент 'P' - нормальный блочный, в то время как 'EM' и 'STRONG' - строчные. Если ширина элемента 'P' достаточна, чтобы расположить весь элемент на одной строке, то тогда в строке будут два строчных элемента:
Несколько подчеркнутых слов имеется.
Если же в строке места не хватает, строчные элементы будут разбиты на несколько полей:
<P>Несколько <EM>подчеркнутых слов</EM> имеют место.</P>
Форматирование этого примера будет выглядеть как:
Несколько подчеркнутых
слов имеют место.
Если строчный элемент имеет границы, бордюры, заполнение или приложенное текстовое оформление, то их эффект не будет проявляться в месте расчленения элемента:
--
Несколько |подчеркнутых
--
-----
слов | имеют место.
-----
( Вышеприведенный рисунок несколько искажается из-за использования псевдографики ASCII. См. описание вычисления высоты линий в разделе 4.4.)
4.3 Замещаемые элементы
Замещаемые элементы - это элементы, замещаемые содержанием, указываемым в элементе. Например элемент 'IMG' замещается изображением, указанным в атрибуте 'SRC'. Важным свойством замещаемых элементов является наличие своих внутренних размеров. Если значения свойства "ширина"('width') равна 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение иное, чем 'auto' из перечисленных в таблице стилей, то это значение и используется, а замещаемый элемент соответственно меняет размеры (метод изменения размеров будет определяться видом информационного объекта). Таким же образом используется свойство "высота" ('height').
Замещаемые элементы могут быть как блочными, так и строчными.
4.4 Высота строки
Все элементы имеют свойство "высота строки" ('line-height'), что, в принципе, определяет общую высоту строки или текста. Высота строки увеличивается на промежуток, вставляемый выше и ниже текста в строке. К примеру, если текст 12 пунктов,
высота и "высота строки" устанавливаются равными '14pt', т. к. вставляется промежуток в 2 пункта, 1 сверху и 1 снизу строки. Пустые элементы влияют на эти расчеты точно так же, как и имеющие содержание.
Разница между размером шрифта (font size) и "высотой строки" называется интервалом (leading). Половина интервала называется полуинтервалом (half-leading). После форматирования каждая строка образует прямоугольное строчное поле.
Если строка текста содержит секции с разными значениями свойства "высота строки" (т. к. может быть несколько строчных элементов в одной строке), то каждая из таких секций имеет собственный полуинтервал сверху и снизу. Высота строчного поля отсчитывается от высоты самой высокой секции до низа самой низкой. Обратите внимание, что верх и низ не обязательно соответствуют наиболее высокому элементу, поскольку элементы могут быть позиционированы с помощью свойства "вертикальное выравнивание" ('vertical-align'). При формировании параграфа каждое строчное поле располагается ниже предшествующей строки.
Обратите внимание на то, что какой-либо отступ, рамка или граница сверху или снизу не замещаемого строчного элемента не влияют на высоту строки. Иными словами, если значение свойства "высота строки" слишком мало для выбранных отступа или рамки, они будут перекрываться с текстом других строк.
Замещаемые элементы, (напр. изображения) в строке могут увеличить строковое поле, если вершина замещаемого элемента (включая полностью его отступ, рамку и границу) находится выше самой высокой секции текста, или его низ находится ниже самой низкой секции.
В нормальных условиях, если в параграфе указано только одно значение свойства "высота строки", и при отсутствии высоких изображений, по предшествующему определению будет проверено, имеют ли базы последующих строк обособленное значение параметра "высота строки". Это важно в случае выравнивания текстовых колонок с различным шрифтом, например, в таблице.
Следует иметь в виду, что это не позволяет исключить возможность перекрытия текста двух смежных строк. Значение свойства "высота строки" может оказаться меньше высоты текста, и интервал в этом случае будет отрицательным. Это обстоятельство может оказаться полезным, если заранее известно, что в тексте не будет подстрочных символов (напр. если там будут только символы верхнего регистра), и тогда строки можно сблизить.
4.5 Холст
Холст представляет собой часть изображаемой на экране поверхности UA, где воспроизводятся документы. Ни один из структурных элементов документа не сопоставляется с холстом, в связи с чем при форматировании документа возникают два вопроса:
- откуда должны определяться размеры холста? если документ не покрывает весь холст, как должна воспроизводиться эта область?
Логично было бы ответить на первый вопрос: "Изначальные размеры холста основаны на размерах окна", но CSS1 оставляет эту задачу на усмотрение UA. Также было бы логично, чтобы UA менял размеры холста соответственно размерам окна, но это также выходит за рамки полномочий CSS1.
Расширение языка HTML создало прецедент по второму вопросу: атрибуты элемента 'BODY' определяют фон для всего холста. Чтобы не разочаровать дизайнеров, CSS1 использует особое правило для определения фона холста:
Если значения свойств фона для элемента 'HTML' отличаются от 'transparent', то они и используются, в ином случае используются значения свойств фона, указанные для элемента 'BODY'. Если в результате все равно значение параметров фона равно 'transparent', то свойства фона считаются незаданными.
По этому правилу допускается:
<HTML STYLE="background: url(http:///marble. png)">
<BODY STYLE="background: red">
В вышеуказанном примере, холст покрывается картинкой marble. png. Фон элемента 'BODY' (он может и не полностью покрывать холст) будет красным.
Пока другие способы адресации графики на холсте не станут доступными, рекомендуется, чтобы свойства холста задавались в элементе 'BODY'.
4.6 Элементы 'BR'
Текущие свойства и значения CSS1 не способны описать поведение элемента 'BR'. В языке HTML элемент 'BR' определяется как перевод строки между словами. Фактически, это принудительный перевод строки. Будущие версии CSS будут поддерживать ввод и замену содержания, но средства форматирования основанные на CSS1, должны использовать отдельные алгоритмы обработки объекта 'BR'
5 Свойства CSS1
Таблицы стилей влияют на внешний вид документа путем присвоения тех или иных значений свойствам стилей. В данном разделе перечисляются определения свойств стилей и приводится соответствующий перечень значений, допускаемых CSS1.
5.1 Разъяснение значений свойств.
В настоящем тексте допустимые значения для каждого свойства перечисляются с синтаксисом, подобным приведенному ниже:
Значение: N | NW | NE
Значение: [ <length> | thick | thin ]{1,4}
Значение: [<family-name> , ]* <family-name>
Значение: <url>? <color> [ / <color> ]?
Значение: <url> || <color>
Слова между "<" and ">" дают нам тип значения. Наиболее распространенными типами являются <length> (длина), <percentage> (доля, процент), <url>, <number> (число) и <color> (цвет); они описаны в разделе 6. Более специфические типы (такие, как <font-family> и <border-style>) описаны в разделах соответственно свойствам.*
Другой вид слов - ключевые, которые должны указываться литерально, без знаков препинания. Знаки "слеш" (/) и запятая (,) также должны указываться литерально.
Если что-то размещается рядом, то это значит, что действия должны производиться в указанном порядке. Вертикальная черта (A|B) означает исключающее ИЛИ (ИЛИ-НЕ); должно происходить одно из двух. Двойная черта (A||B) означает объединяющее ИЛИ (ИЛИ-И) - или и то и другое, или одно из двух. Квадратные скобки([]) - группировка. Расположение рядом важнее, чем ИЛИ-И, а последнее важнее, чем ИЛИ-НЕ. Так, "a b | c || d e " равноценно "[ a b ] | [ c || [ d e ]]".
Каждый знак, ключевое слово или группа в скобках могут следовать за одним из модификаторов:
- Звездочка (*) означает, что предшествующие знак, слово или группа повторяются ноль или более раз. Плюс (+) означает, что предшествующие знак, слово или группа повторяются один или более раз. Знак вопроса (?) означает, что предшествующие знак, слово или группа являются необязательными (optional). Два числа в фигурных скобках ({A, B}) означают, что предшествующие знак, слово или группа повторяются не менее чем А и не более чем В раз.
5.2 Свойства шрифта
Определение свойств шрифта относится к одному из наиболее распространенных способов применения таблицы стилей. К сожалению, пока нет четкого и универсального стандарта для типометрии шрифтов, и определения, применимые к шрифтам одного семейства, могут оказаться неподходящими для других. Так, для обозначения курсива обычно используется свойство 'italic', но могут встречаться и такие обозначения, как Oblique, Slanted, Incline, Cursive или Kursiv. Таким образом, преобразование характерных черт шрифта в типометрические свойства является непростой задачей.
CSS1 определяет следующие свойства шрифтов: "семейство" ('font-family'), "начертание" ('font-style'), "вариант" ('font-variant'), а также "вес" ('font-weight'), "размер" ('font-size'), "шрифт" 'font'.
5.2.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%.) Дальнейшая обработка, например, значений в единицах "м" других свойств, основано на том значении "размера", которое используется, а не на том, которое определено.
5.2.2 Задание семейства шрифта ('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 }
<BODY STYLE="font-family: 'My own font', fantasy">
Если кавычки отсутствуют, то символы пробела перед и после названия гарнитуры игнорируются и любая последовательность символов пробела внутри названия семейства преобразуется в слитное написание.
5.2.3 Задание начертания шрифта ('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, будет отрабатываться как нормальный.
5.2.4 Задание варианта шрифта ('font-variant').
Значение: normal | small-caps
По умолчанию: normal
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.
Другой тип варьирования внутри семейства шрифтов - это "малые прописные". В таких шрифтах строчные буквы выглядят подобно заглавным, только меньше размером и с несколько иными пропорциями. Такой шрифт определяется свойством "вариант" ('font-variant' ).
Значение 'normal' определяет шрифт без малых прописных букв, 'small-caps' - с малыми прописными. Для CSS1 желательно (но не обязательно), чтобы малые прописные создавались путем замены строчных букв уменьшенными символами прописных. В крайнем случае, для замены шрифта с малыми прописными используются прописные буквы.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 |
