Праздники События Персоны Вопрсы

Как сделать блоки в CSS

CSS - это каскадные таблицы стилей, представляющие собой язык описания внешнего вида веб-страниц. Одно из главных преимуществ CSS - это возможность замены табличной верстки на блочную.Как сделать блоки в CSSВам понадобится

Создайте первый блок. В виде HTML кода он будет выглядеть, как тег div с id ’block01’. Здесь идентификатор block01 указывает на то, что в CSS описании все свойства данного блока указаны для селектора #block01.

Опишите блок в CSS. В стилях CSS укажите название идентификатора (#block01) и в фигурных скобках опишите его параметры - ширину, позиционирование, смещение, цвет фона и т.д. Например, это может выглядеть так: #block01 {width: 150px; height: 150px; position: absolute; top:0px; left:0px; background-color: pink}. Данное описание подразумевает, что блок будет иметь в длину и ширину 150 пикселей, он будет жестко размещен в верхнем левом углу документа, а его задний фон будет окрашен в розовый цвет.

Задайте блоку относительное позиционирование. Если в описании CSS использовать не абсолютное, а относительное позиционирование, то вы сможете размещать блоки не с жесткой привязкой к сетке координат,а относительно других, уже существующих блоков. Для этого поменяйте код position: absolute; top:0px; left:0px на position:relative; top:200px; left:100px.

Задайте блоку скругление. В CSS за это отвечает инструкция border-radius. Допишите в таблице стилей следующий код: border-radius: 8px. Теперь блок будет иметь закругленные углы. Если вы хотите скруглить только некоторые углы, опишите радиус отдельно для каждого из них: border-radius: 8px 8px 0px 0px.

Задайте блоку обводку. Чтобы выделить контуры блока тонкой линией, добавьте в его CSS описание следующий код: border-top: 1px dashed black. Эта инструкция означает, что граница блока будет черного цвета и будет иметь один пиксель в толщину. При этом сама линия контура будет отображаться пунктиром (dashed - пунктиром, dotted - точками, solid - сплошной линией).

Задайте оставшиеся свойства блока. Укажите в CSS описании, какую гарнитуру нужно использовать для текста внутри блока, каким должен быть размер шрифта, его выравнивание и отступ от краев блока. Эти свойства описываются в определениях font-family, font-size, text-align и padding.

Чтобы настроить обтекание одного блока другими, можно использовать свойство float. Если выставить его значением “left”, то остальные элементы будут обтекать блок слева, а “right” - справа. Если выставить значение float, как “none” - выравнивание блока не будет задано. Свойство clear в CSS запрещает обтекание блока с правой, левой или обеих сторон и отменяет инструкцию float.

Вкурсе.Ком