Читайте также:
|
Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left, border-top, border-right и border-bottom, соответственно устанавливающих границу слева, сверху, справа и снизу.
Отступы
Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.
Для отступов характерны следующие особенности.
14.Логические разделы. Элементы <div> и <span>. Для чего они используются? Привести примеры. Создание плавающего элемента. Поток.
Люди склонны использовать эти две теги аналогичным образом, но они служат для совершенно разных целей.
<div>
<div> тег определяет логические отделы в Вашей веб-странице. Он очень похож на <p> тег, но он делит страницу на большие разделы. <div> дает Вам возможность определить стиль целых разделов HTML. Он также дает Вам возможность назвать определенные разделы Вашей страницы, чтобы Вы могли работать с ними с помощью CSS или динамического HTML. Одно, что надо запомнить при использовании тега <div>, что <div> разделяет параграфы, и хотя Вы можете иметь параграфы в рамках <div>, Вы не можете иметь <div> внутри параграфа.
Первичные атрибуты тега <div>:
• style
• class
• id
Даже если Вы не ползуйтесь CSS и DHTML, Вы должны войти в привычку использовать тег <div>. Это даст Вам больше гибкости. Кроме того, Вы можете использовать атрибуты id и name с именем раздела, чтобы Ваша веб-страница была сформирована лучше (всегда используйте атрибуты id и name и дайте им одинаковые содержания).
<span>
Тег <span> имеет очень похожие свойства тега <div>, поскольку он меняет стиль текста, который содержится в нем. Но без каких-либо атрибутов style, тег <span> никаких элементов бы не изменил.
Основное различие между тегами <span> и <div> является то, что <span> самостоятельно не делает форматирование.
Тег <span> не имеет обязательные атрибуты, но вот три, которые являются наиболее распространенными:
• style
• class
• id
Используйте <span>, когда хотите изменить стиль элементов, не ставя их в новый блок на странице.
Теги <DIV> и <SPAN>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования стилей</title>
<style>
.text1 {font-size:12px; color:#FF0000; font-family:Arial }
.text2 {font-size:12px; color:#0000FF; font-family: Verdana}
</style>
</head>
<body>
<div class="text1">
<p>Абзац1</p>
<p>Абзац2</p>
</div>
<span class="text2">
<p>Абзац3</p>
<p>Абзац4</p>
</span>
</body>
</html>
Надо уточнить, что тег <DIV> позволяет не только группировать элементы, но и управлять горизонтальным выравниванием текста с помощью атрибута align. Параметр может принимать следующие значения:
<div align = "center">Элемент с выравниванием по центру</div>
<div align = "left">Элемент с выравниванием по левому краю</div>
<div align = "right">Элемент с выравниванием по правому краю</div>
Свойство float мощный и ценный актив для любого веб-дизайнера/разработчика, работающего с CSS и HTML. Но в то же время оно может разочаровать или смутить, если вы не до конца понимаете принципы его работы. Раньше оно было связано с довольно неприятными браузерными багами, поэтому вполне нормально, если вы нервничаете при использовании этого свойства. Так давайте успокоимся и облегчим своё разочарование. Я покажу вам, чего можно достичь, используя свойство float, и как полезно оно может быть.
Мы часто встречаемся с поплавками в печатном мире, когда читаем журнальные статьи с картинками слева или справа, и как текст обтекает эти картинки. В мире CSS и HTML текст окутает картинку со свойством float, почти как в журнале. Картинки - это всего лишь одно из применений данного свойства: также можно создать двухколоночную верстку, используя float. Поняв и усвоив основы, а так же усвоив основы позиционирования, вы спокойно сможете создать любой макет.
Дата добавления: 2015-02-16; просмотров: 149 | Поможем написать вашу работу | Нарушение авторских прав |