| Уроки HTML |
| Блоки и простые стили html |
В предыдущих уроках рассматривалась базовая работа с таблицами. Но помимо таблиц существуют блоки, на основе которых так же делается основа сайтов. Но серьёзная работа с блоками (блочная вёрстка) рассматривается в уроках CSS, а пока рассмотрим основные стилевые атрибуты для работы с блоками.
Блок обозначается тегами "<div> </div>", ему можно задать цвет заднего фона, цвет и расположение текста, цвет рамок и даже задать с какой стороны рамки будут а с какой нет.
Создадим, для начала, простой блок и зададим ему цвет и некоторые параметры для текста внутри него.
<html>
<head>
<title>Блок html</title>
</head>
<body>
<div style="height:64px; width:512px; margin: auto; background-color:#FF543D;
font-size: 22px; color: White;" align="center">
<p>Мы против дискриминации буквы «<b>Ё</b>» <b>!!!</b></p>
</div>
</body>
</html>
Мы против дискриминации буквы «Ё» !!!
Атрибут "margin: auto" ориентирует блок по центру поля.
Теперь создадим блок с рамкой, но как создать рамку вокруг всего блока вполне очевидно. Поэтому создадим блок, у которого будет только один – левый край рамки.
<html>
<head>
<title>Блок html</title>
</head>
<body>
<div style="height:76px; width:512px; margin: auto; background-color:#EDEDED;
border-left:4px solid #8B8B8B;" align="center">
<q>Целью школы всегда должно быть воспитание гармоничной личности,
а не специалиста.</q> <p align="right"><sub> А. Эйнштейн</sub></p>
</div>
</body>
</html>
Целью школы всегда должно быть воспитание гармоничной личности, а не специалиста.
А. Эйнштейн
Теги "<q> </q>" заключаю текст в кавычки (цитата).
Вы можете продолжить самостоятельно экспериментировать над блоками и их рамками.
| ◄ Предыдущий урок | Содержание | Следующий урок ► |
