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