![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Свойства структурного форматирования в CSS
List-style-type – определяет внешний вид маркера и имеет следующие значения: – none – маркер списка не отображается; – disc – маркер в виде черного круга; – circle – в виде полой окружности; – square – в виде черного квадрата; – decimal – последовательность арабских чисел; – lower-roman – в виде римских цифр; – upper-roman– в виде последовательности римских цифр в заглавном регистре; – lower-alpha – в виде последовательности строчных букв; – upper-alpha – в виде последовательности заглавных букв.
LI {list-style-type: square; }
Данный стиль устанавливает маркер списка текста в виде черного квадрата. List-style-image: URL – позволяет назначить в качестве метки маркированного списка произвольное изображение из существующего графического файла.
Li {list-style-image: image/marker.gif; }
отображает содержимое графического файла вместо маркера списка. Значения отступов вокруг содержащего их элемента устанавливают следующие свойства стилей: margin-left – отступ слева, margin-right – отступсправа, margin-top – отступ сверху, margin-bottom – отступ снизу. Значение этих свойств определяется в пикселах, сантиметрах и миллиметрах. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц, любых других компонентов, для которых хотите указать описанные здесь значения.
P {margin-left: 20 px; } IMG {margin: 10mm 15mm 10mm 15mm; }
В данном примере задан отступ для абзаца слева – 20 пикселов, а отступы от графического изображения сверху, справа, снизу и справа заданы значениями в одном свойстве marginв той же последовательности, то есть сверху и снизу по 10 мм, а справа и слева – по 15 мм. Свойства padding-left, padding-right, padding-top, padding-bottom описывают значение отступов от видимых рамок объектов HTML, например таблиц. Величина отступов также определяется в пикселах, сантиметрах и миллиметрах.
TABLE { padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; }
Эти же отступы можно задать другим способом:
TABLE {padding: 15px 10px 15px 10px; }
Border-width – свойство, которое определяют ширину видимого обрамления объектов, например таблиц и их ячеек, по правилам, аналогичным записи свойств, указанных выше.
TD {Border-width: 2px; }
Width и height – свойства, которые определяют соответственно ширину и высоту объекта в пикселах, сантиметрах, миллиметрах или процентах от значения, принятого по умолчанию. Применяются они в основном для задания геометрических размеров изображений. Данные свойства можно использовать как вместе, так и по отдельности.
IMG {height: 80%; Width: 120 px; }
Float – указывает на расположение какого-либо объекта в окне браузера относительно других объектов, размещенных рядом. Принимаемые значения: left – расположение объекта слева, right – расположение объекта справа, none – расположение объектов по умолчанию.
TD {float: left; }
Clear – описывает расположение других объектов вокруг данного элемента web-страницы. Принимаемые значение: left – расположение слева, right – справа, both – расположение с двух сторон.
IMG {clear: both; }
Border-color – описывает цвет видимого обрамления объектов: рамок, изображений и бордюров таблиц. Например. TABLE {border-color: blue; } Background-color – задает цвет заднего фона, на котором расположен объект. Способы задания цвета были рассмотрены во второй главе.
TABLE { Background-color: green; }
Border-style – управляет отображением границы элемента. Значением этого свойства являются: dotted – граница из точек, solid – обычная сплошная граница, double – двойная линия, groove – утопленная линия границы, ridge – выпуклая граница, insert – объект, вдавленный в страницу, outset – выпуклый объект. Свойства границ могут применяться не только к блочным элементам, но и к строчным. При этом строчный элемент автоматически превращается в блок, отделенный от остального текста пустыми строками.
TD { Border-style: groove; }
Пример web-страницы с использованием структурного форматирования в CSS. Отображение данного примера представлено на рис. 5.5.
< HTML> < HEAD> < ТIТLЕ> Структурное форматирование текста в CSS < /TITLE> < STYLE TYPE=" text/css" > <! -- .text {font-family: Tahoma; color: #003366; line-height: 7mm; font-size: 12pt; margin: 10px 10px 10px 10px; padding-left: 15px; padding-right 15px; border-color: black; border-style: dotted; background-color: #c0c0c0; width: 500px; text-align: justify; } #kursiv {font-style: italic; } SPAN.font {font-size: 11px; } .color {background-color: #cecece; } IMG {float: left; width: 100px; height: 100px; margin-top: 15px; margin-right: 15px; } LI {list-style-type: circle; } --> < /STYLE> < /HEAD> < BODY BGCOLOR=" #ffffff" TEXT=" black" LINK=" #00ff00" ALINK=" #00ff00" VLINK=" blue" > < P CLASS=" text" > < IMG SRC=" picture.gif" > CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста: < /P> < UL> < LI> < FONT STYLE=" text-decoration: underline; " > подчеркивание < /FОNТ> < LI> < FONT ID=" kursiv" > кypcив< /FONT> < LI> < FONT STYLE=" font-weight: bold; " > жирное начертание< /FОNТ>, < LI> < FONT STYLE=" font-family: Times New Roman; " > выбор гарнитуры < /FONT> < LI> < SPAN CLASS=" font" > paзмep шpифтa < /SPAN> < /UL> < P CLASS=" text" > с помощью средств CSS возможно < FONT СLАSS=" соlоr" > изменять такие параметры < /FONT>, как < FONT STYLE=" letter-spacing: 3рх; " > мeжбyквeнный < /FONT> и межстрочный интервал, < FONT STYLE=" text-transform: uppercase; " > тип peгистpa< /FONT> (строчные и прописные буквы) и многое другое. < /P> < /BODY> < /HTML> Рис. 5.5. Отображение примера с применением структурного форматирования в CSS
Как видно из примера, некоторые структурные элементы позволяют применять свойства CSS, относящиеся к формированию текста: text-align, background-color и др. Таким образом, при формировании таблиц стилей допускается сочетание свойств CSS как для текстового, так и для структурного форматирования.
|