Задаване на размерите

В основата на всеки елемент, дефиниран с HTML-таг, лежи понятието блок- това е правоъгълната област от екрана, която елементът заема и е разположена под него. Задаването на размерите на блока става посредством CSS свойствата:

• width- задава хоризонтален размер;
• height- задава вертикален размер;

Стойностите на тези свойства обикновено се задават в пиксели или проценти. Формално мерните единици в CSS можем да разделим на абсолютни и относителни. В практиката най-често се използват пиксели(px), като абсолютна единица и проценти(%), като относителна. Единици за измерване на дължина:

• em- ширината на най-широката буква “m” в латинската азбука
• ex- височината на буквата “x” в латинската азбука
• in- инчове
• mm- милиметри
• cm- сантиметри
• pc- типографска мерна единица, равна на 12 пункта или 4.23 милиметра
• px- пиксели
• pt- пунктове
• %- проценти

Задаване на цвят на фона

Цвета на фона на блока можете да зададете директно някой цвят или като поставите фоново изображение. Използването на фоново изображение има приоритет- това означава, че ако едновременно зададете цвят на фона и едновременно с това поставите фоново изображение, то фоновото изображение ще покрива цвета. Последният се задава със следните свойства:

• background-color- задава цвят на фона
• background- задава произволен параметър на фона, в това число и цвят, и предоставя възможност за задаване на допълнителни параметри на фона

Стойността на цвета се задава във формат RGB (в пълна и съкратена форма).

Тип на блока

Тагът  div  заема цялата ширина на родителския елемент върху страницата, като преди и след изобразяване на неговото съдържание браузърът автоматично добавя нов ред. Впрочем по същия начин работи тагът, предназначен за управление на текст(в най-простия случай абзац).
Тагът заема такава част от дължината на реда в родителския елемент, каквато е необходима за изобразяване на неговото съдържание. Задаването на типа на блока може да реализирате с помощта на CSS свойството  display. Най-интересни са слените стойности на неговите константи:

• block- създава се преход на нов ред преди и след блока, който заема цялата ширина на родителския елемент (това е аналогично на използване на таговете  P  и  div)
• inline- блокът заема толкова място от родителския елемент, колкото е необходимо за изобразяване на неговото съдържание (аналогично на свойството по подразбиране на тага  SPAN )

Външни отстъпи

Задаването на външните отстъпи на елемента се осъществява с помощта на CSS свойството  margin  и неговите производни  margin-top, margin-bottom, margin-left, съответно отстъпи за горния, долния и левия край. Обикновено стойностите на тези свойства се задават в пиксели.

Вътрешни отстъпи

Вътрешни отстъпи най-често се използват при използване на табличен скелет на уебстраницата (на основата на тага table или на основата на тага div).
Задаването на вътрешни отстъпи става с помощта на CSS свойството  padding  и неговите производни съответно за горния, десния, долния и левия край(padding-top, padding-right, padding-bottom padding-left). Обикновено тези свойства се задават в пиксели.

Задаване на ширина, цвят и тип на рамката

Всеки елемент на уебстраницата притежава рамка, която по подразбиране не се изобразява. По правило с понятието рамка обикновено се асоциира рамката на таблица или нейните клетки. Въпреки това вие можете да задавате рамка и да променяте нейните параметри на произволен елемент от страницата. Най-масово използваните CSS свойства за работа са следните:

• border-width- задава ширина на рамката
• border-style- задава стил за линията на рамката
• border-color- задава цвета на рамката
• border- свойство, чрез което можете едновременно да задавате ширина, стил за линията и цвят на рамката

border-width и неговите производни:

Свойството  border-width  е предназначено за задаване на ширина на рамката. Може да задавате дебелина на рамката едновременно за четирите страни или за всяка поотделно. Ако трябва да дефинирате дебелина само на някоя от страните на рамката: горна, дясна, долна или лява, може да използвате съответно свойствата: border-top-width, border-right-width, border-bottom-width, border-left-width.
Стойностите, които може да приема това свойство, са:

• thin- тънка рамка;
• medium- средно дебела рамка;
• thick- дебела рамка;

Свойството border-style задава тип на рамката. Може да приема една от следните стойности:

• none - без рамка;
• hidden- без рамка, но със специфично поведение, когато се прилага към таблица(неразпространено в браузърите);
• dotted- рамка с точки;
• dashed- пунктирана линия;
• solid - непрекъсната единична линия;
• double - двойна непрекъсната линия;
• dot-dash - редуващи се точки и пунктири(неразпространено в браузърите);
• dot-dot-dash - редуващи се две последователни точки с пунктир(неразпространено в браузърите);
• wave- вълнообразна линия(неразпространено в браузърите);
• groove- вдлъбната рамка; ridge- изпъкнала рамка;
• inset- оградената област е вдлъбната; outset- оградената област е изпъкнала;