Deprecated: Assigning the return value of new by reference is deprecated in /home/bahus/data/www/fixblog.ru/css/wp-settings.php on line 468 Deprecated: Assigning the return value of new by reference is deprecated in /home/bahus/data/www/fixblog.ru/css/wp-settings.php on line 483 Deprecated: Assigning the return value of new by reference is deprecated in /home/bahus/data/www/fixblog.ru/css/wp-settings.php on line 490 Deprecated: Assigning the return value of new by reference is deprecated in /home/bahus/data/www/fixblog.ru/css/wp-settings.php on line 526 Deprecated: Assigning the return value of new by reference is deprecated in /home/bahus/data/www/fixblog.ru/css/wp-includes/cache.php on line 103 Deprecated: Assigning the return value of new by reference is deprecated in /home/bahus/data/www/fixblog.ru/css/wp-includes/query.php on line 21 Deprecated: Assigning the return value of new by reference is deprecated in /home/bahus/data/www/fixblog.ru/css/wp-includes/theme.php on line 618 Fix Blog - CSS Справочник http://fixblog.ru/css В помощь веб-мастерам Sat, 30 Aug 2008 06:40:11 +0000 http://wordpress.org/?v=2.6 en clear http://fixblog.ru/css/clear/ http://fixblog.ru/css/clear/#comments Thu, 21 Aug 2008 18:25:42 +0000 writer http://fixblog.ru/css/?p=199 clear
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию none
Наследуется Нет
Применяется К блочным и плавающим элементам
Аналог HTML <br clear=left | right | all>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

Описание

Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими
элементами. Если установлено обтекание элемента с помощью параметра float,
свойство clear отменяет его действие для указанных
сторон.

Синтаксис

clear: both | left | none | right

Аргументы

both
Отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент
рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно
точно с какой стороны.
left
Отменяет обтекание с левого края элемента. При этом все другие элементы
на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right
Отменяет обтекание с правой стороны элемента.
none
Отменяет действие данного свойства и обтекание элемента происходит, как
задано с помощью параметра float или других настроек.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>clear</title>

<style type="text/css">
#layer {
 float: left; /* Обтекание блока по правому краю */
 background: #fd0; /* Цвет фона */
 border: 1px solid black; /* Параметры рамки */

 padding: 10px; /* Поля вокруг текста */
 width: 40%; /* Ширина блока */
}
</style>
</head>

<body>

<div id="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

<div style="clear: left"></div>

<p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
te feugat nulla facilisi.</p>

</body>

</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра clear

Объектная модель

[window.]document.getElementById("elementID").style.clear

]]> http://fixblog.ru/css/clear/feed/ clip http://fixblog.ru/css/clip/ http://fixblog.ru/css/clip/#comments Thu, 21 Aug 2008 18:24:58 +0000 writer http://fixblog.ru/css/?p=197 clip
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Ошибки Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным и заменяемым элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

Описание

Параметр clip определяет область позиционированного
элемента, в которой будет показано его содержимое. Все, что не помещается в
эту область, будет обрезано и становится невидимым. На данный момент единственно
доступная форма области — прямоугольник. Все остальное остается только
в мечтах. Параметр clip работает только для абсолютно
позиционированных элементов.

Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto

Аргументы

В качестве аргументов используется расстояние от края элемента до области
вырезки, которое задается в единицах CSS — пикселы (px), проценты
(%) и др. Если край области нужно оставить без изменений, следует поставить
параметр auto, положение остальных значений показано
на рис. 1.

Рис. 1. Значения параметра clip

Рис. 1. Значения параметра clip

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>clip</title>
<style type="text/css">

#layer {
 position: absolute; /* Абсолютное позиционирование */
 clip: rect(40px, auto, auto, 40px); /* Прячем часть текста
*/
 width: 200px; /* Ширина блока */
 color: white; /* Цвет текста */

 background: #7f4c3e; /* Цвет фона */
 border: 1px solid black; /* Параметры рамки */
 padding: 10px; /* Поля вокруг текста */
}
</style>

