Начнем с простого. Напишем такой код.
<h2>Кто сказал Мяу</h2>
<p>Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.</p>
Выглядеть текст будет так:
Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.
Ничего необычного. Внесём небольшую правку и сделаем блоки цветными.
<style>
h2 {
background: #569099;
}
p {
background: #cad8d0;
}
</style>
Теперь текст выглядит так:
Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.
Мы видим, что между заголовком и параграфом есть зазор. Устраняем его при помощи свойства margin. Для заголовка мы сделаем нулевой отступ снизу (margin-bottom), а для параграфа нулевой отступ сверху (margin-top):
<style>
h2 {
background: #569099;
margin-bottom:0;
}
p {
background: #cad8d0;
margin-top:0;
}
</style>
Смотрим на результат:
Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.
Мы получили интересный эффект. Получился своеобразный информационный блок. Теперь закруглим верхние уголки у заголовка и нижние углы у параграфа.
<style>
h2 {
background: #569099;
margin-bottom:0;
border-radius: 20px 20px 0 0;
}
p {
background: #cad8d0;
margin-top:0;
border-radius: 0 0 20px 20px;
}
</style>
Смотрим на результат:
Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.
Ага, мы сразу видим шероховатости. Нужно подвинуть текст от края, чтобы закругления не мешали словам. Заодно сделаем фиксированную ширину у наших блоков.
<style>
h2 {
background: #569099;
margin-bottom:0;
border-radius: 20px 20px 0 0;
padding: 10px;
color: #fff;
width: 500px;
}
p {
background: #cad8d0;
margin-top: 0;
border-radius: 0 0 20px 20px;
padding: 10px;
width: 500px;
}
</style>
Смотрим еще раз:
Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.
Естественно, при желании вы можете добавить обводку, тени и другие красивости. Используя данную технику на div, вы получаете в свое распоряжение красивые информационные блоки, которые можно использовать, например, в сайдбаре. Удачи!