HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Урок 9. Margin, padding, border

Давайте поучимся задавать свойства блоков. Тренироваться мы будем на элементах div и span.

Div - это элемент контейнером для остальных. Элемент span  создает строчный блок.

Давайте рассмотрим пример:

 

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>

    <div id="first">Это текст в тегах div с id="first".
    </div>

    <div id="second">
       <div id="third">Это текст в тегах div с id="third".</div>
       <div id="fourth">Это текст в тегах div с id="fourth".</div>
    </div>

  </body>
</html>

 

Давайте посмотрим на страницу в браузере:

css div и span

Обратите внимания что элементы div располагаются один под одним.

 

Border (граница)

Границы в css можно задавать отдельно для каждой стороны:

border-top - верхняя граница
border-right - правая граница
border-bottom - нижняя граница
border-left - левая граница

Каждая сторона границы может иметь свои характеристики. Для необходимо через дефис дописать ключевые слова: border-top-color или border-left-style.

Если Вы не собираетесь выделять конкретную сторону границы, то тогда можно воспользоваться сокращенной записью:

border-color - цвет всех границ (именные цвета, шестнадцатеричные коды цветов и десятичные коды в модели RGB)
border-width - толщина всех границ (ключевые слова: thin (тонкая граница), medium (средняя граница) и thick (толстая граница) или любая единица измерения.)
border-style - стиль всех границ (ключевые слова)

Ключевые слова style:

none - граница отсутствует
dotted - граница состоит из точек
dashed - граница в виде пунктирной линии
solid - граница отображается сплошной линией
double - граница отображается двойной сплошной линией
groove - граница отображается вдавленной объемной линией
ridge - граница отображается выпуклой объемной линией
inset - граница отображается так, что весь блок выглядит вдавленным
outset - граница отображается так, что весь блок выглядит выпуклым

Вот так выглядят разные стили границ в браузере:

css Border свойства

Сейчас давайте сами посмотрим как это работает, зададим нашему первому div-у разные границы:

#first{
  border-bottom-style:double;
  border-bottom-color:red;
  border-left-style:solid;
  border-left-width:2px;
  border-left-color:blue;
  border-right-style:solid;
  border-right-width:2px;
  border-right-color:yellow;
  border-top-style:dotted;
  border-top-color:green;
}  

Результат:

Парой возможность изменять стили каждой стороны границы очень помогают, но по факту практически все и всегда задают единый стиль. Бонусом появляется возможность пользоваться сокращенной записью border (через пробел указываем толщину, тип и цвет (только в таком порядке)):

#first, #second, #third, #fourth{
  border: 1px solid red;
}   

Сейчас границы накладываются друг на друга, так как мы не задали внешний отступ (margin):

Margin (поля)

поля создают свободное пространство вокруг блока (элемента). Поля в css, аналогично границам можно определять отдельно:

margin-top - ширина верхнего поля
margin-right - ширина правого поля
margin-bottom - ширина нижнего поля
margin-left - ширина левого поля

Можно воспользоваться сокращенной записью:

p{
  margin:5px 10px 15px 10px;  /*ширина верхнего, правого, нижнего и левого полей*/
}   

p{
  margin:5px 10px; /*ширина верхнего и нижнего полей совпадают, и ширина правого и левого полей совпадают*/
}   

p{
  margin:5px; /*ширина всех полей одинакова*/
}  

Ширину полей можно задавать не только пикселях (px), но и в % или других единицах длины. Margin может иметь отрицательное значение, парой это очень удобно. Давайте зададим всем элементам одинаковый отступ - в 10px:

#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
}   

Результат:

Мы видим, что между блоками появился внешний отступ, но текст внутри блоков прижат к границам. Давайте зададим внутренний отступ (Padding).

Padding (отступы)

Padding позволяет задать внутренний отступ (отделить содержимое блока от border). Padding можно задать для каждой стороны отдельно:

padding-top - ширина верхнего отступа
padding-right - ширина правого отступа
padding-bottom - ширина нижнего отступа
padding-left - ширина левого отступа

Задавать Padding можно в разных единицах длины или в процентах. Проценты вычисляются относительно ширины блока. Задавать можно только положительные значения.

Можно использовать сокращенную запись (аналогична записи для margin ):

#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
  padding:10px 5px;
}

Давайте зададим фон нашим элементам margin и padding:

#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
  padding:10px 5px;
}
#first, #second{
  background:yellow;
}
#third, #fourth{
  background:pink;
}

Мы видим, что фон padding совпадает с фоном блока, а фон margin - прозрачный. Теперь давайте зададим ширину и высоту нашим блокам:


#first, #second, #third, #fourth{
  border: 1px solid red;
  margin:10px;
  padding:10px 5px;
}
#first{
  background:yellow;
  width:300px;
  height:100px;
}
#second{
  background:yellow;
  width:300px;  
}
#third, #fourth{
  background:pink;
  width:270px;
  height:100px;
}  

Смотрим:

 

42

Вы узнали все способы задания полей, отступов и границ. Для закрепления рекомендуем Вам потренироваться, а если уверены в своих силах то переходите на следующий урок.

 

 

 

 

 

html ru 240x400
Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript!

В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.