Блочный элемент Div
Мы уже научились придавать HTML тэгам разные стили CSS, теперь давайте научимся группировать элементы в блоки.
Создайте HTML документ page.html с таким содержанием:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<head>
<body>
<div id='first'>Текст</div>
</body>
</html>
Затем файл style.css со следующим кодом:
#first {
background: yellow;
width: 300px;
height: 50px;
}
Результат будет таков:
Для чего это нужно?
Применения блочной верстки достаточно велико, для примера мы можем немного модифицировать этот пример:
Добавим в page.html еще один абзац:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<head>
<body>
<div id='first'><p>Первый абзац</p></div>
<div id='second'><p>Второй абзац</p></div>
</body>
</html>
Затем в файл style.css добавим для нового абзаца его стили:
#first {
background: yellow;
width: 300px;
height: 50px;
}
#second {
background: green;
width: 200px;
height: 50px;
}
В результате мы получили разное закрашивание и разную ширину для первого и второго абзаца:
