 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Внешние таблицы стилей
Этот метод требует создания отдельного файла таблицы с основными стилями. Такой файл должен иметь расширение файл.css. Затем необходимо связать нужные документы с данной таблицей. Нужно поместить в связываемом документе где-нибудь между тэгами <HEAD> и </HEAD> следующую строку:
<LINK rel=stylesheet href="файл.css" type="text/css">
либо
<STYLE>
@import URL("файл.css");
</STYLE>
Все содержимое будет впредь форматироваться с помощью стилей заданных в таблице файл.css. Метод очень удобен для создания узлов страниц посвященных родственным темам или принадлежащих одному владельцу, в едином хорошо продуманном и легко узнаваемом стиле.
Относительные размеры
Относительные размеры элементов документа HTML задаются при помощи относительных единиц измерения, которые указывают значение длины относительно других элементов документа. Таблицы стилей, которые используют такой тип единиц, намного легче перенастраиваются с одного типа устройств на другой.
К относительным единицам измерения относятся:
em - размер, относительно размера буквы "m"
ex - размер, относительно вертикального размера букв, соответствующего шрифта
px - размер, использующий пиксели, относительно устройства вывода
% - размер, использующий процентные значения, относительно основного размера
Пример:
H1 { margin-left: 1.5em }
H3 { margin-left: 2ex }
span { font-size: 16px }
P { font-size: 150% }
Абсолютные размеры
Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся:
in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам.
cm - размер, в сантиметрах
mm - размер, в миллиметрах
pt - размер, в точках, 1 точка равна 1/72 дюйма.
pc - размер, в пиках, 1 пика равна 12 точкам.
Пример:
H1 { margin: 1.5in }
H2 { line-height: 5cm }
H3 { word-spacing: 3mm }
H4 { font-size: 16pt }
H4 { font-size: 2pc }
Если указанное значение длины не поддерживается, то браузеры автоматически замещают его поддерживаемым значением. Кроме рассмотренных абсолютных единиц измерения, существуют еще несколько, предназначенных для голосовых и прочих браузеров. К ним относятся: deg, rad, grad, ms, s, Hz, kHz.
Единицы определения цвета
ключевое слово - цвет задается, используя пользовательские настройки
литерал - цвет задается, используя стандартные названия
шестнадцатеричное - цвет задается, используя значения RGB
процентное - цвет задается, используя значения
десятичное - цвет задается, используя значения
Пример:
H1 { color: background }
H2 { color: red }
H3 { color: #ff0033mm }
H4 { color: rgb(100%, 0%, 0%)}
H4 { color: rgb(255, 0, 125)}
font-family
Атрибут определяет тип шрифта по следующим элементам:
Название шрифта.
Синтаксис: селектор {font-family: Times}
Дополнительные шрифты. На случай, если какой-нибудь из шрифтов не установлен.
Синтаксис: селектор {font-family: times,garamond,arial,hevletica}
Название семейства шрифтов.
Serif-с засечками, Sans Serif- без засечек, Cursive- курсивные, Fantasy- декоративные, Monospace- моноширинные.
Синтаксис: селектор {font-family: Serif}
font-size
Атрибут определяет размер шрифта при помощи одной из размерностей:
Пункты.
Синтаксис: селектор {font-size: 12pt}
Дюймы.
Синтаксис: селектор {font-size: 12in}
Сантиметры.
Синтаксис: селектор {font-size: 12cm}
Пиксели.
Синтаксис: селектор {font-size: 12px}
Проценты.
Синтаксис: селектор {font-size: 50%}
Абсолют.
Синтаксис: селектор {font-size: small}
Может принимать значения:
xx-small
x-small
small
medium
large
x-large
xx-large
font-style
Атрибут определяет стиль начертания шрифта.
Синтаксис: селектор {font-style: italic}
Может принимать значения:
italic
normal
oblique
font-variant
Атрибут определяет размер начертания шрифта.
Синтаксис: селектор {font-variant: normal}
Может принимать значения:
small-caps
normal
font-weight
Атрибут определяет насыщенность начертания шрифта.
Синтаксис: селектор {font-weight: насыщенность}
Может принимать значения:
normal.
Синтаксис: селектор {font-weight:normal}
bold.
Синтаксис: селектор {font-weight:bold}
число. Задается в пределах от 100 до 900.
Синтаксис: селектор {font-weight:700}
Очень светлый.
Синтаксис: селектор {font-weight:extra-light}
Средне-светлый.
Синтаксис: селектор {font-weight:demi-light}
Светлый.
Синтаксис: селектор {font-weight: light}
Средний.
Синтаксис: селектор {font-weight: medium}
Очень жирный.
Синтаксис: селектор {font-weight: extra-bold}
Средн-жирный.
Синтаксис: селектор {font-weight: demi-bold}
Жирный.
Синтаксис: селектор {font-weight: bold}
font-face
Атрибут определяет загружаемый шрифт c расширением.eot, используется для того, чтобы обеспечить правильное оформление документа, поскольку, если в системе пользователя нет нужного шрифта, броузер использует шрифт по-умолчанию, а это не всегда приемлемо.
@font-face { font-family: имя; src: URL(http://domen.ru/путь/file.eot)}
word-spacing
Атрибут определяет оформление интервала между слов.
Синтаксис: селектор {word-spacing: тип}
normal.
Синтаксис: селектор {word-spacing:normal }
em.
К обычному пробелу прибавляется ширина одной буквы m или нескольких
Синтаксис: селектор {word-spacing:3em }
letter-spacing
Атрибут определяет оформление интервала между символами.
Синтаксис: селектор {letter-spacing: значение} либо normal.
Синтаксис: селектор {letter-spacing:normal }
white-space
Атрибут определяет оформление пробелов в тексте.
Синтаксис: селектор {white-space: значение}
может принимать значения:
normal.
pre.
nowrap.
line-height
Атрибут определяет межстрочный интервал при помощи одной из пяти размерностей:
Пункты.
Синтаксис: селектор {line-height: 12pt}
Дюймы.
Синтаксис: селектор {line-height: 12in}
Сантиметры.
Синтаксис: селектор {line-height: 12cm}
Пиксели.
Синтаксис: селектор {line-height: 12px}
Проценты.
Синтаксис: селектор {line-height: 50%}
text-decoration
Атрибут определяет оформление начертания шрифта.
Синтаксис: селектор {text-decoration: тип}
Упрощённый.
Синтаксис: селектор {text-decoration: none }
Подчеркнутый.
Синтаксис: селектор {text-decoration: underline }
Надчеркнутый.
Синтаксис: селектор {text-decoration: overline }
Наклонный.
Синтаксис: селектор {text-decoration: italic }
Линия насквозь.
Синтаксис: селектор {text-decoration: line-through }
text-indent
Атрибут определяет отступ текста.
Синтаксис: селектор {text-indent: число}
Пункты.
Синтаксис: селектор {text-indent: 12pt}
Дюймы.
Синтаксис: селектор {text-indent: 12in}
Сантиметры.
Синтаксис: селектор {text-indent: 12cm}
Пиксели.
Синтаксис: селектор {text-indent: 12px}
Браузер Internet Explorer поддерживает отрицательные значения атрибутов полей и отступа. Эта функциональная особенность позволяет добиваться интересных и необычных эффектов, что положительно сказывается на читабельности страницы.
text-align
Атрибут позволяет изменить режим выравнивания текста.
Синтаксис: селектор {text-align: расположение}
По правому краю.
Синтаксис: селектор {text-align: right }
По левому краю.
Синтаксис: селектор {text-align: left }
По центру.
Синтаксис: селектор {text-align: center }
text-transform
Атрибут позволяет изменить регистр шрифта текста.
Синтаксис: селектор {text-transform: none}
так же может принимать значения:
capitalize.
uppercase.
lowercase.
Выравнивание больших фрагментов по левому краю является единственно разумным решением с точки зрения читабельности. Выравнивание по правому краю логичнее всего назначать небольшим фрагментам текста, например, выноскам. Хотя с помощью атрибута BODY определяются значения полей для всей страницы, атрибут поля можно включать в любой элемент HTML, например, в заголовки или абзацы.
background-color
Атрибут позволяет задать цвет фона абзаца, присвоив ему шестнадцатеричное значение, либо задать прозрачность transparent.
Синтаксис: селектор {background-color: #ffffff}
background-image
Атрибут позволяет задать фоновый рисунок страницы, указав его URL.
Синтаксис: селектор {background-image: URL("URL");}
background-position
Атрибут позволяет задать расположение фонового рисунка страницы, указав его отступы по осям x и y, кроме численных значений может задаваться как:
left
top
center
right
bottom
Синтаксис: селектор {background-position: left 45pt;}
background-attachment
Атрибут позволяет задать будет ли фоновый рисунок страницы фиксированным, указав scroll или fixed.
Синтаксис: селектор {background-attachment: scroll;}
background-repeat
Атрибут позволяет задать будет ли фоновый рисунок страницы заполнять фон черепицей и как, указав:
repeat - повторяется
no-repeat - не повторяется
repeat-x - повторяется по оси x
repeat-y - повторяется по оси y
Синтаксис: селектор {background-repeat: no-repeat;}
color
Атрибут позволяет задать цвет текста страницы, присвоив ему шестнадцатеричное значение.
Синтаксис: селектор {color: #000000}
margin-left
Атрибут определяет отступ от объекта слева.
Синтаксис: селектор {margin-left: auto}
Пункты.
Синтаксис: селектор {margin-left: 12pt}
Дюймы.
Синтаксис: селектор {margin-left: 12in}
Сантиметры.
Синтаксис: селектор {margin-left: 12cm}
Пиксели.
Синтаксис: селектор {margin-left: 12px}
margin-right
Атрибут определяет отступ от объекта справа.
Синтаксис: селектор {margin-right: auto}
Пункты.
Синтаксис: селектор {margin-right: 12pt}
Дюймы.
Синтаксис: селектор {margin-right: 12in}
Сантиметры.
Синтаксис: селектор {margin-right: 12cm}
Пиксели.
Синтаксис: селектор {margin-right: 12px}
margin-top
Атрибут определяет отступ от объекта сверху.
Синтаксис: селектор {margin-top: auto}
Пункты.
Синтаксис: селектор {margin-top: 12pt}
Дюймы.
Синтаксис: селектор {margin-top: 12in}
Сантиметры.
Синтаксис: селектор {margin-top: 12cm}
Пиксели.
Синтаксис: селектор {margin-top: 12px}
margin-bottom
Атрибут определяет отступ от объекта снизу.
Синтаксис: селектор {margin-bottom: auto}
Пункты.
Синтаксис: селектор {margin-bottom: 12pt}
Дюймы.
Синтаксис: селектор {margin-bottom: 12in}
Сантиметры.
Синтаксис: селектор {margin-bottom: 12cm}
Пиксели.
Синтаксис: селектор {margin-bottom: 12px}
padding-left
Атрибут определяет отступ от содержимого элемента до обрамления слева.
Синтаксис: селектор {padding-left: 0}
Пункты.
Синтаксис: селектор {padding-left: 12pt}
Дюймы.
Синтаксис: селектор {padding-left: 12in}
Сантиметры.
Синтаксис: селектор {padding-left: 12cm}
Пиксели.
Синтаксис: селектор {padding-left: 12px}
padding-right
Атрибут определяет отступ от содержимого элемента до обрамления справа.
Синтаксис: селектор {padding-right: 0}
Пункты.
Синтаксис: селектор {padding-right: 12pt}
Дюймы.
Синтаксис: селектор {padding-right: 12in}
Сантиметры.
Синтаксис: селектор {padding-right: 12cm}
Пиксели.
Синтаксис: селектор {padding-right: 12px}
padding-top
Атрибут определяет отступ от содержимого элемента до обрамления сверху.
Синтаксис: селектор {padding-top: 0}
Пункты.
Синтаксис: селектор {padding-top: 12pt}
Дюймы.
Синтаксис: селектор {padding-top: 12in}
Сантиметры.
Синтаксис: селектор {padding-top: 12cm}
Пиксели.
Синтаксис: селектор {padding-top: 12px}
padding-bottom
Атрибут определяет отступ от содержимого элемента до обрамления снизу.
Синтаксис: селектор {padding-bottom: 0}
Пункты.
Синтаксис: селектор {padding-bottom: 12pt}
Дюймы.
Синтаксис: селектор {padding-bottom: 12in}
Сантиметры.
Синтаксис: селектор {padding-bottom: 12cm}
Пиксели.
Синтаксис: селектор {padding-bottom: 12px}
border-style
Атрибут определяет оформление рамок вокруг объектов.
Синтаксис: селектор {border-style:тип}
dotted.
Синтаксис: селектор {border-style: dotted}
solid.
Синтаксис: селектор {border-style: solid}
double.
Синтаксис: селектор {border-style: double}
groove.
Синтаксис: селектор {border-style: groove}
insert.
Синтаксис: селектор {border-style: insert }
ridge.
Синтаксис: селектор {border-style: ridge}
outset.
Синтаксис: селектор {border-style: outset}
none.
Синтаксис: селектор {border-style: none }
border-color
Атрибут определяет оформление цвета рамок вокруг объектов.
Синтаксис: селектор {border-color: цвет}
border-width
Атрибут определяет оформление цвета рамок вокруг объектов.
Синтаксис: селектор {border-width: цвет}
border-позиция
Атрибут определяет оформление вида и цвета рамок вокруг объектов выборочно с любой из сторон
Синтаксис: селектор {border-top: вид цвет}
может принимать значения:
border-top
border-bottom
border-right
border-left
Тогда, приведенные выше свойства примут вид:
для border-color:
border-top-color
border-bottom-color
border-right-color
border-left-color
для border-style:
border-top-style
border-bottom-style
border-right-style
border-left-style
для border-width:
border-top-width
border-bottom-width
border-right-width
border-left-width
top
Атрибут позволяет задать y-координату элемента в окне браузера:
Синтаксис: селектор {top: значение}
задается:
n px
n %
auto
left
Атрибут позволяет задать x-координату элемента в окне браузера:
Синтаксис: селектор {left: значение}
задается:
n px
n %
auto
width
Атрибут позволяет задать ширину элемента в окне браузера:
Синтаксис: селектор {width: значение}
задается:
n px
n %
auto
height
Атрибут позволяет задать высоту элемента в окне браузера:
Синтаксис: селектор {height: значение}
задается:
n px
n %
auto
position
Атрибут позволяет задать позицию элемента в окне браузера:
Синтаксис: селектор {position: absolute}
absolute - когда значения left и top задаются относительно левого верхнего угла контейнера или страницы.
relative - когда значения left и top задаются относительно текста, за которым следует элемент.
static - когда значения left и top задаются относительностраницы статично.
z-index
Атрибут позволяет задать порядок перекрытия элементами друг друга при расположении их слоями, при этом элемент с более высоким индексом будет располагаться над элементом с низким индексом. В случае,если атрибут не задан специально,браузер присваивает более высокий индекс элементу, который в исходном коде описан позже:
Синтаксис: селектор {z-index: 2}
auto
порядковый номер
clear
Атрибут позволяет задать обтекание текстом объекта, например картинки, выровненной по левому или правому краю, присвоив ему одно из значений:
Синтаксис: селектор {clear: none}
left
right
both
overflow
Атрибут позволяет задать, как выглядит текст, переполнивший границы элемента, присвоив ему одно из значений:
Синтаксис: селектор {overflow: none}
none
clip
scroll
float
Атрибут аналогичен атрибуту align.
Синтаксис: селектор {float: left}
list-style-position
Атрибут позволяет задать то, как будет отображаться текст внутри списка, если текст элемента списка по объему больше одной строки.
Синтаксис: селектор {list-style-position: outside}
outside
inside
list-style-type
Атрибут определяет оформление маркеров в списках.
Синтаксис: селектор {list-style-type: тип}
disc.
Синтаксис: селектор {list-style-type: disc}
square.
Синтаксис: селектор {list-style-type: square}
circle.
Синтаксис: селектор {list-style-type: circle}
decimal.
Синтаксис: селектор {list-style-type: decimal}
lower-roman.
Синтаксис: селектор {list-style-type:lower-roman }
upper-roman.
Синтаксис: селектор {list-style-type: upper-roman}
lower-alpha.
Синтаксис: селектор {list-style-type: lower-alpha}
upper-alpha.
Синтаксис: селектор {list-style-type: upper-alpha}
none.
Синтаксис: селектор {list-style-type: none }
list-style-image
Атрибут определяет замену маркеров в списках на изображение.
Синтаксис: селектор {list-style-image: URL(file.gif) }
Пример:
<UL STYLE="list-style-image:URL(file.gif)">
<LI> текст
<LI>текст
<LI> текст
</UL>
:first-line
Псевдоэлементопределяет стиль для первой строки блока текста
:first-letter
Псевдоэлементопределяет стиль для первой буквы в строке.
Пример задания буквицы:
P:first-letter { font-size: 300%; font-style: italic; font-weight: bold; float: left }
:after
Псевдоэлементдля вставки генерируемого содержимогопосле содержимого элемента
:before
для вставки генерируемого содержимого досодержимого элемента
Например, следующее правило вставляет строку "Пояснение: " перед содержимым каждого элемента SPAN, значение атрибута class которого, равно note:
SPAN.note:before { content: "Пояснение: " }
Группирование стилей
Существуют дополнительные методы, которые расширяют функциональные возможности таблиц стилей. Стили можно сгруппировать, что позволяет уменьшить количество необходимых атрибутов и аргументов, путем создания логических групп. Группирование таблиц стилей может происходить по одинаковым тэгам, или по атрибутам одного семейства. Порядок атрибутов играет важную роль: насыщенность шрифта и стиль начертания должны находиться перед остальными атрибутами - кегль должен быть задан до межстрочного интервала, и только потом в строку можно добавить дополнительную информацию. В случае группирования атрибутов - между ними запятые не ставятся, исключение составляет атрибут семейства шрифта, перед ним ставится запятая.
Пример группирования по тэгам:
До группирования:
H1 {font-family: arial;font-size: 14pt}
H2 {font-family: arial;font-size: 14pt}
H3 {font-family: arial;font-size: 14pt}
После группирования:
H1,H2,H3 {font-family: arial;font-size: 14pt}
Пример группирования по атрибутам одного семейства:
До группирования:
BODY {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt}
После группирования
BODY {margin: 12pt 10pt 15pt}
Назначение классов
Для того, чтобы сделать работу более универсальной, можно создать несколько вариантов - классов свойств стилей и применять их к элементам поочередно. Сгруппировав стили по свойствам, необходимо дать им названия ввиде расширения к элементу.
Синтаксис:
H1.left {text-align: left}
H1.right {text-align: right}
Далее в документе указывается либо <H1 class=left>, либо <H1 class=right>
Аналогично можно создать универсальный класс и применять его потом к различным элементам:
Синтаксис:
.left {text-align: left}
.right {text-align: right}
Далее в документе указывается либо <тэг class=left>, либо <тэг class=right>
Назначение псевдоклассов
Псевдоклассы позволяют задавать стиль элемента по его характеристикам, которые не являются именем, атрибутом или содержимым. Элемент может приобрести псевдокласс или лишиться его во время работы пользователя с документом.
A:link - не просмотренные ссылки
A:visited - просмотренные ссылки
A:hover - выбранная, но не активизированная ссылка
A:active - активизированная ссылка
Фильтры предоставляют возможность для изменения внешнего вида текста и графики документа, а такжегруппэлементов, заключенных в тэги <DIV>и </DIV>. Фильтр задается точно так, как задается любое свойство элемента при помощи стиля.
Синтаксис: {filter: имя(параметры)}
alpha
blur
chroma
dropshadow
flipv
fliph
glow
gray
invert
mask
shadow
wave
xray
Фильтр alpha
Фильтр alpha задает уровень прозрачности элемента.
Синтаксис:{filter:Alpha(Opacity="20",FinishOpacity="45",Style="3")}
Используется с рядом параметров:
opacity - уровень прозрачности от 0 до 100
finish opacity - конечный уровень прозрачности от 0 до 100, параметр ограничивает использование прозрачности до заданного значения.
style - форма прозрачной области: 0 - универсал, 1 - линия,2 - круг,3 - прямоугольник.
startx - начало прозрачной области применяется только с style=1, задается в процентах.
starty - начало прозрачной области применяется только с style=1, задается в процентах.
finishx - конец прозрачной области применяется только с style=1, задается в процентах.
finishy - конец прозрачной области применяется только с style=1, задается в процентах.
Фильтр blur
Фильтр blur задает элементу эффект размытости при движении.
Синтаксис:{filter:Blur(Add="1",Direction="270",Strength="15")}
Используется спараметрами:
add - либо 0-false,либо 1-true
direction - задает направление размытия в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
0 - Top
45 - Top right
90 - Right
135 - Bottom right
180 - Bottom
225 - Bottom left
270 - Default left
315 - Top left
strength - величина смещения.
Фильтр chroma
Фильтр chroma задает прозрачность для одного цвета.
Синтаксис:{filter:Chroma(Color ="#fdfd03")}
Использует параметр:
color - ввиде "#rrggbb"
Фильтр dropshadow
Фильтр dropshadow отбрасывает тень от объекта.
Синтаксис:{filter:DropShadow(Color="#6699CC",OffX="3",OffY="3",Positive="1")}
Использует параметры:
color - задает цвет тени ввиде "#rrggbb"
offx - задает смещение тени по оси X
offy - задает смещение тени по оси Y
positive - либо 0-верхний слой виден частично, либо 1- верхний слой виден весь.
Фильтр flipv
Фильтр flipv вертикально переворачивает объект:
Синтаксис:{filter:FlipV;}
Фильтр fliph
Фильтр fliph горизонтально переворачивает объект:
Синтаксис:{filter:FlipH;}
Фильтр glow
Фильтр glow задает ореол вокруг объекта:
Синтаксис:{filter:Glow(Strength=3, Color="#0000ff")}
Использует параметры:
color - задает цвет сияния ввиде "#rrggbb"
strength - задает интенсивность сияния от 0 до 100
Фильтр gray
Фильтр gray преобразует объект в черно-белые цвета.
Синтаксис:{filter:Gray;}
Фильтр invert
Фильтр invert инвертирует оттенки, цвета и яркость объекта
Синтаксис:{filter:Invert;}
Фильтр mask
Фильтр mask задает выделение объекта цветом:
Синтаксис:{filter:Mask(Color="#0000ff")}
Использует параметр:
color - ввиде "#rrggbb"
Фильтр shadow
Фильтр shadow отбрасывает тень от объекта.
Синтаксис:{filter:Shadow(Color="#000000", Direction="150")}
Используется спараметрами:
direction - задает направление тени в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
0 - Top
45 - Top right
90 - Right
135 - Bottom right
180 - Bottom
225 - Default bottom left
270 - Left
315 - Top left
color - ввиде "#rrggbb"
Фильтр wave
Фильтр wave задает волнообразное отображение объекта
Синтаксис:{filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}
Использует параметры:
add - либо 0-false,либо 1-true
freq - задает количество волн
phase - задает фазу волны
lightstrength - задает изменение интенсивности освещенности на пиках волн
strength - задает интенсивность волны
Фильтр xray
Фильтр xray показывает контур объекта, как если бы это был рентгеновский снимок:
Синтаксис:{filter:Xray;}
Концепция слоя или уровня была разработана и впервые предложена компанией Netscape, их тэги <LAYER и <ILAYER> были во многом похожи на <FRAME> и <IFRAME>. Однако со временем им на замену пришло и практически полностью вытеснило оригинальное решение от Microsoft. Было предложено рассматривать отдельные блоки текста, в тэгах <SPAN> или <DIV> как слои, организовав управление ими при помощи их свойств.
Применение слоев позволяет создать на странице некоторое подобие трехмерного пространства, хотя на самом деле это лишь плоские слои с заданным порядком перекрытия, как в колоде карт. При помощи таблиц стилей CSS мы можем задавать различные свойства слоям и позиционировать их. Это открывает перед web-мастером массу возможностей, позволяет создавать страницы более похожими на типографские и позволяет, в большинстве случаев, отказаться от нежелательного использования таблиц для позиционирования содержимого.
Абсолютное позиционирование
Горизонтальное позиционирование
Вертикальное позиционирование
Задание высоты слоя
Задание ширины слоя
Позиционирование в глубину
Управление видимостью
Понятие прозрачности слоя
Наложение слоев
Абсолютное позиционирование
Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.
Синтаксис: {position: absolute}
Оно может принимать следующие значения:
position:absolute означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы.
position:relative означает, что позиционирование слоя будет происходить относительно того места, где в исходном тексте он находится, то есть относительно предыдущего элемента.
position:static означает, что позиционирование слоя будет происходить относительно фона.
Горизонтальное позиционирование
Позиционирование по горизонтали задается свойством left,путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {left: значение}
задается:
n px
n %
auto
Вертикальное позиционирование
Позиционирование по вертикали задается свойством top, атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {top: значение}
задается:
n px
n %
auto
Задание высоты слоя
height, это свойство позволяет задать высоту слоя в окне браузера:
Синтаксис: {height: значение}
задается:
n px
n %
auto
Задание ширины слоя
width, это свойство позволяет задать ширину слоя в окне браузера:
Синтаксис: {width: значение}
задается:
n px
n %
auto
Позиционирование в глубину
z-index,это свойство позволяет задать порядок перекрытия слоями друг друга, при этом слой с более высоким индексом будет располагаться над слоем с низким индексом. В случае, если атрибут не задан специально, браузер присваивает более высокий индекс слою, который в исходном коде описан позже:
Синтаксис: {z-index: 2}
auto
порядковый номер
Управление видимостью
visibility,это свойство позволяет задать видимость слоя, присвоив ему одно из значений:
Синтаксис: {visibility: inherit}
inherit
hidden
visible
display,это свойство позволяет задать видимость слоя, визуально отличается от visibility тем, что сдвигает предыдущий и последующий слои вместе:
Синтаксис: {display: none}
inline
list-item
none
block
При кажущемся сходстве свойств слоя visibility и display работают они по разному.
overflow,это свойство позволяет задать, как выглядит текст, переполнивший границы слоя, присвоив ему одно из значений:
Синтаксис: {overflow: none}
none
clip
scroll
Понятие прозрачности слоя
Поскольку слой на самом деле представляет собой блок содержимого, заключенный в тэгах <SPAN> или <DIV>, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили включенным тэгам. Тогда, если слой не будет иметь фоновый цвет или рисунок мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован, подобного можно достичь, вставив рисунок.gif, у которого один из цветов прозрачный. Используя данное свойство легко можно добиться интересных эффектов, недоступных другими способами, что в целом улучшает внешний вид и эстетическое восприятие содержимого.
Наложение слоев
Одно из самых интересных способов применений свойств слоя, является одновременное оперирование позиционированием сразу для двух слоев и более. Задав в каждом слое свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.
Верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой. Верстка блоками DIV обеспечивает более быструю загрузку страницы сайта, содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться), код страницы удобочитаем. Но и блочная верстка не идеальна, есть и недостатки. Так нельзя получить представление данных как это делает таблица. То есть таблицы нужно использовать для отображения табличных данных. Табличную верстку также можно использовать и для задания структуры страницы, но злоупотреблять все, же не стоит. Давайте посмотрим, как можно управлять положением блока DIV на странице сайта.
Для начала рассмотрим стилевое свойство float, которое управляет позиционированием перемещаемого блока. Свойство float может принимать значения
left - элемент страницы принудительно выравнивается по левому краю;
right - элемент страницы принудительно выравнивается по правому краю;
none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).
Совместно с float очень часто используется стилевое свойство clear, которое управляет потоком после перемещаемых блоков. Стилевое свойство clear задает, какие границы элемента страницы не могут совпадать с предшествующим перемещаемым блоком свойством float. Свойство clear может принимать значения
left - элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока;
right - элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока;
both - элемент страницы устанавливается ниже любого предыдущего перемещенного блока;
none - ограничений на положение блока относительно перемещаемых блоков не накладывается.
Для иллюстрации работы свойств float и clear, а также для ознакомления с основами, как осуществляется верстка блоками DIV, рассмотрим следующий пример: создадим три блока DIV
Код
<div style="background:#FA911D;">1</div>
<div style="background:#0080C0;">2<br>text<br>text</div>
<div style="background:#80FF00;">3<br>текст</div>
В браузере отобразиться этот HTML-код следующим образом
text
text
текст
Все три блока располагаются один под другим и имеют ширину равную ширине окна браузера (или ширине HTML-элемента страницы, с этим кодом). Теперь изменим ширину каждого блока DIV.
Код
<div style="background:#FA911D; width:240px;">1</div>
<div style="background:#0080C0; width:150px;">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px;">3<br>текст</div>
Отобразится в браузере этот код следующим образом
text
text
текст
Ширина блоков будет у каждого своя, но располагаться будут также один под другим. Далее каждому блоку укажем стилевое свойство float со значение left:
Код
<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>
Получим следующее представление
text
text
текст
Ширина у блоков осталась такая же, как и в предыдущем примере, но свое положение они изменили: выстроились в один горизонтальный ряд. Если добавить еще один блок, то он отобразится не под записанными ранее блоками, а по-другому. В общем случае определить, как отобразится его содержимое, нет возможности.
Код
<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>
<div style="background:#36E065;">4<br>контент<br>контент<br>контент</div>
Но в нашем случае он отобразится следующим образом
text
text
текст
контент
контент
контент
Чтобы новый блок располагался ниже предшествующих блоков, нужно задать ему свойство clear, с соответствующим значением, в нашем случае можно задать значение либо both, либо left:
Код
<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>
<div style="background:#36E065; clear:left;">4<br>контент<br>контент<br>контент</div>
Полученный код отобразится следующим образом (причем в разных браузерах, таких как IE, Opera и Firefox, пример будет отображаться с отличиями)
text
text
текст
контент
контент
контент
С помощью приведенных свойств создают структуры страницы различной сложности, в том числе состоящих из трех столбцов, с резиновыми либо c фиксированными размерами.
Верстка блоками DIV предусматривает также и центрирование блока div в каком-либо элементе HTML-кода. Для центрирования блока в браузерах Opera и Firefox нужно использовать свойства margin-left и margin-top со значением auto, например
Код
<div style="margin-left: auto; margin-right: auto; width: 50%;">
содержимое блока DIV
</div>
Но подобный код не работает в браузере IE6, для этого браузера нужно центрируемый блок DIV поместить в дополнительный блок DIV, в котором будет стилевое свойство text-align со значением center. Например
Код
<div style="text-align:center;">
<div style="width: 50%;">
Содержимое блока DIV
</div>
</div>
То есть в браузере IE6 можно управлять положением блока DIV свойством text-align, используя значения left, center, right. В браузерах Opera и Firefox управлять положением блока DIV с помощью свойства text-align нельзя, только свойством margin.
В общем случае для центрирования блока DIV получим код, который будет одинаково отображаться в различных браузерах
Код
<div style="text-align: center;">
<div style="width: 50%; margin-left: auto; margin-right: auto; ">
Содержимое блока DIV
</div>
</div>
Верстка блоками DIV не обходится без управления положением HTML-элементов с помощью стилевого свойства position, которое определяет схему позиционирования блока. Свойство position может принимать значения
static - задает обычный блок, который не позиционируется индивидуально, а позиционируется в обычном потоке. Свойства top, left, bottom и right не учитываются. Является значением по умолчанию;
relative - задает относительное позиционирование блока. Заключается в следующем. Сначала положение блока рассчитывается как при обычном потоке (то есть не берется во внимание относительное позиционирование). Затем блок смещается относительно своего нормального положения в соответствии со значениями свойств top, left, bottom и right. Последующее содержимое выводится в поток так, как будто блок, относительно позиционированный, не был смещен;
absolute - задает абсолютное позиционирование блока. Абсолютно позиционируемые блоки изымаются из общего потока и не влияют на выводимое последующее содержимое. Положение абсолютно позиционируемого блока задается свойствами top, left, bottom и right относительно родительского элемента (блока);
fixed - задает фиксированное позиционирование блока. При фиксированном позиционировании положение блока рассчитывается, как и при абсолютном позиционировании, но в дальнейшем блок фиксируется и относительно окна браузера и не прокручивается вместе с остальным содержимым страницы. Данное свойство поддерживается браузерами Opera и Firefox.
Для задания положения блоков, у которых свойство position имеет значение relative, absolute или fixed, используются свойства top, left, bottom и right. Познакомимся с ними.
top - задает смещение верхней границы позиционируемого блока вниз относительно верхней границы родительского элемента;
left - задает смещение левой границы позиционируемого блока вправо относительно левой границы родительского элемента;
bottom - задает смещение нижней границы позиционируемого блока вверх относительно нижней границы родительского элемента;
right - задает смещение правой границы позиционируемого блока влево относительно правой границы родительского элемента.
Задавать величины перечисленных выше свойств можно в абсолютных значениях (например, пиксели), в процентных величинах относительно размеров родительского элемента, и также могут принимать значение auto (является значением по умолчанию).
При абсолютном, относительном и фиксированном позиционировании блоки могут накладываться друг на друга, и в этом случае может появиться вопрос, какой из них окажется "выше"? То есть, какой элемент будет отображаться, а какой будет перекрываться находящимся "выше" блоком. Решить этот вопрос поможет свойство z-index. Оно определяет позицию уровня, которую будет занимать блок. Его значением может быть любое положительное или отрицательное целое число. При этом элементы с большим значением z-index будут перекрывать блоки с меньшим значением этого свойства.
Для иллюстрации описанных выше свойств рассмотрим пример. Создадим несколько блоков без свойств позиционирования.
Код
<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>
Для ознакомления с относительным позиционированием добавим в один блок свойства относительного позиционирования
Код
<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: relative; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>
Для ознакомления с абсолютным позиционированием посмотрите, как отобразится следующий код в браузере
Код
<div style="background:#A485B8;">1<br>text</div>
<div style="position:relative;" id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: absolute; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>
В последнем примере, для того чтобы положение абсолютно позиционируемого блока можно было задавать свойствами top и left относительно того места где он был бы расположен при обычном позиционировании, в код был добавлен относительно позиционируемый блок с id="dopoln_block".
В завершение темы "Верстка блоками DIV", приведу шаблон, который позволяет получить очень распространенную схему верстки: вверху страницы заголовок, далее три колонки с основным содержимым страницы и внизу страницы блок, обычно содержащий информацию о копирайте. Причем нижний блок будет находиться внизу страницы даже при малом количестве содержимого на странице. Также две колонки (левая и правая) из трех с основным содержимым будут с фиксированными размерами, а средняя будет "резиновая", то есть она будет менять ширину в зависимости от разрешения экрана монитора. Пример можно посмотреть на странице шаблон.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Шаблон верстки страницы из 3 колонок</title>
<style type="text/css">
* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#9393FF; height:70px; width:100%; }
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800? "100%": "800px"); overflow:hidden; }
#container1 { width:100%; float:left; margin-right:-180px; }
#container2 { background:#000000; margin-right:180px; }
#container3 { width:100%; float:right; margin-left:-200px; }
#left { background:#AEAE00; width:200px; float:left; }
#center { background:#D86927; margin-left:200px; }
#right { background:#C0C0C0; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }
</style>
</head>
<body>
<div id="header">Заголовок страницы</div>
<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
<div id="center">Центральная колонка</div>
</div>
<div id="left">Левая колонка</div>
</div>
</div>
<div id="right">Правая колонка</div>
</div>
<div id="footer">Копирайт</div>
</body>
</html>
Верстка блоками DIV позволяет верстать разные по сложности сайты с использованием приведенных выше свойств каскадных таблиц стилей. Надеюсь, эта статья поможет Вам разобраться с версткой и сделать много хороших и красивых сайтов. Удачи!
Поиск по сайту: