Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Кемеровский государственный университет культуры и искусств

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

CSS очень много.doc

Скачиваний:

Добавлен:

01.05.2025

Размер:

1.1 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2122 / 2522 23 24 25 > Следующая >>>

Свойство 'float'

Данное свойство определяет, где появится в другом элементе изображение или текст.

Примечания:

Если в строке слишком мало места для плавающего элемента, он переносится на следующую строку и продолжается пока строка имеет достаточно места.
Перед float должны идти - содержание, фон и границы внутристрочных элементов, содержание блочного элемента, после - фон и границы блочного элемента.

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

Пример:

{

float: right

}

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

Значение	Описание
left	Изображение или текст смещается в родительском элементе влево.
right	Изображение или текст смещается в родительском элементе вправо.
none	Изображение или текст будут выводиться в том месте, где они встретились в тексте

Параметр 'position'

Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.

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

Пример:

{

position:static;

}

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

Значение	Описание
static	Элемент помещается в обычное положение (согласно нормальному потоку). Со значением "static" не используются параметры "left" и "top".
relative	Смещает элемент относительно его нормального положения, поэтому "left:20" добавляет 20 пикселей к позиции LEFT элемента.
absolute	С помощью значения "absolute" элемент можно поместить в любом месте страницы. Позиция элемента определяется с помощью параметров "left", "top", "right", и "bottom"
fixed

Параметр 'visibility'

Этот параметр определяет видимость или невидимость элемента.

Примечания:

Невидимые элементы занимают место на странице. Для того, чтобы создать невидимые элементы, которые не занимают место необходимо использовать параметр "display".
Этот параметр можно использовать со сценариями для создания Динамического HTML.

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

Примеры:

pre

{

visibility: hidden

}

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

Значение	Описание
visible	Элемент видим
hidden	Элемент невидим
collapse	При использовании в табличных элементах это значение удаляет строку или столбец, но не влияет на компоновку таблицы. Пространство, занимаемое строкой или столбцом, будет доступно для другого содержимого. Если этот параметр используется с другими элементами, он действует как "hidden"

Лекция 12. Позиционирование в CSS

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

Примеры:

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

</html>

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

</html>

В примере показано, как задать форму элемента, по которой он обрезается и выводится.
<html>
<head>
<style type="text/css">
p
{
position:absolute;
clip:rect(2px 250px 250px 0px)
}
</style>
</head>
<body>
<p>Обрезается параграф параграф параграф:</p>
<p></p>
</body>

</html>

В примере показано, как использовать параметр overflow для определения действий, когда содержимое элемента не помещается в указанной области.
<html>
<head>
<style type="text/css">
div
{
background-color:yellow;
width:175px;
height:70px;
overflow: auto
}
</style>
</head>
<body>
<p>Если содержимое элемента превышает заданные значения ширины и
высоты необходимо использовать параметр overflow который определяет,
что делать в этой ситуации.</p>
<div>
В данном случае переполняется бокс элемента и overflow определяет,
что делать - установлено значение auto.
</div>
</body>

</html>

В примере показано, как выравнять в тексте изображение по вертикали.
<html>
<head>
<style type="text/css">
img.first {vertical-align:text-bottom}
img.second {vertical-align:text-top}
</style>
</head>
<body>
<p>
Пара-
<img class="second" border="0"
src="image.gif" width="100" height="100" />
граф.
</p>
<p>
Пара-
<img class="first" border="0" border-color="blue"
src="image.gif" width="100" height="100" />
граф.
</p>
</body>

</html>

В примере показано, как можно использовать Z-index для размещения элемента "позади" другого элемента.
<html>
<head>
<style type="text/css">
img.index
{
position:absolute;
left:10px;
top:40px;
z-index:-1;
}
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120" height="150" border="1">
<p>Изображение с z-index равным -1 имеет меньший приоритет,
поэтому расположено "позади".</p>
</body>

</html>

В примере показано, что произойдет если элементы из предыдущего примера изменят свои значения Z-index.
<html>
<head>
<style type="text/css">
img.index
{
position:absolute;
left:10px;
top:40px;
z-index:1
}
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120" height="150" border="3">
<p>Изображение с z-index равным 1 имеет более высокий приоритет,
поэтому расположено "спереди".</p>
</body>

</html>

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2122 / 2522 23 24 25 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
10.04.201524.81 Кб176. Рабочий Блокнот.docx
#
09.11.2019146.43 Кб147ЛР(скорость звука).doc
#
10.04.20153.32 Mб15Bakhtin.doc
#
01.07.202536.93 Кб0bestreferat-48835.docx
#
15.03.2016180.22 Кб45B_3_V_15_Horovedenie_i_horovaya_aranjirovka.doc
#
01.05.20251.1 Mб1CSS очень много.doc
#
10.04.20151.16 Mб33DENISENKO1.pdf
#
03.09.20191.71 Mб7doc11.doc
#
15.03.2016147.46 Кб148Dvoynos_Analiz_khorovogo_proizvedenia.doc
#
10.04.20151.94 Mб225Eryomenko_uchebnik.pdf
#
28.04.20192.36 Mб10gorchakov_1.docx