Синтакса језика CSS¶

Језик стилских каскадних листова (енг. Cascading Style Shets, скр. CSS) представља језик који служи за стилизовање веб-страница. Као што већ знаш, језик HTML користиш да опишеш логичку структуру веб-странице, а уз помоћ елемената језика CSS можеш на најразличитије начине да опишеш визуалну презентацију садржаја. На пример, коришћењем елемената језика CSS можеш да подешаваш распоређивање елемената, боју текста, оквире око елемената, позадину елемената, итд.

Уколико у било ком тренутку наиђеш на проблем приликом програмирања неког од примера, можеш се упутити ка репозиторијуму https://github.com/Petlja/specit4_web_radni, са којег можеш клонирати садржај у директоријум htdocs XAMPP алата, или преузети архиву са адресе https://github.com/Petlja/specit4_web_radni/archive/refs/heads/main.zip, а затим распаковати њен садржај у том директоријуму. Сви примери из лекција 9-13 су део треће теме курса - језик стилских листова CSS - па ћеш и све примере из ових лекција пронаћи у директоријуму ”Poglavlje3”.

CSS документи се састоје од низа правила (енг. rule). Свако правило је следећег облика:

Селектор {
    Декларација 1;
    Декларација 2;
    …
}

Елементи правила су:

• Селектор (енг. selector) описује на које све HTML елементе ће правило бити примењено. Видећеш да постоји неколико врста селектора којима врло прецизно можеш да опишеш HTML елементе на које ће стилови бити примењени. Кажемо да су HTML елементи, на које се неки селектор односи, обухваћени (енг. span) тим селектором.

• Декларација (енг. declaration) описује један визуални елемент који ће бити примењен на све елементе обухваћене селектором из правила у којем је декларација наведена. Визуалних елемената има велики број и у наредним лекцијама ћеш се упознати са њиховим особинама.

Без обзира на који визуални елемент се односи, свака декларација има исту форму:

Својство: Вредност

Објаснимо сада елементе декларација:

• Својство (енг. property) представља назив визуалног елемента који се поставља у декларацији. Сваки визуални елемент има јединствен назив својства.

• Вредност (енг. value) представља конкретну вредност која се поставља за дато својство. Свако својство има унапред дефинисан скуп дозвољених вредности и од тебе се очекује да разумеш како постављање неке вредности утиче на визуалну презентацију елемената.

Од тебе се не очекује, а није ни пожељно, да учиш напамет имена свих својстава и њихове вредности. Уместо тога, можеш да се ослониш на неки од веб-сајтова који нуде преглед документације језика CSS. Један од њих је и веб-сајт https://www.w3schools.com/ на којем можеш да претражујеш све елементе језика CSS. На пример, на веб-страници https://www.w3schools.com/cssref/index.php можеш пронаћи списак свих CSS својстава са везама ка детаљним информацијама.

Поред правила, језик CSS може садржати и коментаре који имају сличну намену као и у другим програмским језицима. CSS коментари су по правилу вишелинијски и налазе се између карактера ”/” и ”/”.

Пре него што пређеш на наредну лекцију, приказаћемо један пример како документ написан у језику CSS може да изгледа. Од тебе се не тражи да одмах разумеш ефекте датог кода, већ да се навикнеш да читаш језик CSS, који се умногоме разликује од других програмских језика са којима је било прилике да се сусретнеш. Ипак, уколико се осећаш авантуристички, пробај да погодиш какав ће ефекат наредни код имати на неку веб-страницу.

/* Прво правило */
h1, h2 {
    color: blue;
    font-family: Verdana, sand-serif;
}


/* Друго правило */
img#logotip {
    width: 50%;
    border: 5px solid #65b223;
    float: left;
}