CSS

CSS - Cascading Style Sheets - Каскадни Стилови Множества

Встъпителни думи

Каскадните стилови множества CSS са създадени от W3C за да се облекчи и систематизира работата на уеб дизайнерите, като им се предостави стандарт за описание изгледа на HTML/XHTML документите и удобен метод за форматиране на множество документи едновременно с един и същ стил, както и каскадно наслагване на различни стилове, съхранени във файл или вмъкнати в самия HTML-документ. Каскадното наслагване на стилове от гледна точка на браузъра става в следния ред:

• Стил по подразбиране на браузъра
• Стил от външен .css файл
• Стил от заглавната секция на HTML-документ (между head-таговете)
• Стил вложен в HTML-елемент

Където най-висок приоритет има вложения в HTML-елементът стил.

Удобство при използването на CSS е дефинирането на селектори които позволяват да се укаже стойността на някое свойство едновременно за няколко различни по вид HTML-елементи (напр.: подравняването на заглавие, параграф, таблица и картинка едновременно, центрирано). Могат да бъдат дефинирани и селектори на клас което позволява на еднакви по вид елементи да приемат различни стойности за накое свойство (напр.: Два параграфа но единият със син текст а другият с червен)

Синтаксис

Синтаксисът се състои от три части: селектор, свойство и стойност.

selector {property: value}

Обикновено селекторът е HTML елемента (тага) който желаете да дефинирате, свойството е атрибута който желаете да промените, като всяко свойство може да приема стойност. Свойството и стойността са отделени с двоеточие ":" и заградени с фигурни скоби "{}":

body {color: black}

Ако стойността value е съставена от множество думи, то поставете кавички около това множество:

p {font-family: "Times New Roman"}

Ако желаете да укажете повече от едно свойство, то трябва да отделите всяко свойство със символа точка и запетая ";". Примерът по-долу показва как се дефинира дясно подравнен параграф със син цвят:

p {text-align: right; color: blue}

За да направите стиловите дефиниции по-четливи, можете да опишете свойствата по едно на ред:

p
{
    text-align: justify;
    color: red;
    font-family: Verdana
    font-size: 10pt
}

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

h1,h2,h3,h4 
{
    color: green;
    text-aling: center
}

Свойствата на елементите могат да бъдат модифицирани за еднотипни HTML-елементи, но с различни стойности за някой техни свойства. Например параграф с дясно подравняване и параграф с централно подравняване:

p.right {text-align: right}
p.center {text-align: center}

Ще трябва да използвате атрибута class във вашия HTML-документ:

<p class="right">
Този параграф ще бъде подравнен в дясно.
</p>

<p class="center">
Този параграф ще бъде подравнен централно.
</p>

За да приложите повече от един клас над даден елемент, синтаксисът е:

<p class="center italic">
Това е параграф, който евентуално би бил подравнен центално и изобразен с наклонени букви.
</p>

Към параграфът p по-горе ще бъдат приложени класовете "center" и "italic" (обърнете внимание, че това са само имена на класове, съвпадащи с имената на стойности за свойствата text-aling и font-style)

Можете също да изпуснете таг-името, когато задавате селектор за дефиниране на стил, който ще се използва от всички HTML-елементи които са от един и същ клас. В примера по-долу, всички HTML-елементи (заглавието h1 и параграфът p) с class="justify" ще бъдат подравнени двустранно:

.center {text-align: center}

<h1 class="justify">
Това заглавие ще бъде подравнено двустранно.
</h1>

<p class="justify">
Този параграф ще бъде подравнен двустранно.
</p>

! Mozilla/Firefox не поддържат имена на класове започващи с цифра.

Прилагане на стилове към HTML-елементи с конкретни атрибути става, когато има съответствие между всички елементи, които имат атрибут с една и съща стойност, с тази описана в селектора. В примера по-долу, стиловото правило ще се приложи за всички input елементи, които имат атрибут със стойност "text":

input[type="text"] {background-color: red}

HTML-елементи могат да бъдат избирани за форматиране и чрез id-селектор. Той се дефинира със символа "#". Стиловото правило по-долу, ще търси съответствие с елемент, чийто id-атрибут има стойност "green":

#green {color: green}

Понякога може да се наложи и конкретното указване на вид селектор на HTML-елемент с определено id. Стиловото правило по-долу, ще търси съответствие с p елемент, чийто id-атрибут има стойност "first":

p#first
{
    text-align: center;
    color: blue
}

За да внесете по-голяма яснота в кода си е желателно да ползвате кратки описателни коментари, които ще са незаменим помощник в бъдеще, ако се наложат някой редакции. Коментарите се игнорират от браузърите, така че те няма да са видими в документа ви. CSS-коментарите започват с "/*" и завършват с "*/":

/* Това е коментар */
p
{
    text-align: justify;
    /* и това е коментар */
    color: red;
    font-family: verdana;
    font-size: 12pt
}