CSS е каскадна таблица със стилове, която е език за описване на външния вид на уеб страниците. Едно от основните предимства на CSS е възможността да се замени оформлението на таблицата с оформление на блока.
Необходимо е
Редактор на HTML код
Инструкции
Етап 1
Създайте първия блок. В HTML форма тя ще изглежда като div тагове с идентификатор 'block01'. Тук идентификаторът block01 показва, че в описанието на CSS всички свойства на този блок са посочени за селектора # block01.
Стъпка 2
Опишете блока в CSS. В CSS стиловете посочете името на идентификатора (# block01) и в фигурни скоби опишете параметрите му - ширина, позициониране, отместване, цвят на фона и т.н. Например, може да изглежда така: # block01 {width: 150px; височина: 150px; позиция: абсолютна; отгоре: 0px; вляво: 0px; фон-цвят: розов}. Това описание предполага, че кутията ще бъде с дължина 150 пиксела и ширина 150 пиксела, тя ще бъде строго позиционирана в горния ляв ъгъл на документа и нейният фон ще бъде оцветен в розово.
Стъпка 3
Дайте на блока относително позициониране. Ако използвате не абсолютно, а относително позициониране в описанието на CSS, тогава можете да поставяте блокове не с твърдо щракване към мрежа от координати, а спрямо други вече съществуващи блокове. За да направите това, променете позицията на кода: absolute; отгоре: 0px; вляво: 0px по позиция: относителна; отгоре: 200px; вляво: 100px.
Стъпка 4
Дайте на блока закръгляване. В CSS за това е отговорът на границата-радиус. Добавете следния код към вашата таблица със стилове: border-radius: 8px. Блокът вече ще има заоблени ъгли. Ако искате да закръглите само някои ъгли, опишете радиуса поотделно за всеки от тях: border-radius: 8px 8px 0px 0px.
Стъпка 5
Дайте удар на блока. За да подчертаете контура на блок с тънка линия, добавете следния код към неговото CSS описание: border-top: 1px пунктирано черно. Тази инструкция означава, че границата на блока ще бъде черна и ще бъде с дебелина един пиксел. В този случай самата контурна линия ще се покаже като пунктирана линия (пунктирана - пунктирана линия, пунктирана - точки, плътна - плътна линия).
Стъпка 6
Задайте останалите свойства на блока. Посочете в описанието на CSS какъв шрифт трябва да се използва за текста вътре в блока, какъв трябва да бъде размерът на шрифта, подравняването и отстъпът от краищата на блока. Тези свойства са описани в определенията font-family, font-size, text-align и padding.
Стъпка 7
Можете да използвате свойството float, за да персонализирате потока на един блок над друг. Ако го зададете на „ляво“, тогава останалите елементи ще се движат около блока вляво и „вдясно“- вдясно. Ако зададете плуващата стойност като „none“, подравняването на блока няма да бъде зададено. Свойството clear в CSS предотвратява потока на блока отдясно, отляво или от двете страни и заменя оператора float.
