Инструкция
1
Есть два приема, которые позволят вам самостоятельно разработать дизайн блока: с внедрением каскадных таблиц стилей в документ или с подключением их из внешнего ресурса. И тот, и другой дает один и тот же результат, поэтому принципиальной разницы между ними нет. В первом случае вставьте в любое место файла style.css следующий код:
.block1 {
}
Block1 – название блока, можно написать любое другое. Между фигурными скобками задайте параметры в формате: наименование атрибута>двоеточие>значение>точка с запятой (в т.ч. ставится перед фигурной скобкой). Обычно используются следующие элементы:
- width – ширина (500px, 100% и др.);
- height – высота (200px, 25% и др.);
- background – цвет фона (Yellow, Red, #000000);
- padding – отступы вокруг содержимого внутри блока (0px, 20%);
- margin – внешние отступы от блока (15px, 40%);
- border – рамка (border: solid 0px black;);
- float – выравнивание (left, right);
- border-radius – скругление углов (border-radius:10px;).
2
Во втором варианте использования CSS, пропишите стиль между тегами <head> и </head>:
<style type="text/css">
.block1 {
}
</style>
И добавьте нужные параметры.
3
Вставьте блок в нужное место на сайте при помощи команды:
<div class="block1"> Блок 1</div>
Сохраните и обновите страницу, он должен появиться. Имейте в виду, что выравнивание по высоте может зависеть от степени наполненности содержимым. Например, если вы задали 300px, а прописали всего одну строку текста, он будет отображаться не полностью. Исправить это можно, например, при помощи таблицы с нужными параметрами, которую следует поместить внутрь блока, т.е. между тегами <div class="block1"> и </div>. А чтобы границы не была видна, вставьте атрибут border="0" <table border="0">.