CSS (Cascading Style Sheets) е език за описание на стилове (език за стилови листове, style sheet language) – използва се основно за описване на представянето на документ, написан на език за маркиране. Най-често се използва заедно с HTML, но може да се приложи върху произволен XML документ. Официално спецификацията на CSS се поддържа от W3C.

CSS е създаден с цел да бъдат разделени съдържанието и структурата на уеб страниците отделно от тяхното визуално представяне. Преди стандартите за CSS, установени от W3C през 1995 г., съдържанието на сайтовете и стила на техния дизайн са писани в една и съща HTML страницата. В резултат на това HTML кода се превръща в сложен и нечетлив, а всяка промяна в проекта на даден сайт изисквала корекцията да бъде нанасяна в целия сайт страница по страница. Използвайки CSS, настройките за форматиране могат да бъдат поставени в един-единствен файл, и тогава промяната ще бъде отразена едновременно на всички страници, които използват този CSS файл.

Noun

Задаване на стилове на HTML документ

Има 3 начина да се зададе стил на HTML документ.

Вграден стил на елемента

Зададеният по този начин стил се нарича inline. Представлява записване на стилова информация в атрибута style на даден таг. Полученият стил е валиден директно само за елемента, на който е зададен (въпреки това негови поделементи могат да го наследят при определени условия). Този метод има редица ограничения, тъй като не позволява използването на CSS селектори.

<h2 style="font-size: 10pt; color: blue;">Hello</h2>

Блок със стилове в документа

Зададеният по този начин стил се нарича internal. Представлява блок със стилове, затворен в таг <style>. Този таг трябва да е поставен в заглавната част на HTML документа (тага <head>).

Файл със стилове

Зададеният по този начин стил се нарича external. Представлява самостоятелен файл, който се състои от стилове и към него е направено обръщение в HTML документа. Това е единственият способ, който отговаря на идеята за отделяне на съдържание от оформление.

Указването на такъв файл се случва между <head> таговете и има следният синтаксис:

<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />

Могат да бъдат вкарани неограничен брой файла, но е препоръчително броят им да е максимално ограничен, заради бавното зареждане на уеб страницата.

Позициониране

CSS 2.1 задава три възможни схеми за позициониране:

Нормален поток

Генерираните от елементите кутии се позиционират в зависимост от контекста (блоков или поредов форматиращ контекст за кутия, но не и двата едновременно). Съществува възможност за относително позициониране на блокови и поредови кутии.

Плаваща схема

Кутията първоначално се позиционира според нормалната потокова схема, а след това се отмества наляво/надясно в зависимост от указаната стойност.

Абсолютно позициониране

Кутията изцяло се премахва от нормалния поток и се позиционира според зададените координати спрямо съдържащия я блок.

Позиция: горе, долу, ляво и дясно

Има четири възможности за свойството position. Ако даден елемент не е static, то следните свойства top, bottom, left, и right позволяват да му се зададат отстояния и позиция.

Статичен static: Стойност по подразбиране, която поставя елемента в нормален поток.

#div-1 {
position:static;
}

Релативен relative: Относителна позиция спрямо статичното местоположение на елемента.

#div-1 {
position:relative;
top:20px;
left:-40px;
}

Абсолютен absolute: Определя абсолютно позициониране. Елементът се позиционира по отношение на най-близкия си нестатичен предшественик.

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

Фиксиран fixed: Елементът е абсолютно позициониран на екрана във фиксирано положение, това е валидно дори и когато документът се скролира.

Плаващи и прозрачни елементи

Една от три различни стойности може да бъде присвоена на свойството float. Абсолютно- или фиксирано- позиционирани елементи не могат да бъдат плаващи. Други елементи обикновено се носят около плаващи такива освен ако не са възпрепятствани от свойството clear.

Ляв left: Елементът плава отляво на линията, на която би се появил, други елементи може да се застанат от дясната му страна

#div-1a {
float:left;
width:150px;
}

#div-1b {
float:left;
width:150px;
}

Десен right: Eлементът плава отдясно на линията, на която би се появил, други елементи може да се застанат от лявата му страна

#div-1a {
float:right;
width:200px;
}

Прозрачен clear: Принуждава елементът да се появи зад прозрачно ('clear') плаващи елементи отляво (clear:left), отдясно (clear:right) или и от двете страни (clear:both).

#div-1a {
float:left;
width:190px;
}
#div-1b {
float:right;
width:190px;
}
#div-1c {
clear:both;
}

Версии

Съществуват 3 основни версии на езика CSS + една, която още не е поддържана от основните браузъри. За всяка от тях е разработен специален тест, чрез който може да се провери дали даден web браузър поддържа съответната версия на езика. Всяка следваща версия разширява възможностите на езика. Могат да се използват и разширения на CSS (Sass, Less) или фреймуърци(Foundation Zurb), които улесняват работата и позволяват допълнителна функционалност като наследяване, задаване на променливи и др.

Вижте също

HTML
Acid

Външни препратки

Cascading Style Sheets на английски на сайта на World Wide Web Consortium
Cascading Style Sheets, ниво 1, превод на български от 1999 г. на сайта на World Wide Web Consortium (друг превод от 2010: Cascading Style Sheets на български език)