</head>
<body>

<div id="layer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2

Рис. 2. Применение параметра clip в браузере Opera 9.23

Объектная модель

[window.]document.getElementById("elementID").style.clip

Примечание

Браузер Opera 7 (в версии 8 и старше иначе) скрывает только содержимое блочного элемента, а фон и рамку оставляет
неизменной. На рис. 3 показан результат приведенного примера в браузере
Opera 7.

Рис. 3

Рис. 3. Использование параметра clip в браузере Opera 7

Другие браузеры отображают пример по иному. Так, браузер Firefox скрывает
не только текст, но также фон и рамку, как показано на рис. 4.

Рис. 4

Рис. 4. Использование параметра clip в браузере Firefox

]]> http://fixblog.ru/css/clip/feed/ color http://fixblog.ru/css/color/ http://fixblog.ru/css/color/#comments Thu, 21 Aug 2008 18:23:13 +0000 writer http://fixblog.ru/css/?p=195 color
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию Зависит от настроек браузера, обычно черный цвет
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <body text="цвет">
<font color="цвет">
Ссылка на спецификацию http://www.w3.org/TR/CSS21/colors.html#propdef-color

Описание

Определяет цвет текста элемента.

Синтаксис

color: значение

Аргументы

Значение цвета можно задавать тремя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная
система, в отличие от десятичной системы, базируется, как следует из ее названия,
на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D,
E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной
системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной
системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят
символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый
и синий — может принимать значения от 00 до FF. Таким образом, обозначение
цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают
красную компоненту цвета, два средних — зеленую, а два последних —
синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ
следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей
в десятичном исчислении. Значение каждого из трех цветов может принимать значения
от 0 до 255. Также можно задавать цвет в процентном отношении.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>color</title>

<style type="text/css">
.letter {
 color: red; /* Цвет символа */
 font-size: 200%; /* Размер шрифта */
}

P {
 color: RGB(49, 151, 116); /* Цвет текста */
}
</style>
</head>

<body>

<p><span class="letter">L</span>orem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt
ut lacreet dolore magna aliguam erat volutpat.</p>
<p><span class="letter">U</span>t wisis enim ad
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Использование атрибута color

Объектная модель

[window.]document.getElementById("elementID").style.color

]]> http://fixblog.ru/css/color/feed/ content http://fixblog.ru/css/content/ http://fixblog.ru/css/content/#comments Thu, 21 Aug 2008 18:22:29 +0000 writer http://fixblog.ru/css/?p=193 content
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Нет Нет Нет Част. Част. Да Да Да Да Да Част. Да Да Да

Част. — поддерживается частично.

Краткая информация

CSS CSS2
Значение по умолчанию Пустая строка
Наследуется Нет
Применяется К псевдоэлементам before и after
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.html#content

Описание

Атрибут content позволяет вставлять генерируемое
содержание в текст веб-страницы, которое первоначально в тексте отсутствует.
Применяется совместно с псевдоэлементами after
и before, они соответственно указывают отображать
новое содержимое после или до элемента, к которому добавляются.

Синтаксис

content: строка | attr(атрибут) | open-quote | close-quote
| no-open-quote | no-close-quote | url }

Аргументы

Строка
Текст, который добавляется на веб-страницу, строка при этом должна браться
в двойные или одинарные кавычки. Допускается использовать юникод для вставки
спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (&sect;
например), будут отображаться как есть, т.е. простым текстом (&sect;,
а не §).
attr(атрибут)

Возвращает строку, которая является значением атрибута указанного в скобках.
Например, IMG:after{content:attr(href)} добавит
после изображения его адрес, т.е. значение параметра href.
Если указанного атрибута нет, то вернется пустая строка.

open-quote
Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого
параметра quotes.
close-quote
Вставляет закрывающую кавычку, тип которой устанавливается с помощью стилевого
параметра quotes.
no-open-quotes
Открывающая кавычка не вставляется в то место, где она должна быть добавлена.
Например, тег <Q> автоматически добавляет кавычки
к содержащему внутри него тексту.
no-close-quote
Отменяет добавление закрывающей кавычки.
url
Абсолютный или относительный адрес вставляемого объекта. Если указанный
файл браузер не может отобразить, то значение игнорируется.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>content</title>
<style type="text/css">
SPAN.tag {

 color: navy; /* Цвет текста */
 font-family: monospace; /* Моношириный шрифт */

 quotes: "<" ">"; /* Устанавливаем
вид кавычек */
}

SPAN.tag:before {
 content: open-quote; /* Добавляем перед текстом открывающую
кавычку */
}

SPAN.tag:after {

 content: close-quote; /* Добавляем после текста закрывающую
кавычку */
}
</style>
</head>
<body>

<p>Тег <span class="tag">DEL</span> используется
для выделения текста, который был удален в новой версии документа.</p>

</body>

</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра content

Примечание

Браузер Opera начиная с седьмой версии, не требует использования псевдоэлементов
before и after и
допускает применение content ко всем элементам.

]]> http://fixblog.ru/css/content/feed/ cursor http://fixblog.ru/css/cursor/ http://fixblog.ru/css/cursor/#comments Thu, 21 Aug 2008 18:20:33 +0000 writer http://fixblog.ru/css/?p=191 cursor
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Да Част. Част. Част. Да Част. Част. Да Да

Част. — поддерживается частично.

Краткая информация

CSS CSS2
Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#cursor-props

Описание

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора
зависит от операционной системы и установленных параметров.

Прежде чем воспользоваться возможностью переделать вид курсора, решите, а
будет ли он использоваться к месту. Многих пользователей подобные изменения
могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся
при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше
оставить все как есть.

Синтаксис

cursor: auto | crosshair | default | e-resize | help | move
| n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize
| sw-resize | text | w-resize | wait || url(’путь к курсору’)

Аргументы

auto — вид курсора по умолчанию для текущего
элемента;
url — позволяет установить свой собственный
курсор, для этого нужно указать путь к файлу, в котором указана форма курсора,
в формате CUR или ANI. Данный параметр не работает в браузере Opera, Safari, Mozilla и Firefox 1.0. Остальные допустимые аргументы приведены в табл. 1.

Табл. 1. Вид курсора
Вид Значение Тест Пример
default ТЕСТ P {cursor:default}

crosshair ТЕСТ P {cursor:crosshair}

help ТЕСТ P {cursor:help}

move ТЕСТ P {cursor:move}

pointer ТЕСТ P {cursor:pointer}
progress ТЕСТ P {cursor:progress}

text ТЕСТ P {cursor:text}

wait ТЕСТ P {cursor:wait}

n-resize ТЕСТ P {cursor:n-resize}

ne-resize ТЕСТ P {cursor:ne-resize}

e-resize ТЕСТ P {cursor:e-resize}

se-resize ТЕСТ P {cursor:se-resize}

s-resize ТЕСТ P {cursor:s-resize}

sw-resize ТЕСТ P {cursor:sw-resize}

w-resize ТЕСТ P {cursor:w-resize}

nw-resize ТЕСТ P {cursor:nw-resize}

В зависимости от операционной системы и ее настроек вид курсора может отличаться
от приведенных в таблице.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>cursor</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>

</head>
<body>

<p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
<p>

<a href="help1.htm" class="help">СПРАВКА 1</a><br>
<a href="help2.htm" class="help">СПРАВКА 2</a><br>

<a href="help3.htm" class="help">СПРАВКА 3</a>
</p>

</body>

</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра cursor

Объектная модель

[window.]document.getElementById("elementID").style.cursor

Примечание

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet
Explorer работает со значением hand, которое является
аналогом значения pointer. Кроме того, только в
этом браузере будут действовать следующие аргументы: all-scroll,
col-resize, no-drop,
not-allowed, row-resize,
vertical-text.

]]> http://fixblog.ru/css/cursor/feed/ display http://fixblog.ru/css/display/ http://fixblog.ru/css/display/#comments Thu, 21 Aug 2008 18:19:49 +0000 writer http://fixblog.ru/css/?p=188 display
Браузер Internet Explorer Netscape Opera
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.5
Поддерживается Част. Част. Част. Част. Част. Част. Част. Да



Браузер Safari Mozilla Firefox
Версия 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Част. Част. Част. Част.

Част — Поддерживается частично.

Краткая информация

CSS CSS2
Значение по умолчанию inline
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#display-prop

Описание

Многоцелевой атрибут, который определяет, как элемент должен быть показан
в документе.

Синтаксис

display: block | inline | inline-table | list-item | none
| run-in | table | table-caption | table-cell | table-column-group | table-footer-group
| table-header-group | table-row | table-row-group

Аргументы

Список возможных значений этого атрибута, понимаемый разными браузерами очень
короткий — block, inline,
list-item и none.
Все остальные допустимые аргументы поддерживаются браузерами выборочно. В табл. 1
приведены некоторые популярные браузеры и их поддержка различных свойств.

Табл. 1. Поддержка браузерами значений свойства display
Аргумент Описание IE 6 IE 7 Opera 8 Opera 9.5 Firefox 1.0 Firefox 2 Firefox 3
block Элемент показывается как блочный. Применение этого значения
для встроенных элементов, например тега <SPAN>,
заставляет его вести подобно блокам — происходит перенос строк в начале
и в конце содержимого. 		Да Да Да Да Да Да Да
inline Элемент отображается как встроенный. Использование блочных
тегов, таких как <DIV> и <P>,
автоматически создает перенос и показывает содержимое этих тегов с новой
строки. Аргумент inline отменяет эту особенность,
поэтому содержимое блочных элементов начинается с того места, где окончился
предыдущий элемент.		 Да Да Да Да Да Да Да
inline-block Это значение генерирует блочный элемент, который обтекается
другими элементами веб-страницы подобно встроенному элементу. Фактически
такой элемент по своему действию похож на встраиваемые элементы (вроде тега
<IMG>). При этом его внутренняя часть форматируется
как блочный элемент, а сам элемент — как встроенный. 		Да Да Да Да Нет Нет Да
inline-table Определяет, что элемент является таблицей как при использовании
тега <TABLE>, но при этом таблица является
встроенным элементом и происходит ее обтекание другими элементами, например,
текстом. 		Нет Нет Да Да Нет Нет Да
list-item Элемент выводится как блочный и добавляется маркер списка. Да Да Да Да Да Да Да
none Временно удаляет элемент из документа. Занимаемое им место
не резервируется и веб-страница формируется так, словно элемента и не было.
Изменить значение параметра и сделать его вновь видимым можно с помощью
скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит
переформатирование данных на странице с учетом вновь добавленного элемента.		 Да Да Да Да Да Да Да
run-in Устанавливает элемент как блочный или встроенный в зависимости
от контекста. 		Нет Нет Да Да Нет Нет Нет
table Определяет, что элемент является блочной таблицей подобно
использованию тега <TABLE>. 		Нет Нет Да Да Да Да Да
table-caption Задает заголовок таблицы подобно применению тега <CAPTION>. Нет Нет Да Да Да Да Да
table-cell Указывает, что элемент представляет собой ячейку таблицы
(тег <TD> или <TH>). 		Нет Нет Да Да Да Да Да
table-column Назначает элемент колонкой таблицы, словно был добавлен тег
<COL>.		 Нет Нет Нет Да Да Да Да
table-column-group Определяет, что элемент является группой одной или более
колонок таблицы, как при использовании тега <COLGROUP>.		 Нет Нет Нет Да Да Да Да
table-footer-group Используется для хранения одной или нескольких строк ячеек,
которые отображаются в самом низу таблицы. По своему действию сходно с работой
тега <TFOOT>. 		Нет Нет Да Да Да Да Да
table-header-group Элемент предназначен для хранения одной или нескольких строк
ячеек, которые представлены вверху таблицы. По своему действию сходно с
работой тега <THEAD>. 		Нет Нет Да Да Да Да Да
table-row Элемент отображается как строка таблицы (тег <TR>). Нет Нет Да Да Да Да Да
table-row-group Создает структурный блок, состоящий из нескольких строк таблицы
аналогично действию тега <TBODY>. 		Нет Нет Да Да Да Да Да

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>display</title>

