CSS2Глава 2. Форматирование документа средствами CSS2.Содержание:
2.1. Блочная модель визуального представления документа.Одной из основных технологий, составляющих суть языка CSS2, является блочная модель отображения документов. Согласно этой модели, HTML-элементы уровня блока, состоящие в иерархическом дереве документа, отображаются в виде прямоугольных блоков, к которым могут быть применены стилевые установки. Сам блок представляет собой несколько вложенных друг в друга прямоугольных областей. В самой внутренней области и помещается информативное содержание HTML-элемента (рис. 2.1).
Под HTML-элементы, являющиеся строковыми, стилевые блоки не выделяются. Например, согласно блочной
модели документа, визуальное представление абзаца (элемента
При этом текст абзаца (как это можно видеть на рисунке), представляющий собой информативную область блока, имеет вокруг себя три прямоугольных области: отступ, границу и поле. Каждая из них может быть разбита на четыре сегмента: левый, правый, верхний и нижний. В дальнейшем левый сегмент области отступа будем называть левым отступом, правый сегмент области границы — правой границей и т.д. Возможности языка CSS2 позволяют для каждой области устанавливать свои визуальные параметры (цвет, фон, размер и т.д.). Стилевое оформление фона различных областей определяется следующим образом:
Как уже говорилось ранее, универсальным элементом уровня блока является элемент
В рамках блочной модели представления документов использование этих элементов принимает особое
значение. Например, благодаря элементу Размеры прямоугольной области экрана, занимаемой стилевым блоком HTML-элемента, выделяются как сумма значений следующих свойств:
Надо отметить, что если два блока прилегают друг к другу, то размеры верхнего и нижнего полей указывают
минимальное расстояние между границами соседних блоков. Поэтому если для двух прилегающих блоков задано
ненулевое значение вертикальных полей, то они сливаются в одно с размером, равным наибольшей среди двух
блоков высоте поля. Хороший пример такого слияния можно наблюдать при отображении элементов списка
Вертикальные поля "плавающих" элементов (для которых задано свойство Далее по тексту будет произведено подробное описание свойств различных областей стилевого блока. 2.2. Свойства полей.Свойства полей задают геометрические размеры области поля стилевого блока. Возможности CSS2 позволяют задать размер каждого поля отдельно или для всех сразу. Следующие свойства задают размеры одного отдельного поля:
Размеры указываются в стандартных значениях длины, определенных для языка CSS2, или в процентах ширины ближайшего блокового элемента-родителя. Пример: <html> <head> <title>Пример внедренной таблицы стиля </title> <style type ="text/css"> p { margin-left: 10 px; margin-right: 10 px; margin-top: 12 px } </style> </head> <body> .....текст документа..... <p> .....текст абзаца..... .....текст абзаца..... </p> .....текст документа </body> </html> Как видно из примера, необязательно указывать размеры всех четырех полей стилевого блока. При этом для всех неопределенных полей будет использоваться значение, используемое по умолчанию, т.е. нулевой размер поля. Для задания размеров сразу всех полей может быть использована сокращенная (стенографическая) форма их указания в виде свойства margin. При этом через пробел указываются размеры всех четырех полей. Например, p { margin: 12рх 10рх 0рх 16рх } Обратите внимание на порядок, в котором задаются и интерпретируются браузером размеры полей: сначала указывается размер верхнего поля, затем размер правого поля, затем размер нижнего поля и, наконец, размер левого поля. 2.3. Свойства отступов.Геометрические размеры отступов, так же как и в случае с полями, можно задать либо каждый отдельным правилом, либо все сразу. Ниже перечисленны свойства, задающие размеры каждого поля в идивидуальном порядке:
Размеры также указываются в стандартных для CSS2 значениях длины или в процентном задании от ширины
ближайшего родительского элемента. Сокращенная форма задания размеров всех четырех отступов
осуществляется с помощью правила pre { background: lightgrey; color: blue; padding: 10рх 15px 10px 15px } Размеры отступов задаются и интерпретируются браузером в следующем порядке: сначала указывается размер верхнего отступа, затем размер правого отступа, затем размер нижнего отступа и, наконец, размер левого отступа. 2.4. Свойства границ.Границы представляют собой обыкновенные линии, ограничивающие видимую часть стилевого блока (поля являются прозрачными и поэтому невидимы). Определенные в CSS2 свойства позволяют задавать толщину, цвет и тип этих линий. 2.4.1. Ширина границ.Ширина границ задается либо для каждой из них индивидуально, либо для всех четырех сразу. Ширина отдельных границ задается следующими свойствами:
Ширина всех четырех границ может быть указана с помощью одного свойства
Следует отметить, что не существует общепринятого для всех браузеров числового эквивалента ключевым словам. Поэтому в разных браузерах ширина границы, заданная одним и тем же ключевым словом, может быть разной.
Единственное, что можно сказать со всей уверенностью, так это то, что ширина границы
Пример задания границ: div { padding: 10 10 10 10; border-top-width: 5px; border-bottom-width: 5px; border-right-width: thin; border-left-width: thin }
Или тоже самое, но с использованием стенографического свойства div { padding: 10рх 10рх 10px 10px; border-width: 5px thin 5px thin }
Порядок задания ширин границ для свойства <html> <head> <title> Демонстрация рамок, толщина которых задала ключевыми словами thin, medium и thick. </title> <style type="text/css"> div { margin: 20; padding: 20; text-align: center; border-width: thin; border-style: solid; border-color: black } div.2 { border-width: medium } div.3 { border-width: thick } </style> </head> <body bgcolor="white"> <h3 align="center"> Демонстрация рамок, толщина которых задана ключевыми словами </h3> <div> Границы этого блока имеют толщину thin </div> <div class="2"> Границы этого блока имеют толщину medium </div> <div class="3"> Границы этого блока имеют толщину thick </div> </body> </html>
2.4.2. Цвет границ.Цвет границ определяется следующими свойствами:
Цвет для всех четырех границ сразу можно указать с помощью свойства p { padding: 10px 10px 10px 10px; border-width: 5px thin 5px thin; border-color: blue red blue red } 2.4.3. Тип линии границ.Для границ должен быть также задан тип линии, которой она отображается. Ниже приведены допустимые в CSS2 названия типов и описан соответствующий им видимый результат:
Тип границы блока может быть задан с помощью определения следующих свойств:
Или с помощью одного стенографического свойства border-style могут быть указаны типы всех четырех границ сразу. Пример задания: pre { border-style: double } div { border-top-style: single; border-bottom-style: single; border-left-style: none; border-right-style: none }
Порядок задания типов линий границ для свойства <html> <head> <title>Примеры рамок разного стиля</title> <style type="text/css"> div { margin: 10; padding: 5; text-align: center; border-style: solid; border-color: red; border-width: medium } </style> </head> <body bgcolor=white> <h3 align="center">Демонстрация рамок разного стиля</h3> <div> Границы этого блока имеют стиль solid </div> <div style="border-width: 10; border-style: double"> Границы этого блока имеют стиль double </div> <div style="border-width: 15; border-style: groove"> Границы этого блока имеют стиль groove </div> <div style="border-width: 15; border-style: ridge"> Границы этого блока имеют стиль ridge </div> <div style="border-width: 15; border-style: inset"> Границы этого блока имеют стиль inset </div> <div style="border-width: 15; border-style: outset"> Границы этого блока имеют стиль outset </div> </body> </html>
Возможности языка CSS позволяют, кроме всего прочего, использовать другие формы описания внешнего вида границ. В общем случае для каждой границы указывается три визуальных параметра: толщина, тип линии и цвет. Поэтому в язык CSS включены свойства, определяющие их вместе для каждой из границ:
Пример использования: h3 { border-bottom: 10px solid blue }
Благодаря этому правилу все заголовки третьего уровня будут подчеркнуты синей одинарной линией.
Следует помнить о том, что если для свойства, например, Например: pre { border-color: green; border-top: double; border-bottom: double }
В этом случае для элемента pre { border-top: double; border-bottom: double; border-color: green } В этом случае верхняя и нижняя границы будут отображены зеленой двойной линией. Правая и левая границы не будут показаны вовсе.
Самым обобщенным свойством границ является CSS-свойство
Любопытно обстоит дело с заданием полей, границ и отступов для элемента <html> <head> <title> Пример задания свойств полей, границ и отступов для элемента body </title> <style type="text/css"> body { margin: 40px; padding: 40px; border: 40px solid blue; text-align: justify; background-color: yellow } h3 { border: 2px solid red } p { border: 2px solid red } </style> </head> <body> <h3 align=center>Голубой воришка.</h3> <p> Завхоз 2-го дома Старсобеса был застенчивый ворюга. Все существо его протестовало против краж, но не красть он не мог. Он крал, и ему было стыдно. Крал он постоянно, постоянно стыдился, и поэтому его хорошо бритые щечки всегда горели румянцем смущения, стыдливости, застенчивости и конфуза. Завхоза звали Александром Яковлевичем, а жену его — Александрой Яковлевной. Он называл ее Сашхен, она звала его Альхен. Свет не видывал еще такого голубого воришки, как Александр Яковлевич. </p> </body> </html>
Аналогично обстоит дело с браузером Opera (рис. 2.7):
Самое интересное начинается при открытии этого документа в браузере Internet Explorer.
При этом для элемента
2.5. Задание цвета текста и фона.Как уже упоминалось, каскадные таблицы стилей были задуманы для наиболее эффективного задания внешнего вида содержимого HTML-элементов, который они принимают в окне браузера. А что же, как не цветовое оформление является основной визуальной характеристикой. Для каждого отображаемого HTML-элемента может быть указано два цвета: цвет фона и цвет переднего плана. На переднем плане отображается информативное содержимое элемента, проще говоря — текст. В CSS2 цвет текста задается единственным, предназначенным для этих целей свойством color. Цвет указывается одним из стандартных, определенных в CSS2 способов: ключевым словом или RGB-функцией, например: p { color: olive } b { color: rgb (255,0,0) } Для описания фонового оформления элемента в CSS2 определено несколько возможностей. При этом фон можно задать с помощью следующих свойств:
2.5.1. Свойство background-color.
Использование этого свойства аналогично использованию свойства <html> <head> <title> Пример использования свойства background-color </title> <style type="text/css"> body { background-color: yellow } p { margin: 30; padding: 30; text-align: justify; background-color: lightblue } </style> </head> <body> <h3 align=center>Голубой воришка.</h3> <p> Завхоз 2-го дома Старсобеса был застенчивый ворюга. Все существо его протестовало против краж, но не красть он не мог. Он крал, и ему было стыдно. Крал он постоянно, постоянно стыдился, и поэтому его хорошо бритые щечки всегда горели румянцем смущения, стыдливости, застенчивости и конфуза. Завхоза звали Александром Яковлевичем, а жену его — Александрой Яковлевной. Он называл ее Сашхен, она звала его Альхен. Свет не видывал еще такого голубого воришки, как Александр Яковлевич. </p> <p> Он был не только завхозом, но и вообще заведующим. Прежнего за грубое обращение с воспитанницами сняли с работы и назначили капельмейстером симфонического оркестра. Альхен ничем не напоминал своего невоспитанного начальника. </p> </body> </html>
2.5.2. Свойство background-image.В качестве значения этого свойства указывается URL-адрес изображения, которое будет использоваться в качестве фонового, например, body { background-image: URL(/myimages/bgimage.jpg) } p { color: green; background-image: URL(/myimages/flowers.jpg) } Для каждого блокообразующего HTML-элемента изображение будет занимать всю информативную область блока вместе с его отступами. Если отводимое под изображение пространство стилевого блока по своим размерам меньше самого изображения, то, значит, последнее будет отображено частично. Геометрические размеры фоновой картинки никак не влияют на размеры стилевого блока. Примечательно, что фоновое изображение может быть задано и для строкового HTML-элемента. В этом случае отображается только та часть картинки, которая необходима для вывода текста. Ее левый верхний угол соответствует первой букве текста строкового элемента, например (рис. 2.10): <html> <head> <title> Пример использования свойства background-image для строковых элементов </title> <style type="text/css"> span { background-image: URL(bgimg.jpg); font-weight: bold } </style> <body bgcolor=white> <h3 align=center>3a6aвные политики</h3> <span> Что можно сказать о политике и политиках более обидного, чем то, что говорят они сами? Джон Гэлбрейт считал, что политика — выбор между гибельным и неприятным, Джон Морли, английский политик и публицист, называл политику неустанным выбором из двух зол, а актер Питер Устинов говорил, что политика есть искусство удерживать людей от участия в делах, которые их прямо касаются. Не зря, очевидно, Шарль де Голль говорил, что политика очень серьезное дело, и поэтому доверять ее политикам нельзя. Ему, французу, виднее — когда его соотечественнику Талейрану кто-то посмел заикнуться, что члены палаты депутатов, конечно, не ахти какие светочи разума, но хоть совесть имеют, тот немедленно подтвердил: "Да, имеют - и не одну". Кстати, о том, кто кого имеет, наиболее четко высказался американский режиссер Мел Брукс, предположив, что президенты делают со своими странами то, что не могут делать со своими женами. </span> </body> </html>
2.5.3. Свойство background-repeat.
Это свойство используется, если для элемента задано фоновое изображение. Оно определяет, будет ли
это фоновое изображение дублироваться, и если будет, то каким образом. По умолчанию фоновая картинка
будет в виде мозаики заполнять все пространство стилевого блока, отведенное под его информативную
область и отступы. Свойство
Пример использования (рис. 2.11): <html> <head> <title> Примеры различного задания свойства background-repeat </title> <style type="text/css"> p {background-image:URL(bgimg.jpg); margin: 10; padding: 30; border: thin solid gray; text-align: center} </style> </head> <body bgcolor="white"> <h3 align="center"> Примеры различного задания свойства background-repeat </h3> <p style="background-repeat:no-repeat"> Для этого блока <b>background-repeat:no-repeat<b> </p> <p> Свойство background-repeat для этого блока используется в значении, установленном по умолчанию. То есть <b>background-repeat:repeat</b> </p> <p style="background-repeat:repeat-x"> Для этого блока <b>background-repeat:repeat-x</b> </p> <p style="background-repeat:repeat-y"> Для этого блока <b>background-repeat:repeat-y</b> </p> </body> </html>
Выложить фоновым изображением крест, дважды использовав свойство 2.5.4. Свойство background-attachment.
Свойство
Пример задания: body { background-image: url(bg.gif); background-repeat: no-repeat; background-position: center; background-attachment: fixed } В этом примере изображение bg.gif, используемое в качестве фона, будет отображено в единственном экземпляре (никакого дублирования), расположено по центру и зафиксировано. 2.5.5. Свойство background-position.Это свойство своим значением определяет начальное месторасположение фонового изображения в рамках стилевого блока. Другими словами, оно показывает, где будет отображен первый экземпляр фонового изображения. Именно от него и будет производиться дублирование картинки в разные стороны.
Через свойство
Здесь перечислены все возможные варианты использования ключевых слов. Для всех способов задания сначала указывается месторасположение по горизонтали, второе значение характеризует положение по вертикали.
В том случае, если для свойства p { background-image: url(myimage.gif); background-position: 10% 1cm; color: yellow } Что касается ключевых слов, то они не могут использоваться совместно с процентным значением или значением в единицах длины.
Как и для границ, отступов и полей, для фона в CSS2 предусмотрено стенографическое (сокращенное)
свойство pre { color: blue; background: url(/image/bg.gif) 0%0% repeat scroll }
В том случае, если какой-то из параметров не указан, он будет применен в значении, используемом
браузером по умолчанию. Все свойства, начинающиеся со слова 2.6. Разметка текста.
Итак, со стилевыми блоками и их цветовыми и фоновыми характеристиками разобрались.
Теперь остается описать разметку текста, располагающегося в информативной области
блоков. С помощью средств языка CSS2 можно задать отступы и высоту строк в текстовых
фрагментах, расстояния между словами и буквами. Возможности CSS2 также позволяют
трансформировать текст, написанный строчными буквами в прописной текст, и наоборот.
С помощью свойства 2.6.1. Отступы. Свойство text-indent.
С помощью свойства Пример использования (рис. 2.13): <html> <head> <title> Демонстрация применения свойства text-indent. </title> <style type="text/css"> p { margin: 25px; margin-top: 5px; padding: 15px; background: lightgrey; border: 1px solid black } </style> </head> <body> <h3 align="center"> Демонстрация применения свойства text-indent </h3> <strong>Обычный абзац. По умолчанию text-indent: 0</strong> <p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <strong>Абзац, для которого указано text-indent: 20</strong> <p style="text-indent: 20"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <strong>Абзац, для которого указано text-indent: 50</strong> <p style="text-indent: 50"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> </body> </html>
2.6.2. Выравнивание по горизонтали. Свойство text-align.
Свойством
Пример задания: p { color: yellow; text-indent: 4 em; text-align: justify } 2.6.3. Выравнивание по вертикали. Свойство vertical-align.
Свойство
В качестве значения можно также использовать проценты, пикселы или другие доступные единицы. Положительный аргумент смещает элемент вверх относительно базовой линии, в то время как отрицательное значение опускает его вниз. Не все браузеры поддерживают такой способ записи, в частности, Internet Explorer только с шестой версии. 2.6.4. Оформление текста. Свойство text-decoration.
С помощью свойства
Пример использования (рис. 2.14) <html> <head> <title> Демонстрация применения свойства text-decoration </title> <style> body { text-align: center; background: white } </style> <body> <h3>Демонстрация применения свойства text-decoration</h3> <hr size="20" color="lightgrey"> Обычная строка текста <p style="text-decoration: underline"> Подчеркнутая строка текста </p> <p style="text-decoration: overline"> Надчеркнутая строка текста </p> <p style= "text-decoration: line-through"> Перечеркнутая строка текста </p> <hr size="20" color="lightgrey"> </body> </html>
2.6.5. Внутритекстовые интервалы.
Важными визуальными характеристиками текста являются его межбуквенные интервалы и
интервалы между словами. Управление размером межбуквенных интервалов осуществляется
с помощью CSS-свойства h3 { color: blue; letter-spacing: 13px }.
Свойство
CSS-свойство
Размер междустрочных интервалов задается с помощью свойства
2.6.6. Работа с регистром. Свойство text-transform.
С помощью свойства
Пример использования: h1 { color: green; letter-spacing: 5px; text-transform: uppercase } 2.7. Задание шрифта средствами CSS2.От выбора подходящего шрифта может во многом зависеть привлекательность документа. Каждый из них имеет свой индивидуальный внешний вид. В этом разделе будет произведено описание работы со шрифтами. Подключение определенного шрифта и задание его характеристик (прямой, курсив, жирный и т.п.) является одними из наиболее часто производимых разработчиком операций. Язык каскадных таблиц стилей CSS2 предлагает для этих целей свои возможности. 2.7.1. Подключение шрифтов. Свойство font-family.
С помощью свойства p { font-family: "Arial" } В результате такого задания текст абзацев будет отображаться шрифтом Arial.
Возможности свойства body { font-family: "Heretet", "Times New Roman", "Arial" }означает, что сначала браузер будет пробовать использовать шрифт Heretet .
Если такой шрифт отсутствует в его распоряжении (его просто нет на компьютере пользователя),
то будет произведена попытка использования шрифта Times New Roman и т.д.
К тому же, для свойства Ниже приведены пять типовых семейств шрифтов, включающие в себя все наиболее распространенные шрифты, установленные практически на всех компьютерах:
Полный список шрифтов с указанием их принадлежности к различным группам приведен ниже. Пример использования: body { font-family : "Times New Roman", "Times", serif } 2.7.2. Указание стиля шрифта. Свойство font-style.
С помощью свойства
2.7.3. Размер шрифта. Свойство font-size.
Значение свойства Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-largeкоторые являются индексами в таблице размеров шрифтов, поддерживаемыой браузером.
Последовательность задана по возрастанию. Это значит, что шрифт размером small
меньше шрифта размером medium. Коэффициент умножения между соседними ключевыми
словами равен 1.2: если шрифт Замечание:
Браузер MS Internet Explorer в качестве значения по умолчанию использует значение
Абсолютное значение можно задать и в виде абсолютного значения длины, например
Ключевые слова для задания относительного размера шрифта интерпретируются
относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными
значениями могут быть Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины. Например, правила strong { font-size : 150% }и strong { font-size : 1.5 em }являются абсолютно эквивалентными. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||