Вам понадобится
  • Редактор HTML кода
Инструкция
1
Создайте первый блок. В виде HTML кода он будет выглядеть, как тег div с id ’block01’. Здесь идентификатор block01 указывает на то, что в CSS описании все свойства данного блока указаны для селектора #block01.
2
Опишите блок в CSS. В стилях CSS укажите название идентификатора (#block01) и в фигурных скобках опишите его параметры - ширину, позиционирование, смещение, цвет фона и т.д. Например, это может выглядеть так: #block01 {width: 150px; height: 150px; position: absolute; top:0px; left:0px; background-color: pink}. Данное описание подразумевает, что блок будет иметь в длину и ширину 150 пикселей, он будет жестко размещен в верхнем левом углу документа, а его задний фон будет окрашен в розовый цвет.
3
Задайте блоку относительное позиционирование. Если в описании CSS использовать не абсолютное, а относительное позиционирование, то вы сможете размещать блоки не с жесткой привязкой к сетке координат, а относительно других, уже существующих блоков. Для этого поменяйте код position: absolute; top:0px; left:0px на position:relative; top:200px; left:100px.
4
Задайте блоку скругление. В CSS за это отвечает инструкция border-radius. Допишите в таблице стилей следующий код: border-radius: 8px. Теперь блок будет иметь закругленные углы. Если вы хотите скруглить только некоторые углы, опишите радиус отдельно для каждого из них: border-radius: 8px 8px 0px 0px.
5
Задайте блоку обводку. Чтобы выделить контуры блока тонкой линией, добавьте в его CSS описание следующий код: border-top: 1px dashed black. Эта инструкция означает, что граница блока будет черного цвета и будет иметь один пиксель в толщину. При этом сама линия контура будет отображаться пунктиром (dashed - пунктиром, dotted - точками, solid - сплошной линией).
6
Задайте оставшиеся свойства блока. Укажите в CSS описании, какую гарнитуру нужно использовать для текста внутри блока, каким должен быть размер шрифта, его выравнивание и отступ от краев блока. Эти свойства описываются в определениях font-family, font-size, text-align и padding.
7
Чтобы настроить обтекание одного блока другими, можно использовать свойство float. Если выставить его значением “left”, то остальные элементы будут обтекать блок слева, а “right” - справа. Если выставить значение float, как “none” - выравнивание блока не будет задано. Свойство clear в CSS запрещает обтекание блока с правой, левой или обеих сторон и отменяет инструкцию float.