Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Свойства структурного форматирования в CSS




Свойство Назначение Формат записи и принимаемые значения
List-style-type Определяет вид маркера списка текста list-style-type: circle;
List-style-image Установка изображения вместо маркера list-style-image:image/marker.gif;
Margin-left (или Padding-left) Отступ слева margin-left: 10mm; (padding-lef: 10mm;)
Margin-right (или Padding-right) Отступ справа margin-right: 10mm; (padding-right: 10mm;)
Margin-top (или Padding-top) Отступ сверху margin-top: 15mm; (padding-top: 15mm;)
Margin-bottom (или Padding-bottom) Отступ снизу margin-bottom: 15mm; (padding bottom: 15mm;)
Margin (padding) Определение размера поля относительно верхнего, правого, нижнего и левого края структурного элемента margin: 1px 2px 3px 4px; (padding: 15px 10px 15px 10px;)
Border-width Ширина границы border-width: 20px;
Width Ширина объекта width: 500px;
Height Высота объекта height: 500px;
Float Расположение относительно других объектов float: right;
Clear Расположение других объектов вокруг данного clear: both;
Border-color Цвет обрамления border-color: red;
Background-color Цвет заднего фона background-color: #c0c0c0;
Border-style Вид границы элемента border-style: dotted;

 

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 как для текстового, так и для структурного форматирования.

 

 


mylektsii.ru - Мои Лекции - 2015-2019 год. (0.011 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал