Форматирование в CSS

Данные параметры позволяют определить, как и в каком месте вывести элемент.

Примеры:

<body>

<pre>Эта информация не будет отображена</pre> <h1>Между этими двумя элементами</h1> <h1>нет интервала</h1>

</body> </html> Пример показывает, как создать смещение изображения в параграфе вправо. <html> <head> </head>

<body> <p> <img style="float:right" src="image.gif" width="100" height="70" /> В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.

</p> </body>

</html> Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы. <html> <head> </head>

<body> <p> <img style="float:right; border:1px solid blue; margin:0px 0px 15px 20px;" src="image.gif" width="100" height="70" /> Изображение смещено вправо, имеет границу из сплошной линии и отступы. </p> </body>

</html>Пример показывает, как можно сместить изображение с заголовком вправо. <html> <head> </head>

<body> <div style="float:right; border:2px dotted blue; text-align:center; padding:5px; margin:5 5 10px 10px; width:160px;"> <img src="image.gif" width="120" height="70" /><br /> Изучайте CSS! </div>

<p> В данном примере элемент div имеет ширину 160 пикселей, содержит изображение, смещается вправо. Для дистанцирования текста от div, к последнему добавлены отступы, а для выделения картинки и заголовока - границы и поля. </p> </body>

</html> Пример показывает, как можно сместить первую букву параграфа влево. <html> <head> <style type="text/css"> b { float:left; line-height:95%; font-size:500%; font-family:Comic Sans MS; width:1.2em; } </style> </head>

</body> </html> В примере показано, как позиционировать элемент относительно его обычного положения. <html> <head> <style type="text/css"> p.left_plus { position:relative; left:15px } p.left_minus { position:relative; left:-15px } p.right_plus { position:relative; right:35px } p.right_minus { position:relative; right:-35px } </style> </head>

<body> <h2>Это заголовок в обычном положении</h2> <p class="left_plus">Параграф имеет смещение относитильно своего обычного положения</p> <p class="left_minus">Параграф имеет смещение относитильно своего обычного положения</p> <p class="right_plus">Параграф имеет смещение относитильно своего обычного положения</p> <p class="right_minus">Параграф имеет смещение относитильно своего обычного положения</p> </body>

</html> В примере показано, как позиционировать элемент с помощью абсолютного значения. <html> <head> <style type="text/css"> p.ab { position:absolute; left:50px; top:50px } </style> </head>

<body> <p class="ab">Параграф позиционируется с абсолютным значением</p> <pre>С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы. Параграф имеет смещение - на 50px от левого края страницы и на 50px от верхнего края страницы.</pre> </body>

</html> В примере показано, как сделать элемент невидимым. <html> <head> <style type="text/css"> p.off {visibility:hidden} p.on {visibility:visible} </style> </head>

<body> <p class="on">Параграф виден</p> <p class="off">Параграф не виден</p> </body>

</html> В примере показано, как изменить курсор. <html> <head> </head>

<body>

<h4 style="color:blue">Курсоры:</h4>

<div style="cursor:auto"> Auto</div> <div style="cursor:crosshair"> Crosshair</div> <div style="cursor:default"> Default</div> <div style="cursor:pointer"> Pointer</div> <div style="cursor:move"> Move</div> <div style="cursor:text"> text</div> <div style="cursor:wait"> wait</div> <div style="cursor:help"> help</div>

<h4 style="color:blue"> Курсоры типа resize:</h4>

<div style="cursor:e-resize"> e-resize</div> <div style="cursor:ne-resize"> ne-resize</div> <div style="cursor:nw-resize"> nw-resize</div> <div style="cursor:n-resize"> n-resize</div> <div style="cursor:se-resize"> se-resize</div> <div style="cursor:sw-resize"> sw-resize</div> <div style="cursor:s-resize"> s-resize</div> <div style="cursor:w-resize"> w-resize</div> </body>

</html>

Параметр 'height'

Используется для задания высоты элемента.

Наследование: нет.

Пример:

p { height: 50px }

Может принимать следующие значения:

ЗначениеОписание

auto	Браузер вычисляет реальную высоту
length	Определяет высоту в px, см, и т.д.
%	Определяет высоту в % от объемлющего блока

Параметр 'line-height'

Используется для задания интервала между строками.

Наследование: Да.

Примечание: Отрицательные значения не допускаются.

Примеры:

div { line-height: 2.1 }

div { line-height: 10pt }

div { line-height: 120% }

Может принимать следующие значения:

ЗначениеОписание

normal	Задает приемлемый интервал между строками
number	Задает число, которое при умножении на размер текущего шрифта задает интервал между строками
length	Задает фиксированный интервал между строками
%	Задает интервал между строками в % от размера текущего шрифта

Параметр 'max-height'

Используется для задания максимальной высоты элемента.

Наследование: нет.

Пример:

div { max-height: 200% }

Может принимать следующие значения:

ЗначениеОписание

none	Отсутствие ограничений на максимальную высоту элемента
length	Определяет максимальную высоту элемента
%	Определяет максимальную высоту элемента в % от объемлющего блока

Параметр 'max-width'

Используется для задания максимальной ширины элемента.

Наследование: нет.

Пример:

h6 { max-width: 75% }

Может принимать следующие значения:

ЗначениеОписание

none	Отсутствие ограничений на максимальную ширину элемента
length	Определяет максимальную ширину элемента
%	Определяет максимальную ширину элемента в % от объемлющего блока

Параметр 'min-height'

Используется для задания минимальной высоты элемента.

Наследование: нет.

Пример:

div { min-height: 20% }

Может принимать следующие значения:

ЗначениеОписание

length	Определяет минимальную высоту элемента
%	Определяет минимальную высоту элемента в % от объемлющего блока

Параметр 'min-width'

Используется для задания минимальной ширины элемента.

Наследование: нет.

Пример:

h6 { min-width: 20% }

Может принимать следующие значения:

ЗначениеОписание

length	Определяет минимальную ширину элемента
%	Определяет минимальную ширину элемента в % от объемлющего блока

Параметр 'width'

Используется для задания ширины элемента.

Наследование: нет.

Пример:

hr { width: 20% }

Может принимать следующие значения:

ЗначениеОписание

auto	Браузер вычисляет реальную ширину
%	Определяет ширину в % от ширины родительского элемента
length	Определяет ширину в px, см, и т.д.

Параметры размеров элементов CSS

Данные параметры позволяют управлять высотой и шириной элемента, а также изменить межстрочный интервал.

Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах парметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).

ПараметрОписаниеЗначенияIEFNW3C

height	Задает высоту элемента	auto	4	1	6	1*
		length
		%
line-height	Задает интервал между строками	normal	4	1	4	1
		number
		length
		%
max-height	Задает максимальную высоту элемента	none	-	1	6	2
		length
		%
max-width	Задает максимальную ширину элемента	none	-	1	5	2
		length
		%
min-height	Задает минимальную высоту элемента	length	-	1	6	2
		%
min-width	Задает минимальную ширину элемента	length	-	1	6	2
		%
width	Задает ширину элемента	auto	4	1	4	1
		%
		length

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).

В примере показано, как увеличить

В примере показано, как увеличить интервал между строками.
<html> <head> </head>
<body> <div> Стандартный интервал между строками.<br> Стандартный интервал между строками. </div> <br>
<div style="line-height: 0.4cm"> Уменьшенный интервал между строками.<br> Уменьшенный интервал между строками. </div> <br>
<div style="line-height: 0.9cm"> Увеличенный интервал между строками.<br> Увеличенный интервал между строками. </div>
</body> </html>