HTML & CSS за начинаещи (част 26): Как да достъпите селекторите (1)

Селекторите определят по кои начини стиловете на CSS се присвояват на HTML елементите. При определена дефиниция, първо се посочва името на елемента, който селекторът трябва да достъпи. Самото деклариране се извършва в скоби. В рамките на декларация може да бъдат посочени едно или повече свойства. Общият синтаксис изглежда по следния начин:

Селектор {
   Property1: Value;
   Property2: Value;
   Property3: Value;
}

Такава дефиниция вече сте срещали в предишния урок.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Внимавайте внимателно, всяка декларация трябва да завършва със точка и запетая.

Преглед на наличните селектори

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

Най-лесният начин да се зададат стилове в рамките на HTML документ е с елементния селектор.

Чрез следния синтаксис цветът черен е зададен на всички елементи p.

p { 
   color: #009966; 
}

Ако желаете да зададете същия стил на няколко елемента, това също е възможно.

В този случай просто изписвате съответните елементи последователно, разделени със запетаи.

p, h1,  li { 
   color: #000; 
}

Можете също така да зададете на елементи няколко стилове. При това стиловете се записват последователно с точка и запетая.

p { 
   color: #000; 
   background-color: red;
}

Съчетаването на споменатите варианти също е възможно.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Резултатът може да изглежда така:

Области с няколко елемента

Често се налага да форматирате област, която се състои от няколко HTML елемента. За такива случаи в HTML съществуват два специални елемента: span и div. Тези елементи ще се срещат отново и отново – в това число и в този ред.

Пример:

<div class="artikel">
  <h1>Farbexplosion</h1>
  <p class="thema">Ein Tutorial zur Erstellung von Farbexplosion von <span class="autor">MarkusMelzer</span>.</p>
</div>

Единствената разлика между div и span е, че елементът div задължително създава нов ред в текстовия поток. span от друга страна не създава нов ред. Показаният пример дефинира div област, в която има заглавие и параграф. В рамките на параграфа отново има span област.

ID- и Класови селектори

До момента са използвани елементни селектори. Чрез следния пример всички заглавници h1 се форматират чрез такъв селектор.

h1 { 
   color: #000; 
   background-color: red;
}

Тази форма обаче не е винаги желана. Какво например, ако искате да зададете определени свойства само на един или на няколко, но не на всички заглавници h1? За тези случаи CSS предлага две възможности, а именно класовите и идентификационните селектори.

С класовите селектори HTML елементите с атрибути на класа могат да бъдат селектирани много избирателно. В съответния HTML елемент трябва да има атрибута class. Дефинициите на класа започват с точка.

Пример:

.rot { 
   color: red; 
}

Тук е дефиниран класът rot. За да добавите червените собствености на HTML елемент, пишете class последвано от името на класа.

<p class="rot">PSD-Tutorials.de</p>

Идентификационният селектор може да се използва по сходен начин. Идентифицира се чрез двойно кръстче.

#topnavi { 
   color: blue; 
};

В този пример се дефинира идентификационният topnavi. Но внимание: Идентификация може да се зададе наистина само веднъж в документ. Достъпа до дефинираното свойство за идентификация е такъв:

<div id="topnavi">Hier steht die Navigation</div>

Атрибутът id се присвоява на името на идентификатора. Внимавайте, че тук не трябва да се посочва като решетка.





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

<p class="червен голям">PSD-Tutorials.de</p>

В този пример на текстовия абзац са присвоени двата класa червен и голям. Ако искате да посочите клас и идентификатор, това изглежда по следния начин:

<p class="червен" id="navi">PSD-Tutorials.de</p>

Също така можете да комбинирате елементите и идентификаторите помежду си. Ето един пример:

div.navi { 
   color: синьо; 
}

Тази синтакса би се отнасяла само за div елементите с клас navi. p елементите, които също притежават клас navi, няма да бъдат засегнати.

В CSS съществува още един начин за комбиниране на селектори. Погледнете следния синтаксис:

h1 { 
   color: червено;
}
em { 
   color: синьо; 
}

Тук на всички първокласни заглавия е присвоено червен цвят. em елементите от своя страна получават син цвят.

Чрез комбиниране на двете инструкции може да се подчертае, че само em елементите се оцветяват в синьо, които се намират в рамките на елементите h1.

h1 em { 
   color: синьо; 
};

Имената на елементите се записват тук без запетаи, за да бъдат разделени.

Това, между другото, е популярна капан за грешки, в която даже начинаещите в CSS попадат. Ето същият синтаксис, но в който е поставена запетайка:

h1, em { 
   color: синьо; 
}

Какво означава този синтаксис? Биват обхванати всички h1 и всички em елементи. Това е напълно различно от синтаксиса без запетайка!

Още един важен селектор е универсалният селектор. Той позволява избор на произволен елемент. Този селектор се дефинира чрез звезда.

* { 
   color: червено; 
}

Чрез този синтаксис всичките елементи биха били оцветени в червено. И при този селектор отново трябва да се вземат предвид някои синтаксични по-спецификации.

#mainnavi * { 
   color: червено; 
}

В този пример цветът на текста на всички елементи в рамките на елемента с идентификатор mainnavi е зададен на червено. Това обаче не важи за самия елемент.

Ако универсалният селектор беше пред всеки декларация, вероятно нямаше да е нужно да се посочи. Такова нещо би било излишно:

* p { 
   color: червено; 
}

Този синтаксис е еквивалентен на следния:

p { 
   color: червено; 
}

В следващия урок ще научите още селектори.