<style type="text/css">
.example {
 border: dashed 1px #634f36; /* Параметры рамки */
 background: #fffff5; /* Цвет фона */

 font-family: "Courier New", Courier, monospace;
/* Шрифт текста */
 padding: 7px; /* Поля вокруг текста */
 margin: 0px 0px 1em; /* Отступы вокруг */

}

.exampleTitle {
 border: 1px solid black; /* Параметры рамки */
 border-bottom: none; /* Убираем линию снизу */

 padding: 3px; /* Поля вокруг текста */
 display: inline; /* Устанавливаем как встроенный элемент
*/
 background: #efecdf; /* Цвет фона */
 font-weight: bold; /* Жирное начертание */

 font-size: 90%; /* Размер текста */
 margin: 0px; /* Убираем отступы вокруг */
 white-space: nowrap; /* Отменяем переносы текста */
}

</style>
</head>
<body>

<p class="exampleTitle">Пример</p>

<p class="example">
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
&lt;html&gt;<br>
&lt;body&gt;<br>

&lt;b&gt;Формула серной кислоты:&lt;/b&gt;
&lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;

SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
&lt;/sub&gt;&lt;/i&gt;<br>
&lt;/body&gt;<br>

&lt;/html&gt;
</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра display

Объектная модель

[window.]document.getElementById("elementID").style.display

]]> http://fixblog.ru/css/display/feed/ float http://fixblog.ru/css/float/ http://fixblog.ru/css/float/#comments Thu, 21 Aug 2008 18:17:45 +0000 writer http://fixblog.ru/css/?p=186 float
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам (за исключением позиционированных)
Аналог HTML <applet | iframe | img | object | spacer | table align="right | left">
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Описание

Определяет, по какой стороне будет выравниваться элемент, при этом остальные
элементы будут обтекать его с других сторон. Когда значение параметра float
равно none, элемент выводится на странице как обычно,
самое большое — одна строка обтекающего текста может быть на той
же линии, что и сам элемент.

Синтаксис

float: left | right | none

Аргументы

left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста,
огибают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы огибают его
по левой стороне.
none
Обтекание элемента не задается.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>float</title>
<style type="text/css">

.layer1 {
 float: left; /* Обтекание по правому краю */
 background: #fd0; /* Цвет фона */
 border: 1px solid black; /* Параметры рамки */

 padding: 10px; /* Поля вокруг текста */
 margin-right: 20px; /* Отступ справа */
 width: 40%; /* Ширина блока */
}

</style>
</head>
<body>

<div class="layer1">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
</div>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра float

Объектная модель

[window.]document.getElementById("elementID").style.styleFloat

[window.]document.getElementById("elementID").style.cssFloat

]]> http://fixblog.ru/css/float/feed/ font http://fixblog.ru/css/font/ http://fixblog.ru/css/font/#comments Thu, 21 Aug 2008 18:16:46 +0000 writer http://fixblog.ru/css/?p=184 font
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию Зависит от используемых аргументов
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <I>, <B>, <FONT>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font

Описание

Универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.

Синтаксис

font: [font-style || font-variant || font-weight] font-size [/line-height]
font-family

Аргументы

В качестве обязательных аргументов параметра font указывается размер шрифта и его семейство. Остальные аргументы являются опциональными и задаются при желании. Для более подробного ознакомления с аргументами, смотрите
свойства каждого параметра отдельно.

