Как заработать на сайте, размещая рекламу?

Десятки авторских уроков о том, как создать и прокачать свой сайт.

Урок по CSS #7

Урок #7 – Границы, отступы, поля, размеры в CSS

Дмитрий Бохон
11.04.2014

сss-lesson38

Итак, для последней главы давайте создадим на сайте блок div, где разместим текст. Для оформления блока будем использовать класс «.oform», который будем описывать в css-файле.(Блок с картинкой удалим, чтобы он не мешал.)

Вот какой html-код страницы у вас должен быть:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<title>Веб страница </title>
</head>
<body>
<h1 > Наша страничка </h1>

<div class = “oform”> Жила-была   милая   маленькая  девочка  по  имени  Красная Шапочка.  Однажды мать послала ее  отнести  бабушке  пирожок  и горшочек  масла.  Путь  пролегал  через  лес, где она встретила соблазнителя – волка. Девочка показалась ему лакомым  кусочком. Волк  уговорил  ее  погулять  в  лесу,  погреться на солнышке и собрать цветы для бабушки. Пока девочка  развлекалась  в  лесу, волк  отправился  к  бабушке  и съел старую леди. Когда девочка наконец прибыла,  волк,  притворившись  бабушкой,  попросил  ее прилечь  рядом на кровать. Девочка вскоре усомнилась, что перед ней действительно старая леди. Тогда волк съел Красную Шапочку, очевидно,  не  прожевывая.  Но  потом  пришел  охотник  и  спас девочку, разрезав волку живот и заодно освободив бабушку. Затем Красная  Шапочка  помогла охотнику набить волчий живот камнями. Согласно другим версиям, девочка звала  на  помощь,  и  охотник убил  волка  топором  в тот момент, когда волк собирался съесть Красную Шапочку.
</div>

</body>
</html>

 сss-lesson39

Сейчас будем работать с css-файлом. Для начала давайте сделаем границы для нашего блока.  Добавим в css-файл следующий код:
. oform
{
border:3px solid #black;
}

сss-lesson40

Давайте изменим размер нашего блока по ширине до 500px:

.oform
{
width: 500px;
border:3px solid #1005ee;
}

сss-lesson41

Можно прописывать размеры в процентах:
.oform
{

width: 20%;
border:3px solid #1005ee;
}

сss-lesson43

Высота прописывается аналогично:
.oform
{
width: 20%;
height: 400px;
border:3px solid #1005ee;
}

сss-lesson44

Видите, размеры блока оказались  маленькими для текста. В этом случае нужно уменьшать размер шрифта.

Далее рассмотрим отступы (padding).

Приведем css к такому виду:
.oform
{

width: 50%;
height: 300px;
border:3px solid #1005ee;
}

сss-lesson45

Вот, что можно сделать при помощи отступов:

1). Отступ слева:

.oform
{
width: 80%;
height: 300px;
border:3px solid #1005ee;
padding-left: 70px;
}

сss-lesson46

2) Отступ справа

.oform
{
width: 80%;
height: 300px;
border:3px solid #1005ee;
padding-left: 70px;
padding-right: 70px;
}

сss-lesson47

3) Отступ сверху

.oform
{
width: 80%;
height: 300px;
border:3px solid #1005ee;
padding-left: 70px;
padding-right: 70px;
padding-top: 50px;
}

сss-lesson48

Отступ снизу записывается при помощи свойства: paddingbottom.
.oform
{
width: 80%;
height: 300px;
border:3px solid #1005ee;
padding-left: 70px;

padding-right: 70px;
padding-top: 50px;
padding-bottom: 50px;
}

сss-lesson49

На заметку! Удобно записывать все отступы в одну строчку. В нашем случае мы бы записали так: padding: 50px 70px 100px 70px; (верх, право, низ, лево)

.oform
{
width: 80%;
height: 300px;
border:3px solid #1005ee;
padding: 50px 70px 100px 70px;
}

Получилось тоже самое:

сss-lesson50

Поля margin:

Margin отличается от padding тем, что при помощи padding мы делаем отступы внутри нашего блока. А при помощи margin мы делаем отступы для нашего блока с внешней стороны.

сss-lesson51

Запись margin производится аналогично padding. Вы можете делать отступы во все стороны, используя следующие свойства :

  1. margin-left;
  2. margin-right;
  3. margin-top;
  4. margin-bottom;

Пример:

сss-lesson52

Добавим поля сверху и слева для нашего блока:

.oform
{
width: 80%;
height: 300px;
border:3px solid #1005ee;
padding: 50px 70px 100px 70px;
margin:150px 0 0 70px;
}

сss-lesson53

Насколько «горяча» статья?

Чуть не замёрзНеплохоХорошоВэри Гуд!Статья огонь!
(Нет рейтинга. Голосуй!)
Загрузка...Загрузка...
Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получите базовые знания
ЧТОБЫ ПОЛУЧИТЬ КНИГУ,
ВВЕДИТЕ ВАШ E-MAIL В ФОРМЕ НИЖЕ
1
Узнайте, как заработать на сайте
2
Запустите свой сайт
3
Мы Вконтакте и YouTube
Загрузка карусели...