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

Внешние таблицы стилей

Читайте также:
  1. Анализ данных сводной таблицы Excel 2007
  2. Включите в каждую колонку таблицы по 2-3 собственных примера. Ответ аргументируйте.
  3. Внешние
  4. Внешние причины
  5. Внешние причины возникновения техногенной ЧС
  6. Внешние условия Внешние условия
  7. Внешние характеристики четырехполюсников.
  8. Внешние элементы
  9. Два логических выражения равносильны, если их таблицы истинности совпадают с точностью до порядка строк.
  10. Заголовок таблицы печатается полужирным шрифтом размером 14 пунктов и при необходимости может быть продолжен на следующей строке с выравниванием по центру области печати заголовка
  11. Задание 1. Построить таблицы истинности для высказываний

Этот метод требует создания отдельного файла таблицы с основными стилями. Такой файл должен иметь расширение файл.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 позволяет верстать разные по сложности сайты с использованием приведенных выше свойств каскадных таблиц стилей. Надеюсь, эта статья поможет Вам разобраться с версткой и сделать много хороших и красивых сайтов. Удачи!


1 | 2 |

Поиск по сайту:



Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.159 сек.)