Блоки в CSS

2014-05-25 / Вр:21:09 / просмотров: 20136

Что такое блоки HTML?

Блоки в HTML – это элементы, которые не могут находиться на одной строке с другими блоками и они отделяются абзацами. К блочным элементам относят:
заголовки – <h1>...<h6>
параграфы – <p>
элементы – <div>
Не блочным элементами называют элементы, которые могут находиться на одной строке с другими не блочными элементами и они не отделяются абзацами.
К не блочным элементам относят:
выделить текст жирным – <strong>
выделить текст курсивом –<em>
подчеркнуть текст – <u> и т.д.

С помощью CSS блочную структуру HTML можно расширить и вы в этом убедитесь, дочитав статью до конца.

Блоки в CSS

Для создания верстки сайта я использую блок DIV, хотя другие веб-мастера используют и другие теги. А в блок DIV, как в контейнере, я размещаю необходимые мне элементы, такие как картинки, текст, заголовки, ссылки и т. д. Мне кажется, так удобней.
Для расширения возможностей блока для тега DIV добавляют атрибут class или id с именем селектора.

Ладно, все это теория, которая тяжело воспринимается без практики. Предлагаю сразу приступить к примерам и разъяснениям.

Блок создается двумя способами.
○ 1-ый способ:

в HTML (class )

<div class="blok1">здесь содержание блока</div>

в CSS

.blok1
{
  /* Здесь стили в CSS */
}

○ 2-ой способ:

в HTML (id)

<div id="blok1">здесь содержание блока</div>

в CSS

#blok1
{
/* Здесь стили в CSS */
}

На практике я использую первый способ.

Рамка блока в css

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

Схема:

border:толщина рамки вид рамки цвет рамки;

Пример:

border:5px dotted #cc0000;

Итак, создадим в HTML блок с классом «blok1».

<div class="blok1">
Верь в лучшее, ожидай худшее.
</div>

Теперь в CSS зададим стиль блоку с классом «blok1»

.blok1
{
 border:5px dotted #cc0000;
}

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style ENGINE="text/css">
 .blok1
{
 border:5px dotted #cc0000; /* рамка блока */
}
 </style>
 </head>
 <body>
 <div class="blok1">
 Верь в лучшее, ожидай худшее.
 </div>
 </body>
</html>

Результат:

Рамка блока в css

Как видите, блок стал видим для глаза – мы выделили его точечной рамкой.

Поля (margin) и отступы (padding) блока

Чтобы задать расстояние от блока, в CSS используют MARGIN.

Поля (margin) и отступы (padding) блока

Пример:

margin:50px;

Это значит, что расстояние от блока со всех сторон будет 50px.

Чтобы задать расстояние от блока к каждой стороне с разными значениями, используют:

top – верхняя сторона

right – правая сторона

bottom – нижняя сторона

left – левая сторона

Пример:
margin-top:50px;
margin-right:20px;
margin-bottom:80px;
margin-left:150px;

Упрощенный способ:

margin:50px 20px 80px 150px;

Схема:

margin: верхний правый нижний левый;

Чтобы задать расстояние внутри блока, в CSS используют PADDING.

Поля (margin) и отступы (padding) блока

Пример:

padding:50px;

Это значит, что внутри блока со всех сторон будет отступ от границы 50px.

Чтобы задать расстояние внутри блока к каждой стороне с разными значениями, используют:

top – верхняя сторона

right – правая сторона

bottom – нижняя сторона

left – левая сторона

Пример:

padding-top:50px;
padding-right:20px;
padding-bottom:80px;
padding-left:150px;

Упрощенный способ:

padding:50px 20px 80px 150px;

Схема:

padding: верхний правый нижний левый;

Давайте теперь все соберем вместе и посмотрим, что в итоге у нас получится:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
border:2px dotted #cc0000;
padding:20px; /* расстояние внутри блока */
margin:50px 20px 80px 150px; /* расстояния от блока */
}
.blok2
{
border:2px dotted #cc0000;
padding:20px;
margin:50px 20px 80px 150px;
}
 </style>
 </head>
 <body>
 <div class="blok1">
 Верь в лучшее, ожидай худшее. (Блок№1)
 </div>
