Данные параметры CSS позволяют управлять высотой и шириной элемента, увеличением интервала между двумя строками.
Пример:
В примере показано, как увеличить интервал между строками.
<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>
Параметры размеров элементов CSS
Данные параметры позволяют управлять высотой и шириной элемента, а также изменить межстрочный интервал.
Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах парметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).
| Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
| 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)).
Размеры элементов в CSS: подробное рассмотрение
Параметр '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
Данные параметры позволяют определить, как и в каком месте вывести элемент.
Примеры:
- В примере показано, как вывести элемент.
<html>
<head>
<style type="text/css">
h1 {display: inline}
pre {display: none}
</style>
</head>
<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>
<p>
<b>В</b> параграфе элемент b имеет ширину - 1.2 размера текущего шрифта,
размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS.
</p>
</body>
</html>
- Пример показывает, как создать горизонтальное меню.
<html>
<head>
<style type="text/css">
ol
{
float:left;
margin:5;
padding:5;
width:100%;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:blue;
background-color:yellow;
padding:0.4em 0.7em;
border:2px solid gray;
}
a:hover {background-color:#0F0FFF; color:yellow}
li {display:inline}
</style>
</head>
<body>
<ol>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ol>
<p>
В примере элементы ol и a смещены влево.
У элементов li отсутствует разрыв строки перед или после элемента.
</p>
</body>
</html>
- Пример показывает, как создать страницы без таблиц.
<html>
<head>
<style type="text/css">
div.block
{
width:100%;
margin:0px;
border:1px solid orange;
line-height:150%;
}
div.top,div.bottom
{
padding:0.5em;
color:white;
background-color:orange;
clear:left;
}
h1.top
{
padding:0;
margin:0;
}
div.move
{
float:left;
width:160px;
margin:0;
padding:1em;
color: blue;
}
div.body
{
margin-left:190px;
border-left:1px solid orange;
padding:1em;
}
</style>
</head>
<body>
<div class="block">
<div class="top"><h1 class="top">www.Intuit.ru</h1></div>
<div class="move"><p>"Сущности, необходимые для объяснения чего-либо,
не следует умножать без необходимости." Уильям Оккам (1285-1349)</p></div>
<div class="body">
<h2>Свободно доступные пособия по созданию Web</h2>
<p>В Интернет можно найти все необходимые для создания Web пособия,
начиная от основ HTML и XHTML и заканчивая XML, XSL, Multimedia и WAP.</p>
<p>Intuit -- Сайт для разработчиков Web!</p></div>
<div class="bottom">©Copyright</div>
</div>
</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>
|
Посмотреть
порно видео в онлайне »