Долго ли коротко ли... разменяли мы с вами пятый десяток уроков. Сколько же нами перелопачено, сколько времени и сил угрохано... а все на что? Многие ли из вас не соскочили с дистанции, не сломались, не испугались трудностей? Согласитесь, не так уж легок путь создания собственного сайта. Наверняка не раз хотелось бросить все, взять шаблон, запихнуть туда чего-нибудь... и жить спокойно.
Думаете у меня не было таких мыслей? Иной раз бьешься-бьешься как рыба об лед... а не получается. Или получается, но совсем-совсем не то, что хотелось. Сколько раз хотела я бросить это дело! Ох как часто мне на ушко кто-то неведомый нашептывал... ну на фига? Иди лучше кино посмотри или погуляй, поспи лишний часок?
Не спится. И не гуляется. А даже если и гуляется - все равно думается. Пусть и не только о диких уроках. Но и о них, родимых тоже. Наверное то, что дается с трудом и ценится больше всего? Именно это и страшно потерять? Как вы думаете?
Ладно, зато скоро я вас научу, как можно зарабатывать на собственном сайте. Потерпите только чуть-чуть, хорошо? Научу как рассылки делать, как использовать SSI... да мало ли чему можно научиться в этих "диких уроках"?
Так что давайте пойдем дальше. Поговорим об отступах и полях.
Margin. Поле.
Поля бывают разные. Колхозное поля и поля футбольные. Поля чудес и поля у шляп. У страниц тоже есть поля! Тут даже и растеряться можно! Какое же нам нужно? Скажу вам сразу! Это есть пространство между содержимым элемента и его границей относительно родительского элемента, либо, при его отсутствии - от окна браузера.
Если хотите сделать поля со всех сторон одинаковыми, можете просто указать значение после слова margin. Размерность может быть как в значениях длины (px, pt, em и т.д.), так и в значении auto, а также в процентом соотношении. Однако будьте осторожны! Если элементы вложены друг в друга, при процентах могут быть разные неприятности.
Когда я только начала понимать, что такое CSS, я сразу переделала свой сайт, и конечно же не могла обойтись без margin. У меня были там таблицы вложенные одна в другую. В Explorer смотрелось все отменно, и я, не проверив сайт в других браузерах, сразу же выложила его на всеобщее обозрение. Не успела я налюбоваться на него, как мне пришло ехидное письмо ехидного автора, где он написал буквально следующее: "У вас не только дикие уроки, но и таблицы тоже дикие. Растянутые по ширине на несколько окон браузера". В общем, стыд и позор! И я долго не могла найти своей ошибки, не нашла бы ее и до сих пор, если бы не один добрый человек, который посоветовал мне убрать проценты от margin. И все наладилось!
Так что будьте очень осторожными! Если же вы хотите сделать поля разными со всех сторон, то можете употребить запросто значения margin-top, margin-right, margin-bottom и margin-left. Думаю, вам уже тут все понятно. Ничего сложного нет. Сейчас мы попробуем использовать эти маргинчики в примере предыдущего урока. Ради экономии места я не буду расписывать эти верх-низ, напишу просто margin. А вы, если хотите (а наверняка захотите!!!) можете использовать любые значения. И для практики это будет очень даже хорошо.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>BORDER-COLOR</title>
<style type="text/css">
body {
margin: 0;
}
h1 {
border-style: double;
border-color: blue;
margin: 0;
text-align: center; /* Чтобы заголовок был по центру, как в старину */
}
p.abz {
border-style: dotted;
border-color: red;
border-width: 10px;
width: 300px; /* ДОБАВИЛИ px — это важно! */
padding: 10px; /* Чтобы текст не прилипал к красным точкам */
}
img {
border-style: inset;
border-color: gold;
border-width: 20px;
margin: 30px;
}
</style>
</head>
<body>
<h1>Картина Шилова "Перед Венчанием"</h1>
<img src="foto.jpg" align="left" alt="Картина">
<p class="abz">
Шилов как увидел Пчелку, так чуть и не умер от радости.
Потому что без этой Пчелки он никогда не смог нарисовать
такой замечательной картины! А может и вообще бы так и
прожил никому не известным бедным художником!
И никогда бы не попал в такие знаменитые "Дикие уроки".
</p>
</body>
</html>
И вот что получилось с полями:
В стилях мы установили поле страницы и заголовка равным нулю, вот заголовок и прилип к границам браузера. И как бы мы не изменяли размер окна, он так прилипнутым и останется. А вот для картинки мы устрановили поле равным 20 пикселям, вот на эторасстояние она и отодвинулась от всех соседних элементов. Поле абзаца я решила не трогать, чтобы не вносить сумятицы. Понятно? Тогда перейдем к отступам!
Padding. Отступ.
И, последнее, что мне хочется рассмотреть на этом уроке - это отступы вокруг элемента. Подобно margin отступ может быть одинаковым со всех сторон, и тогда можно обойтись просто margin, а может быть и разным для каждой стороны. Тогда нужно написать padding-top, padding-right, padding-bottom или padding-left. Сразу возьмемся экспериментировать: добавим в предыдущий пример отступ для абзаца:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>BORDER-COLOR & PADDING</title>
<style> type="text/css">
body {
margin: 0;
}
h1 {
border-style: double;
border-color: blue;
margin: 0;
text-align: center;
}
p.abz {
border-style: dotted;
border-color: red;
border-width: 10px;
width: 300px; /* ОБЯЗАТЕЛЬНО добавили px */
/* Твои отступы в одну строку для красоты: */
padding: 10px 20px 5px 15px;
background-color: #fffaf0; /* Добавим легкий фон, чтобы видеть границы */
}
img {
border-style: inset;
border-color: gold;
border-width: 20px;
margin: 30px;
}
</style>
</head>
<body>
<h1>Картина Шилова "Перед Венчанием"</h1>
<img src="foto.jpg" align="left" alt="Картина">
<p> class="abz">
Шилов как увидел Пчелку, так чуть и не умер от радости.
Потому что без этой Пчелки он никогда не смог нарисовать такой
замечательной картины! А может и вообще бы так и прожил никому
не известным бедным художником! И никогда бы не попал в такие знаменитые
"Дикие уроки".
</p>
</body>
</html>
А вот и наши отступе в абзаце:
Что и требовалось доказать!
Так что дерзайте, мои дорогие гении и бог вам в помощь!
Да, что еще хочу сказать. Если что непонятно - пишите на форум. Там мои друзья. И знаете, кто они? Да те же люди, которые зашли на "Дикие уроки", да так вот и подружились. Это и Алекс, и Наблюдалкин, и Фея Зима и Томми и JCDen и Student и многие другие... Присоединяйтесь! И вам помогут, и вы поможете...