<div class="blok2">
 Верь в лучшее, ожидай худшее. (Блок№2)
 </div>
 </body>
</html>

Результат:

Поля (margin) и отступы (padding) блока

Высота(height) и ширина(width) блоков

Высота и ширина блоков автоматически (по умолчанию) выставляется по размеру картинки или текста. Но высоту и ширину блока в CSS можно регулировать при помощи свойств height и width.

HEIGHT - высота блока (задается в px или %);

WIDTH - ширина блока (задается в px или %).

Так как я уже говорил выше, я использую в качестве блоков элемент DIV, и потому все примеры я буду применять только к элементу DIV.

.blok1
{
height: 150px; /* высота блока */
width: 500px; /* ширина блока */
border:2px dotted #cc0000;
}

Теперь блок с классом «blok1» будет с фиксированной шириной в 500 px и высотой 150 px.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
height: 150px; /* высота блока */
width: 200px; /* ширина блока */
border:2px dotted #cc0000;
padding:20px;
margin:50px 20px 80px 150px;
}
 </style>
 </head>
 <body>
 <div class="blok1">
 Верь в лучшее, ожидай худшее.
 </div>
 </body>
</html>

Результат:

Высота(height) и ширина(width) блоков

Резиновый блок

Если вы хотите сделать резиновый блок, так, чтобы он растягивался по длине монитора, тогда вместо px, нужно указать %. Только помните: весь монитор – это 100%.

.blok1
{
width: 90%; /* ширина блока */
border:2px dotted #cc0000;
}

Теперь блок с классом «blok1» будет резиновая ширина в 90% от размера монитора.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
width: 100%; /* ширина блока */
border:2px dotted #cc0000;
}
 </style>
 </head>
 <body>
 <div class="blok1">
 Верь в лучшее, ожидай худшее.
 </div>
 </body>
</html>

Результат:

Резиновый блок

Фон блоков

Как сделать фон в CSS я писал тут. Фон блока делается аналогично.

background: #00FF00;

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
background: #00FF00;
height: 150px;
width: 300px;
border:2px dotted #cc0000;
padding:20px;
margin:50px 20px 80px 150px;
}
 </style>
 </head>
 <body>
 <div class="blok1">
 Верь в лучшее, ожидай худшее.
 </div>
 </body>
</html>

Результат:

Фон блоков

Тень блока в CSS

box-shadow

Чтобы создать тень блока, воспользуйтесь таким правилом box-shadow

Схема:

box-shadow

1 – сдвиг тени по горизонтали. Минусовое значение – это влево. Плюсовое значение – это вправо.

2- сдвиг тени по вертикали. Минусовое значение – это вверх. Плюсовое значение – это вниз.

3 – распыление тени. Значение «0» - это самая четкая тень. Значение «100» - сильно распыленная тень.

4 – размер тени. Минусовое значение – это тень в меньшую сторону. Плюсовое значение – это тень на увеличение.

5 – цвет тени.

Пример:

.blok1
{
box-shadow: -2px 23px 42px -26px #000000;
}

Результат:

Тень блока в CSS

Если добавить inset, тогда тень станет внутренней

Пример:

.blok1
{
box-shadow: -2px -34px 77px -42px #000000 inset;
}

Результат:

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
box-shadow: -2px 23px 42px -26px #000000;
height: 150px;
width: 300px;
border:1px solid #ccc;
padding:20px;
}
 </style>
 </head>
 <body>
 <div class="blok1">
 Верь в лучшее, ожидай худшее.
 </div>
 </body>
</html>

Вкратце про тень блока я рассказал. Думаю, теме «Тень блоков» нужно будет посвятить целую статью с оригинальными примерами и с готовым кодом.

Выравнивание блока по центру CSS

Чтобы выровнять блок по центру, я всегда использую свойство margin.

margin: 0 auto;

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1
{
margin:0 auto;
box-shadow: -2px 23px 42px -26px #000000;
height: 150px;
width: 300px;
border:1px solid #ccc;
padding:20px;
}
 </style>
 </head>
 <body>
 <div class="blok1">
 Верь в лучшее, ожидай худшее.
 </div>
 </body>
</html>

Результат:

Выравнивание блока по центру CSS