CSS - граматични правила

Как се задават команди в CSS

Командите в CSS могат да се обобщят по следния начин:

селектор {свойство:стойност}

Обърнете внимание, че свойството е отделено от стойността си с двоеточие, а самата двойка думи е заградена с големи скоби: {}

Под селектор се разбира елемента, върху който ще се наложи указания стил. Това често е HTML елемент, но може да е class или id селектор (за тези селектори - малко по-късно). Ето и един конкретен пример:

p {text-align:center}

Със селектор p стилът се налага над всички параграфи, text-align е свойството за подравняване на текста на страницата, а конкретната стойност (center) показва, че това подравняване трябва да е центрирано. С други думи тази CSS команда означава "центрирай текста на всички параграфи". Вижте пример.

Ако стойността представлява две и повече думи, те трябва да се заградят с кавички. Следният пример задава шрифт Times New Roman за всички параграфи:

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

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

h1 {line-height: 2em} е правилно

h1 {line-height: 2 em} е неправилно.

Вижте горния пример в действие.

Указване на повече от едно свойство за даден елемент

Можете да зададете повече от едно свойство за даден елемент. Трябва само да разделите отделните двойки свойство:стойност с точка и запетайка. Следната команда задава едновременно три свойства на заглавията от типа h1 (червен цвят, удебелен шрифт и подчертаване):

h1 {color: red; font-weight: bold; text-decoration: underline}

За край на CSS командата се приема затварящата скоба, а не края на реда. Това Ви позволява да организирате командите по малко по-четлив начин:

h1 {
color: red;
font-weight: bold;
text-decoration: underline;
}

Можете да се убедите в предимствата на добре организирания код в следния пример.

Едновременно указване на стил за няколко елемента

Ако за няколко елемента искате да зададете общи свойства, можете да съкратите кода като групирате елементите и укажете стила за групата като цяло. Следната команда указва заглавията от типа h1, h2 и h3 да бъдат показани с шрифт Courier New и в син цвят :

h1, h2, h3 {
color:blue;
font-family:"Courier New";
}

(вижте и редактирайте горния пример)

Селектор тип class

Ако използвате за селектор HTML елемент (напр. p), то указаният стил ще бъде наложен над всички елементи от този вид (в случая параграфи). Можете да наложите стил над избрана част от тези елементи като им дадете име от вида class и в селектора след името на елемента добавите точка (.) и името на класа.

Например ако искате някои параграфи да бъдат с удебелен шрифт, а други - със зелен цвят, можете да укажете това по следния начин:

p.udebelen {font-weight: bold}
p.zelen {color: green}

Сега всеки параграф, за който е указан клас "udebelen" ще бъде с удебелен шрифт, а параграфи от клас "zelen" ще бъдат зелени:

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

Елементите могат да принадлежат едновременно към повече от един клас. Имената на различните класове, които задавате за даден елемент се отделят само с интервал. Това Ви позволява да комбинирате стилове за различни класове:

<p class="udebelen zelen"> Този парграф ще бъде едновременно зелен и с удебелен шрифт </p>

Вижте как изглеждат тези параграфи в примера опитай сам.

Ако използвате класовия селектор без името на елемента (т.е. само с точка и името на класа), то дори различни елементи, за които е указан един и същи клас, ще получат същия стил:

<h1 class="zelen"> Зелено заглавие h1 </h1>
<h2 class="zelen">Зелено заглавие h2 </h2">

Двата вида заглавия, h1 и h2, ще бъдат зелени ако CSS селекторът е указан само с името на класа (не забравяйте символа за клас - точка):

.zelen {color:green}

В примера опитай сам ще видите и малко по-развит случай на подобна употреба на CSS команда за клас.

Селектор тип id

Вместо за цял клас, можете да укажете стил за индивидуален елемент. Това се прави със селектор от типа id, указван със знак #:

#zachertan {text-decoration:line-through}

С това елемент, който носи идентификатор zachertan ще изглежда зачертан, напр.

<p id="zachertan"> това е зачертан текст </p>

Идентификатор от типа id с дадено име може да се използва само за един елемент, т.е. само един параграф може да носи името id="zachertan". Ако искате повече параграфи да използват същия стил, ще трябва да използвате class вместо id: вижте пример опитай сам.

Коментари в CSS

Можете да добавяте коментари в CSS файла, като ги оградите със символите
/* и */ например:

p {text-transform:capitalize}
/*Команда за превръщане на началната буква на всяка дума в главна */

Коментарите са полезни за ориентиране какво прави определена команда. Понеже CSS команди, включени между символите за коментар, не се изпълняват, друга честа употреба на коментарите е да се спре действието на дадена команда, без тя да бъде изтривана: опитай сам .