Примеры использования

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt ? интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Аргумент bold устанавливает жирное начертание текста, а italic ? курсивное. В данном случае порядок этих значений не важен, поэтому их можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит параметру font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Аргумент normal применяется сразу к двум свойствам: font-style и font-weight.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font</title>
<style type="text/css">
.layer1 {

 font: 12pt sans-serif;
}

H1 {
 font: 200% serif;
}

</style>
</head>
<body>

<div class="layer1">
<h1>Duis te feugifacilisi</h1>

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
</div>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра font

Объектная модель

[window.]document.getElementById("elementID").style.font

]]> http://fixblog.ru/css/font/feed/ font-family http://fixblog.ru/css/font-family/ http://fixblog.ru/css/font-family/#comments Thu, 21 Aug 2008 18:15:47 +0000 writer http://fixblog.ru/css/?p=182 font-family
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <font face="…">
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Описание

Устанавливает семейство шрифта, которое будет использоваться для оформления
текста содержимого. Список шрифтов может включать одно или несколько названий,
разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet
MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие
на компьютере пользователя. Если такого шрифта нет, берется следующее имя
из списка и также анализируется на присутствие. Поэтому несколько шрифтов
увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском
компьютере. Заканчивают список обычно ключевым словом, которое описывает тип
шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом,
последовательность шрифтов лучше начинать с экзотических типов и заканчивать
обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, ...]]

Аргументы

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства
шрифтов:
serif — шрифты с засечками (антиквенные),
типа Times;
sans-serif — рубленные шрифты (шрифты без
засечек или гротески), типичный представитель — Arial;

cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого
символа в таком семействе одинакова.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font-family</title>
<style type="text/css">
H1 {

 font-family: Geneva, Arial, Helvetica, sans-serif;
}
P {
 font-family: Georgia, ‘Times New Roman’, Times, serif;
}
</style>

</head>
<body>

<h1>Duis te feugifacilisi</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра font-family

Объектная модель

[window.]document.getElementById("elementID").style.fontFamily

]]> http://fixblog.ru/css/font-family/feed/ font-size http://fixblog.ru/css/font-size/ http://fixblog.ru/css/font-size/#comments Thu, 21 Aug 2008 18:14:36 +0000 writer http://fixblog.ru/css/?p=180 font-size
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 7.0 8.0 7.0 8.0 9.0 2.0 3.0 1.7 1.0 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию medium
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <font size="…">
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими
способами. Набор констант (xx-small, x-small, small,
medium, large, x-large, xx-large) задают размер, который называется абсолютным.
По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.

Другой набор констант (larger, smaller)
устанавливает относительные размеры шрифта. Поскольку размер унаследован от
родительского элемента, эти относительные размеры применяются к родительскому
элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения этого параметра
у родителя элемента.

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты

Аргументы

Для задания абсолютного размера используются следующие значения: xx-small,
x-small, small, medium,
large, x-large, xx-large.
Соответствие этих аргументов с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML
CSS xx-small x-small small medium large x-large xx-large  
HTML 1   2 3 4 5 6 7

Относительный размер шрифта задается аргументами larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em
(высота шрифта элемента), ex (высота символа х),
пункты (pt), пикселы (px),
проценты (%) и др. За 100% берется размер шрифта
родительского элемента. Отрицательные значения не допускаются.

Пример

Валидный HTML Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>font-size</title>
<style type="text/css">

H1 {
 font-family: ‘Times New Roman’, Times, serif; /* Гарнитура текста */

 font-size: 250%; /* Размер шрифта в процентах */
}

P {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11pt; /* Размер шрифта в пунктах */

}
</style>
</head>
<body>

<h1>Duis te feugifacilisi</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра font-size

Объектная модель

[window.]document.getElementById("elementID").style.fontSize

Примечание

Задание размера шрифта font-size: medium приведет
к различным размерам шрифта в браузерах Internet Explorer и Netscape (Firefox).

]]> http://fixblog.ru/css/font-size/feed/