HTML
CSS2Визуальные эффекты. Управление видимостью и переполнением.Переполнение. Свойство overflow.Бывают случаи, когда содержимое структурного блока не помещается в его информативной области. При этом возникает ситуация, называемая переполнением. Такое явление может возникнуть, когда:
Свойством CSS2, отвечающим за обработку ситуации переполнения, является свойство
Рассмотрим каждое значение в отдельности. Overflow: visible
Это значение говорит о том, что вся информация (и дочерние блоки в том числе), заключенная
в структурном блоке должна быть отображена. Значение Пример использования (рис. 4.1)
<html>
<head>
<title>
Демонстрация использования CSS-свойства overflow
</title>
<style type ="text/css">
div { border: 1px solid black;
overflow: hidden;
width: 200px;
height: 150px }
p { border: 1px dashed red;
width: 400px;
height: 300px;
margin-top: 10px;
margin-left: 10px }
</style>
</head>
<body>
<h3>Свойство overflow:hidden</h3>
<div>
<p>
B уездном городе N было так много парикмахерских заведений и бюро
похоронных процессий, что казалось, жители города рождаются лишь
затем, чтобы побриться, остричься, освежить голову вежеталем и
сразу же умереть. А на самом деле в уездном городе N люди рождались,
брились и умирали довольно редко. Жизнь города N была тишайшей.
</p>
</div>
</body>
</html>
Примечание:
Overflow: hiddenЭто значение указывает на то, что вся информация (и дочерние блоки в том числе ), не уместившаяся в структурном блоке заданных размеров, будет усекаться и отображена не будет. Пример использования (рис. 4.3)
<html>
<head>
<title>
Демонстрация использования CSS-свойства overflow
</title>
<style type ="text/css">
div { border: 1px solid black;
overflow: visible;
width: 200px;
height: 150px }
p { border: 1px dashed red;
width: 400px;
height: 300px;
margin-top: 10px;
margin-left: 10px }
</style>
</head>
<body>
<h3>Свойство overflow:hidden</h3>
<div>
<p>
B уездном городе N было так много парикмахерских заведений и бюро
похоронных процессий, что казалось, жители города рождаются лишь
затем, чтобы побриться, остричься, освежить голову вежеталем и
сразу же умереть. А на самом деле в уездном городе N люди рождались,
брились и умирали довольно редко. Жизнь города N была тишайшей.
</p>
</div>
</body>
</html>
Overflow: scroll
Использование ключевого слова Пример использования (рис. 4.4)
<html>
<head>
<title>
Демонстрация использования CSS-свойства overflow
</title>
<style type ="text/css">
div { border: 1px solid black;
overflow: scroll;
width: 500px;
height: 150px }
p { border: 1px dashed red;
width: 400px;
height: 300px;
margin-top: 10px;
margin-left: 10px }
</style>
</head>
<body>
<h3>Свойство overflow:scroll</h3>
<div>
<p>
B уездном городе N было так много парикмахерских заведений и бюро
похоронных процессий, что казалось, жители города рождаются лишь
затем, чтобы побриться, остричься, освежить голову вежеталем и
сразу же умереть. А на самом деле в уездном городе N люди рождались,
брились и умирали довольно редко. Жизнь города N была тишайшей.
</p>
</div>
</body>
</html>
Overflow: auto
Обработка возникшей ситуации переполнения определяется браузером. Им может быть
использовано одно из вышеописанных значений в зависимости от контекста ситуации и
своих индивидуальных настроек. Обычно при значении Пример использования (рис. 4.5)
<html>
<head>
<title>
Демонстрация использования CSS-свойства overflow
</title>
<style type ="text/css">
div { border: 1px solid black;
overflow: auto;
width: 500px;
height: 150px }
p { border: 1px dashed red;
width: 400px;
height: 300px;
margin-top: 10px;
margin-left: 10px }
</style>
</head>
<body>
<h3>Свойство overflow:auto</h3>
<div>
<p>
B уездном городе N было так много парикмахерских заведений и бюро
похоронных процессий, что казалось, жители города рождаются лишь
затем, чтобы побриться, остричься, освежить голову вежеталем и
сразу же умереть. А на самом деле в уездном городе N люди рождались,
брились и умирали довольно редко. Жизнь города N была тишайшей.
</p>
</div>
</body>
</html>
Управление видимостью.
С помощью CSS-свойства может быть задана видимость структурного блока, то есть,
виден или не виден будет блок пользователю. Таким CSS-свойством является свойство
Пример использования (рис. 4.6)
<html>
<head>
<title>
Демонстрация использования CSS-свойства visibility
</title>
<style type="text/css">
p
{
visibility: visible;
border: 1px solid red
}
p.hidden
{
visibility: hidden;
}
</style>
</head>
<body>
<h3 align="center">
Свойство visibility:hidden
</h3>
<p>
B уездном городе N было так много парикмахерских заведений и бюро
похоронных процессий, что казалось, жители города рождаются лишь
затем, чтобы побриться, остричься, освежить голову вежеталем и
сразу же умереть. А на самом деле в уездном городе N люди рождались,
брились и умирали довольно редко. Жизнь города N была тишайшей.
</p>
<p class="hidden">
Вопросы любви и смерти не волновали Ипполита Матвеевича Воробьянинова,
хотя этими вопросами по роду своей службы он ведал с девяти утра до
пяти вечера ежедневно с получасовым перерывом для завтрака.
</p>
<p>
Хотя похоронных депо было множество, но клиентура у них была небогатая.
"Милости просим" лопнуло еще за три года до того, как Ипполит Матвеевич
осел в городе N, а мастер Безенчук пил горькую и даже однажды пытался
заложить в ломбарде свой лучший выставочный гроб.
</p>
<p>
Люди в городе N умирали редко, и Ипполит Матвеевич знал это лучше кого
бы то ни было, потому что служил в загсе, где ведал столом регистрации
смертей и браков.
</p>
</body>
</html>
Отображение списков средствами языка CSS2.
Возможности языка CSS2 позволяют и для списков задавать стилевые настройки.
При этом для HTML-элементов
Свойство
Пример использования:
ul { color: green; list-style-type: disc }
Благодаря свойству
ul { list-style-image: url(http://www.somehost.ru/img/marker.gif) }
В свою очередь, свойство
Наглядно разницу между ними можно увидеть на следующем примере (рис. 4.7):
<html>
<head>
<title>
Демонстрация использования CSS-свойства list-style-position
</title>
<style type="text/css">
ul { padding: 30px;
border: 1px solid gray;
font-family: "Arial";
background-color: white }
body { text-align: center;
background-color: lightgrey }
th { font-size: 14 pt }
</style>
</head>
<body>
<table>
<tr>
<th>Список с inside-маркером</th>
<th>Список с outside-маркером</th>
</tr>
<tr>
<td>
<ul style="list-style-position: inside">
<h5 align="center">
Haибoлee выдающиеся алгоритмы XX века
</h5>
<li>
Так называемый алгоритм Монте-Карло. Используется для моделирования
случайных процессов и решения задач, которые можно решить только
приближенно.
</li>
<li>
Симплекс-метод. Этот метод вообще является основой линейного
программирования.
</li>
<li>
Алгоритм быстрого преобразования Фурье. Возможно наиболее широко
применямый алгоритм. Разбивает волну на периодические компоненты.
</li>
</ul>
</td>
<td>
<ul style="list-style-position: outside">
<h5 align="center">
Haибoлee выдающиеся алгоритмы XX века
</h5>
<li>
Так называемый алгоритм Монте-Карло. Используется для моделирования
случайных процессов и решения задач, которые можно решить только
приближенно.
</li>
<li>
Симплекс-метод. Этот метод вообще является основой линейного
программирования.
</li>
<li>
Алгоритм быстрого преобразования Фурье. Возможно наиболее широко
применямый алгоритм. Разбивает волну на периодические компоненты.
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Задание формы курсора. Свойство cursor.
CSS-свойство Пример использования:
body { cursor: url("myfirst.cur"), url("mysecond.cur") }
В этом примере сначала будет попытка подключить курсор из файла myfirst.cur и если она окажется безуспешной, будет подключаться второй курсор. Примечательно, что форму курсора можно изменять в области каждого HTML-элемента индивидуально. Например, можно изменять его форму, если он находится над абзацем:
p { cursor: url("coolcur.cur") }
В качестве ключевых слов могут быть использованы следующие:
|
||||||||||||||||||||||||||||||
