Web design терминология – Част 2: CSS

Каква е разликата между пропърти и селектор? Какво е CSS правило? Каква е разликата между псевдо клас и псевдо елемент?

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

CSS

CSS (Cascading Style Sheets) ни дава възможност да стилизираме и форматираме суровата структура, предоставена ни от HTML (повтарям го под път и над път и все пак още веднъж – използвайте HTML само за структуриране, никога за стилизиране на съдържанието си).

Нека започнем от началото – какво е това CSS. Както вече казах CSS e style sheet language (това ако го преведа и може да се хвърля през прозореца), което е напълно различно от markup language (какъвто е HTML)  и scripting language (като Javascipt). Интересното при начина на работа на стиловете е, че дадено група от правила, зададена на дадена позиция, може реално да „каскадира”(cascade – от CSS) надолу по документа, дори и да не го искате(т.е. задавате стил на някой параграф и видиш ли всички параграфи приемат този стил без това да ви е било идеята).

Каскадирането всъщност следва доста правила, които определят как стиловете се прилагат по документа. По – нататък ще има цяла тема специално за каскадирането, наследяването при CSS.

CSS3

CSS3 е третата главна итерация на CSS. При CSS2, имаше една огромна спецификация, но при CSS3 нещата са разделени на части, наречени модули. Например някои модули са – CSS Color, Media Queries, CSS Animation. (пак – за CSS3 ще си има отделна тема – не може всичко на куп)

Всеки модул се разработва като отделна единица, има си собствен статус, който е независим от останалите модули. Например, Selectors Level 3 модула достигна „recommendation” статус (препоръчителен за използване), което значи, че вече може да се използва свободно, докато CSS Flexible Box Layout е все още в разработка.

Интересното при модулите е, че просто разработчиците нямат търпение да почнат да си играят с тях. И дори даден модул да се поддържа от много малко browser-и и да е все още в много експериментална фаза, то той бива използван доста често. Така че винаги следете кои browser-и поддържат модула, който искате да използвате.

Анатомия на CSS

Една от основните концепции, които трябва да разберете при работата си с CSS е как да се обръщате към отделните му части. Ако сте начинаещ, след време и много практика постепенно ще започнете да разбирате всички писаници от дебелите книги, които никой не купува(за CSS), туториалите или другите източници, от които учите CSS. Тогава в момента, в който прочетете “property” веднага ще знаете за какво иде реч.

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

Селектор

Първата част от пъзела е така наречения селектор. Колкото и невероятно да звучи – селектора селектира или посочва нещото, което искаме да стилизираме. CSS използва прости шаблони, чрез които се обръща към части от DOM(обсъждахме вече какво е DOM) и след това ги стилизира. Примерният код отгоре например се обръща към всички параграфи и им задава бял цвят на шрифта.

Някои селектори, като този от примера, са доста прости, докато други не. Малко по – късно ще покажем по – сложни селектори, когато говорим за ограждащите селектори.

Пропърти

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

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

Естествено за да ни е още по – приятно всеки browser си има собствено мнение за нещата (тук лидер е IE) и си задава собствени стойности по – подразбиране за различните пропъртита на елементите. Затова е задължително да занулявате стойностите на пропъртитата в началото на CSS файла си. По този начин се подсигурявате, че елементите ви ще изглеждат по един и същ начин при различните browser-и (почти).

Стойности

След като вече сме селектирали желания таг, избрали сме и пропъртито което искаме да сменим и е време наистина да сменим нещо. Стойностите ви дават тази възможност. Например browser-a ви може вече да ви е сложил черен цвят на всички параграфи, но вие да решите, че ще е по – подходящо те да са сиви и тогава слагате стойност сиво на пропъртито color.

Наименованието стойност по всяка вероятност може малко да ви обърква, защото по всяка вероятност веднага го асоциирате със нещо числово. Всъщност наистина много CSS пропъртита изискват бройни стойности. Стойностите могат да се изразяват в пиксели(font-size: 10px), процети(width: 33.33%), емове(line-height: 1em) и т.н., но също така могат а се изразяват и по други начини. Например погледнете следния снипет:

 a {

display: block;

background-image: url('picta.jpg');

color: #fff;

text-decoration: none;

}
 

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

Декларация, Декларационен блок, Правило

(Declaration, Declaration block, Rule)

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

Разгледайте следната картинка и мисля, че нещата ще ви се изяснят:

