Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
№ 4 Блочная вёрстка Лекция.docx
Скачиваний:
2
Добавлен:
07.09.2019
Размер:
986.74 Кб
Скачать

Псевдокласс :after

Частое включение пустого тега <div> со свойством clear захламляет код, особенно при активном использовании свойства float. Логично перенести всё в стили, избавившись от лишних тегов. Для этого воспользуемся псевдоэлементом :after, который в комбинации со свойством contentдобавляет текст после элемента. К такому тексту можно применить стилевые свойства, в частности clear. Остаётся только спрятать выводимый текст от браузера.

.clearleft:after {

content: "."; /* Выводим текст после элемента (точку) */

clear: left; /* Отменяем обтекание*/

visibility: hidden; /* Прячем текст */

display: block; /* Блочный элемент */

height: 0; /* Высота */

}

Какой именно выводить символ значения не имеет, он в любом случае скрывается от пользователя через visibility, но даже будучи скрытым, текст при этом занимает какую-то высоту и влияет на близлежащие элементы. Поэтому выводимый текст ещё необходимо превратить в блочный элемент и задать ему нулевую высоту.

Поскольку текст, генерируемый через псевдоэлемент :after, располагается после элемента, он с лёгкостью заменяет конструкцию <div class="clearleft"></div>. Там, где она требуется достаточно только добавить класс clearleft, как показано в примере 3.30.

Пример 3.30. Псевдоэлемент :after

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>:after</title>

<style type="text/css">

DIV { border: 1px solid #000; padding: 10px; }

.fig { float: left; margin: 0 10px 5px 0; }

.clearleft:after {

content: ".";

clear: left;

visibility: hidden; display: block; height: 0;

}

</style>

</head>

<body>

<div class="clearleft">

<img src="images/figure.jpg" class="fig" />Винни-Пух в гостях у Кролика

</div>

</body>

</html>

Браузер IE не поддерживает :after до версии 7.0 включительно, поэтому приведённый пример в этих версиях работать не будет. Добавлениеzoom: 1 к плавающему элементу отменяет обтекание в IE.

Удобство приведённого метода заключается в использовании класса clearleft, который при необходимости добавляется к любому тегу. Также можно ввести дополнительные классы, стиль у которых будет различаться другими значениями clear.

Позиционирование элементов

Начало формы

Конец формы

Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position, изменяется и система координат.

Благодаря комбинации свойств position, left, top, right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.

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