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

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

Същност и характеристики на езика

CSS позволява да се определя как да изглеждат елементите на една HTML страница – шрифтове, размери, цветове, фонове, и др. CSS кодът се състои от последователност от стилови правила, всяко от които представлява селектор, последван от свойства и стойности. Например в следния CSS код:

p {font-size: 9pt;} има едно правило. То се състои от селектора p и свойството font-size, на което е зададена стойност 9pt. Това правило ще направи размера на шрифта във всички параграфи 9 точки.

Селектори

Селекторите (от английски: select, като при "select color") в CSS се използват като наименуват типа селекция и покажат съответно към кои елементи на HTML документа трябва да бъде прилаган съответният стил. Съществуват много видове селектори. Някои селектори позволяват постигане и на динамичност на страницата, макар и в определена степен. Например само с помощта на CSS могат да бъдат направени падащи (drop-down) или пък изскачащи менюта (за мобилни устройства), и особено за хипервръзки, при които може да се задава цвета на линка, и също при посочване на линка, той да променя цвета си и др.

Видове Селектори

В CSS има няколко вида селектори:

I. Селектори за класове – с помощта на CSS може да създавате собствени класове за всеки един селектор. След дефиниране на класа, то всички селектори, на които е присвоен този клас, ще показват един и същ ефект. Използва се следният синтаксис:

селектор.клас {атрибут: стойност}

Пример:

Нека имаме клас заглавия h1 със син цвят и клас параграфи p, позиционирани вляво.