Както виждате различията между тях са чисто йерархични. Нека започнем от малкото и да вървим към по – голямото. Декларацията се състои от пропърти и стойност(color: Red). Декларационния блок се състои от един или повече декларации, заградени от къдравите скоби и разделени с точка и запетая (color: Red; font-size: 12px). Най – накрая имаме правилото(rule) което обхваща декларационния блок и селектора.

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

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

Таг селектори

Това са най – основните селектори. Според w3c (http://www.w3.org/TR/selectors/#type-selectors), таг селектора представя инстанция на елемента от DOM. Примери за таг селектори включват самите тагове, които използвате при html

 h1 {...}
 p {...}
 

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

Другият най – често използван тип селектори са клас и ID селекторите. Както обяснихме в разясненията за html терминлогията в предишния пост, разликата между ID и клас е, че класовете са преизползваеми, докато ID-тата са уникални.

Можете да посочите елемент с даден клас от DOM, чрез клас селектор, който е винаги предшестван от точка. Подобно, можете да посочите всяко ID от HTML с ID селектор, предшестван от #.

 .someClass {...}
 #someID {...}
 

Атрибур селектори

Класовете и ID-тата всъщност са HTML атрибути, които са толкова често използвани, че са си заслужили собсвени селектори, но има доста други атрибури. Например обърнете внимание на следния снипет(парче код):

 <a href="http://pavelkolev.com/">Pavel Kolev</a>
 <a href="http://telerik.com/">Telerik</a>

Тук имаме атрибута href. Сигурно се чудите какъв селектор трябва да използвате за да посочите всички линкове или по точно как да селектирате линк по стойност зададена в href атрибута му.

 a[href='http://pavelkolev.com/'] {color: #fff;}
 

Тук използваме атрибут селектор за да посочим само линка, имащ стойност ‘http://pavelkolev.com/’ и му задаваме стойност на цвета бял. Това напълно игнорира другият линк от нашия пример. Атрибут селекторите дават възможности за боравене с може би най – сложните селектори, които ще ползвате някога.

 li a[class*='stooge'][title^='the'] {color: red;}
 

Помислете какво прави точно този снипет.

Селектори за потомци, деца и братя/сестри

Има няколко селектора, които звучат всякаш извадени от родословно дърво(за което пак говорихме – DOM). Например ето така излгежда потомствения селектор:

header p {...}

Това би посочило всеки параграф, който е потомък на header елемент. Забележете, че потомците са различни от децата. Както и при родословните дървета – всички деца са потомци, но не всички потомци са деца. Посочения пример би селектирал всички параграфи от този пример:

<header>
  <div>
      Дете и потомък на header
      <p>Потомък на header, но не и негово дете.</p>
  </div>
</header>

Да речем, че искаме да посочим само децата на header елемента. За да го постигнем, трябва да използваме съответния синтаксис. Този снипет би селектирал само първите два параграфа от горния пример:

header > p

Също така има и братя/сестри селектори.

/*Adjacent sibling combinator*/

h1 + p {...}

/*General sibling combinator*/

h1 ~ p {...}

Първият селектор посочва всеки параграф, който е директно предхождан от h1 елемент, докато втория посочва всички параграфи, предхождани от h1, без значение преди или след самия параграф се намират в йерархията.

Псевдо класове и псевдо елементи

Друга специална област от селектори са псевдо класовете и псевдо елементите. За да е по ясно нека вземем следния пример:

псевдо класове:

a:link {color: Blue}

a:hover {color: Blue}

div:first-child {color: Blue}

div:nth-child(3) {color: Blue}

псевдо елементи:

p::first-line {color: Blue}

p::first-letter {color: Blue}

p::before {color: Blue}{/code}

Това са примери за някои псевдо класове, които може да са ви познати като например hover и също често използвания first-child. Но по какво се различават те от псевдо елементите като :before и :first-line? Отговора е доста прост. Просто помнете, че псевдо класовете посочват целите елементи и тяхното състояние, докато псевдо елементите посочват част от елемента. Например hover псевдо класа се прилага на целия параграф, линк и т.н. Докато :first-line не посочва целия параграф, а само част от него.

С кои CSS термини имате проблеми?

Идеята беше само да обесня някои от основните понятия при CSS, но малко се увлякох и пообясних може би и самите основи на CSS. Ако има термини които ви затрудняват и не са били споменат тук, моля пишете в коментарите, за да ги включа при следващ пост.