ЯК зробити блоки в CSS :: Відпочинок та свята

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

Вам знадобиться

Редактор HTML коду

Інструкція

Створіть перший блок. У вигляді 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.