На четвртиот час од бесплатниот воведен курс за фронт-енд присутните продолжија со изучување на CSS.
Но што означува кратенката CSS? Оваа кратенка всушност значи Cascading Style Sheet. Фајловите што се со екстензии како .css , .saas , .scss , .less во нив се пишува css. CSS не е програмски јазик туку тој служи за стилизирање на веб страната односно на html-от што ќе го искуцате.
CSS- Syntax
Синтаксата на CSS е поделена на три дела и тоа selector, property и value. Property и value всушност претставуваат декларација. Ако имате повеќе елементи на страната, а сакате да селектирате само некој одреден елемент треба да го селектирате со помош на селекторот и на него треба да напишете одреден стил.
Пример за селектор е табела. После селекторот секогаш се става голема заграда која треба да биде отворена и затворена и внатре помеѓу нив се пишува property и value.
Како изгледа тоа?
table { border : 1px solid #C00; }
Table претставува селектор, border претставува property додека останатите претставуваат value.
CSS- embedded
Ова е еден од начините за стилизирање на страна. Се користи html таг <style> кој се става помеѓу <head> тагот додека помеѓу <style> тагот се пишува CSS-от што го сакаме (пр. h1 {color:red;} ). На style тагот се става type атрибутот за да дадеме до знаење на прелистувачот за што се работи односно за каков тип на стил се работи. Color во h1 служи за давање на боја на текстот.
CSS- inline
Kога на некој елемент се става inline стил тогаш тоа што е зададено важи само за тој конкретен елемент. Секогаш тоа што е напишано inline ќе го избрише тоа што е напишано во head односно независно дали ставате два пати CSS на ист елемент секогаш ќе се земе во обзир inline CSS-от.
CSS- external
Овој начин е најкористен и тој дозволува да креирате посебен фајл што мора да е .css екстензија. Потоа тој го поврзувате со html и поврзувањето оди преку head тагот односно внатре во head тагот. Се додава link таг кој има атрибути rel=”stylesheet” односно даваме до знаење дека се работи за некој CSS. Исто така се додава и href атрибут кој е всушност патеката. Најчесто стиловите одат заедно во ист директориум со html стиловите.
The type selectors
Type означува еден вид на таг селектори. Сите тагови што се во html може да се селектираат само со пишување на нивното име без аглестите загради што доаѓаат пред и после.
Пример:
h1 {
color: red;
}
The universal selectors
Ова се користи многу ретко речиси никогаш бидејќи не сакаме на сите елемнти да додадеме одреден стил. Кога ќе ставите ѕвездичка ( * ) тоа значи дека се однесува до сите елементи што се на вашата html страна односно од отварање на body тагот до затварање на сите елементи ќе се стави одреден стил.
The descendant selectors
Овие селектори означуваат повеќе видови на тагови како на пример div и h1 таговите. Сите h1 тагови кои се вгнездени во div тагот ќе ја добијат зададената вредност, пример ќе се обојат во црвена боја. Овие селектори кога сакате да селектирате одредени вгнездени елементи односно често страните имаат до четири или пет нивоа вгнездени елементи и сакате на одредено ниво да ставите стил го пишувате овој тип на селектори:
div h1 {
color: red;
}
The Class selectors
Другиот тип на селектори што е најчесто користен е class селекторот. Секое property треба да биде во нов ред и да има точка и запирка ( ; ) на крај за да не се мешаат. На повеќе елементи може да има класа. Класата е атрибут и за секој елемент може да додадете повеќе класи.
Во CSS многу е битно да се научи како се селектираат елементите односно точно да бидат напишани селекторите.
Class селекторот може да се искомбинира со таг селекторот. Кога се селектираат тагови со класа тоа мора да е споено ( пр. h2.red ).
Аплицирај!
The ID selectors
Секој HTML таг може да има ID атрибут и ID атрибутот кој треба да биде уникатен. Кога сакате да селектирате ID секогаш треба да стои тараба.
The attribute selectors
Синтаксата на овие селектори е така што прво го пишувате името на HTML тагот и потоа секогаш се отвараат големи загради во кои се пишува името и вредноста на атрибутот.
Пример:
input [ type=text ] {
background-color: blue;
}
Multiple Style Rules
Кога сакате да пишувате повеќе вредности односно повеќе CSS properties се ставаат во нов ред и се одделуваат со точка и запирка на крајот. Додека кога сакате да одделите селектори истот го правите со ставање на запирка. Исто така може и да се комбинираат селектори.
CSS Measurement Units
Ова се вредности што се користат најчесто во CSS. Процент се додава ако сакате од парентот да заземе одреден процент на пример ако сакате некој селектор што ќе напишете т.е. елементот да има должина колку што е и парентот ставате 100%, а доколку сакате само 50% од парентот тогаш се става 50%.
Најкористена е пиксел или px, а останати кои што се користат се Pt, em, mm, cm, vh, vw и други.
CSS Color и Background-color
Color дава боја на елементот и тоа најчесто се користи на h елементите и параграф односно текст елементите. Background-color се користи на сите елементи односно кога сакаме да ја обоиме позадината на елементот.
CSS Text
Со нив се форматира текстот. Има две опции или letter-spacing што служи за одделување на буквите и text-align што служи за центрирање на текстот.
Други често користени properties се text-decoration и text-transformation.
Доколку сеуште не се приклучи на овој бесплатен курс тоа можеш да го направиш сега. Вечерашниот час можеш да го следиш на следниот линк.
Ако сакаш да дознаеш повеќе за програмата на Академијата за фронт-енд и начините за плаќање закажи разговор со нашиот координатор тука. Промоцијата од 300 ЕУР попуст завршува во понеделник (27.02).
