Пожалуй, начну с простого, и расскажу об одном из способов создания стандартного блока, состоящего из "шапки" и основной части.
Для этого, нам потребуется выполнить ряд простых действий:
Основой нашего блока будет CSS, поэтому
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/* Задание стилей всего блока */
#block{
width: 250px; /* Задание ширины блока */
}
/* Задание стилей заголовка */
.head {
text-align:center; /* Выравнивание заголовка по центру блока */
color: #fff; /* Задание цвета заголовка (тут - белый) */
background-color: #0274b0; /* Задание цвета фона (тут - синий) */
border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
font-size: 15px; /* Задание размера шрифта заголовка */
font-weight:bold; /* Задание полужирного начертания шрифта */
padding: 7px 0 7px 0; */ Задание верхнего и нижнего отступов текста заголовка от границ блока */
}
/* Задание стилей основного блока */
.body {
color:#333; /* Задание цвета текста */
background-color: #d2efff; /* Задание цвета фона */
border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
border-top-style: none; /* Удаление верхней границы блока */
font-size: 12px; /* Задание размера шрифта */
padding: 5px; /* Задание отступа в 5 пикселей со всех сторон */
}
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="block">
<div class="head">
ПРОСТОЙ БЛОК
</div>
<div class="body">
Уроки вёрстки.<br>
Пожалуй, начну с простого, и расскажу об одном из способов создания стандартного блока, состоящего из "шапки" и основной части...
</div>
</div>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
ДемоПо материалам сайта:
Российская школа CSS