Името на класа е произволно, но за удобство ще използваме blue. Следователно целият код ще изглежда така: h1.blue {color: #0000ff} p.left {text-align: left}

С това класовете са дефинирани и трябва да се поместят в секцията head на основната HTML страница, като се затворят между таговете <style> и </style>:

<style type="text/css"> h1.blue {color: #0000ff} p.left {text-align: left} </style>

Вече дефинираните класове, могат да се използват и в тялото (body-то) на страницата (body) чрез следния код: <h1 class="blue"> Синьо Заглавие </h1>

Пример: <html> <head> <title>I. Класови селектори</title> <meta http-equiv=Content-Type content="text/html; charset=windows-1251" /> <style type="text/css"> h1.blue {color: #FFFF00} p.left {text-align: left} </style> </head> <body> <h1 class="blue"> Морето е синьо </h1> <p class="left"> В Бургас лятото е топло и има много гларуси </p> <h1> Статия 2 </h1> <h1 class="blue"> ...и небето е синьо </h1> </body> </html>

Класовете могат да бъдат декларирани и по друг начин – без обвързване с определен селектор: .клас {атрибут: стойност}

В този случай гореописаният код ще изглежда така: .blue {color: #0000ff} .left {text-align: left}

II. ID селектори – с помощта на този вид селектори могат да се декларират допълнителни параметри, които не са указани в декларираните класове. Имената отново са произволни. Използва се следният синтаксис: #id {атрибут: стойност} /или също селектор#id {атрибут: стойност}/

След добавяне на id селектор в горния пример:

<head> <title>css</title> <meta http-equiv=Content-Type content="text/html; charset=windows-1251" /> <style type="text/css"> .left {text-align: left} #rb {color:#ff0000; font-weight:bold} </style> </head>

В тялото на страницата можем да въведем следния код: <p class="left" id="rb"> Кръвта е тъмно червена и тече от ляво надясно </p>

Може да се въведе и параграф без декларирания клас: <p id="rb"> Хубавото вино е червено, тъмно червено </p>

III. Контекстуални селектори – комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им. Използва се следния синтаксис: 1-ви селектор 2-ри селектор... {атрибут: стойност}

Например в секцията head може да напишем кода:

<head> <title>css</title> <meta http-equiv=Content-Type content="text/html; charset=windows-1251" /> <style type="text/css"> p i b {color:#00ff00} </style> </head>

Ако след това в тялото на страницата напишем: <p><i><b> Жабите са зелени и наклонени </b></i> ..а рибите не са </p>

то ефектът ще бъде удебелен и наклонен зелен текст, между и и стандартен текст за останалата част.

Групиране на селектори
Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е: селектор1,селектор2,селектор3,... {атрибут: стойност}

Пример: <head> <title>Няколко ефекта на един ред код</title> <meta http-equiv=Content-Type content="text/html; charset=windows-1251" /> <style type="text/css"> h1,h2,h3,p,del {color: #ff0000} </style> </head>

Въведени са селекторите h1,h2,h3, този за параграф и за зачертаване на текст, като на всички им е зададен червен цвят. Ако след това в тялото на HTML документа се въведе:

<del> Червен Зачеркнат Текст </del>

то този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.

Коментари в CSS – в HTML се използва: 
В CSS коментарът трябва да е затворен между наклонена черта със „звезда“ и „звезда“ с наклонена черта: /*Закоментиран текст*/.

Свойства и стойности

Свойство представлява конкретна характеристика на елемент от HTML документа, а стойност е стойността, която се дава на това свойство. Например на свойство за размер може да се даде стойност число в дадена мерна единица, а за свойство цвят – стойност, която представлява стандартното наименование на цвета или hex стойности. от рода на #ffffff (бяло) до #000000 (черно).

Списък на основните свойства, използвани при CSS
Свойство	Значение	Възможна стойност	Пример
color	Цвят на текста	Едно от 16-те имена на цветовете, дефинирани в HTML 4.0: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Цвят в RGB формат: color:rgb (R,G,B)	color:blue color:rgb(255,255,255) color:rgb(0,0,0)
background-color	Цвят на фона	Същите стойности, както при color	background-color:black
text-align	Подравняване на текста	left, right, center, justify	text-align:center
font-style	Стил на шрифт	normal, italic, oblique	font-style:italic
font-weight	Дебелина на текста	normal, lighter, bold, bolder	font-weight:bold
font-size	Размер на текста	Стойности в пиксели, ем, процент или име: large, small, x-small, x-large	font-size:110 % font-size:0.8em font-size:20px font-size:x-large
font-family	Шрифт	serif, sans-serif, cursive, fantasy, monospace, Arial, Courier, „Times New Roman“	font-family:sans-serif font-family:"Times New Roman"
list-style-type	Водещ знак пред ред на списък	decimal, upper-alpha, lower-alpha, upper-roman, lower-rman	list-style-type:square list-style-type:lower-roman
width	Ширина на елемент (напр.таблица)	Процент от ширината на страницата	width:50%
border	Рамка на таблица	Дебелина в пиксели и тип на рамката: solid, dotted, dashed, double, groove	border:3px solid
margin	Разстояние от всички страни на елемента	auto	margin:auto
margin-left	Разстояние от лявата страна на елемента	Стойности в ем	margin-left:1em
margin-right	Разстояние от дясната страна на елемента	Стойности в ем	margin-right:3em
margin-top	Разстояние от горната страна на елемента	Стойности в ем	margin-top:5em
margin-bottom	Разстояние от долната страна на елемента	Стойности в ем	margin-bottom:2em
border-collapse	Вид рамка на таблица	collapse	border-collapse:collapse
link	Псевдокласове на елементна котва	a:link	a:link{color:black}
visited		a:visited
hover		a:hover
active		a:active
float	Относително местоположение на страницата	left, right	float:left;
clear	Забрана за заобикаляне на елементи отляво или отдясно	left, right, both	clear:both

Всички видове стойности в CSS
Синтаксис	Пример	Допълнителна информация
px	`font-size:9px`	Точно определяне на размера. Не е препоръчително при използването му в border-radius или други свойства от този тип.
em	`font-size:16px; line-height:1.5em /24px/16/`	Определяне на размера спрямо размера на шрифта на бащиния елемент. Когато шрифта има размер 16px и се приеме за 1em, тогава размера на всеки останал елемент който се определя чрез em се умножава по стойността си. Пример: при размер на шрифта 10px, 1em = 10px; 2em = 20px. Това е най-добрата модерна техника за определяне на размери, поради запазването на съотношението между елементите.Em стойността е и приета за W3C стандарт
%	`font-size:100%`	Използва се при сайтовете с подвижен строеж Пример: при промяната на ширината на екрана, елемента се намира на х% от съседния елемент (`margin-left:10%;`)
in	`font-size:0,09in`	Мерната единица инч
cm	`font-size:0.3cm`	Мерната единица сантиметър
mm	`font-size:8mm`	Мерната единица милиметър
ex	`font-size:16px; line-height:3ex`	X-височината на шрифта. (Х-височината е приблизително половината от шрифта)
pt	`font-size:16pt;`	1pt = 1/72in (1/72 инча) = 0,0138888889 инча
pc	`font-size:16pc;`	Пика. 1pc = 12 points

Задаване на стилове на 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), които улесняват работата и позволяват допълнителна функционалност като наследяване, задаване на променливи и др.

Вижте също

Общомедия

Общомедия разполага с мултимедийно съдържание за

CSS.

HTML
Acid

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

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