CSS (engl. Cascading Style Sheets) je jezik formatiranja pomoću kog se definiše izgled elemenata veb-stranice. Prvobitno, HTML je služio da definiše kompletan izgled, strukturu i sadržaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadržaja.
Vodič kroz CSS
HTML fajl za vežbu
mojaskola.htmlSintaksa CSS-a se razlikuje od sintakse HTML-a. Sastoji se samo od tri dela:
selektor {
svojstvo: vrednost;
}
Selektor je html element kojem dodeljujemo vrednosti
Svojstvo je definisana oznaka koja govori koje svojstvo menjamo
Vrednost je stil koji dodjeljujemo svojstvu.
Svaki selektor može imati više svojstava
primeri;
body {
font-size: 14px;
font-family: "Times New Roman", Times, serif;
}
h1, h2, h3, h4, h5, h6 {
color: blue;
}
Svojstvom background-color postavljamo boju pozadine elementa.
Na primer background-color: #ffffff;
Moguće vrijednosti su:
ime boje (engleski nazivi): npr. red, blue, yellow
heksadekadska RGB vrijednost: npr. #FF0000, #0000FF...
RGB kod boje – npr. rgb(255, 0, 0), rgb(0, 0, 255)
transparent
Tekst
Koristimo slijedeći obrazac :
color: vrijednost;
Moguće vrijednosti su:
heksadekadska RGB vrijednost: npr. #FFFF00, #00CC00...
RGB kod boje – npr. rgb(0, 255, 0), rgb(0, 128, 128)
ime boje (engleski nazivi): npr. green, yellow, blue
Svojstvo font služi za postavljanje jednog ili više slijedećih svojstava:
font-style - Moguće vrijednosti su:normal italic oblique
font-weight - Svojstvo font-weight omogućavaju određivanje debljine slova.Moguće vrednosti: 100, 200,,,,900,lighter normal bold bolder
font-variant - Svojstvo font-variantfont-variant omogućava uključivanje ispisa umjesto malih slova velikih slova manje visine.Moguće vrednosti su: normal small-caps
font-size - Svojstvo font-size koristimo za veličine slova u tekstu.Možemo odabrati:
a) predodređene vrijednosti
b) upisati veličinu ili postotak veličine slova:
line-height
i font-family.-Svojstvo font-family omogućava postavljanje niza naziva fontova kojima može biti prikazan tekst unutar elementa. Možemo odabrati ime fonta ili ime generičkog fonta.
primer:
font-style: italic;
font-weight: bold;
font-variant: normal;
font-size: small;
line-height: 1.4em;
font-family: Verdana, sans-serif;
Saj Informatika3, izgled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Информатика у трећем разреду</title>
<link rel="stylesheet" href="inf3.css">
<header>
<nav class="container">
<img src="slikazaglavlje.jpeg" alt="slikazaglavlje">
<ul>
<li><a href="grafika.html">графика</a></li>
<li><a href="veb.html">Веб дизајн</a></li>
</ul>
</nav>
</header>
</head>
<body>
<article class="container">
<h1>Рачунарство и информатика друштвено-језички и општи смер</h1>
<img src="slikaudžbenika" alt="udzbenik">
<h2>Циљ наставе:</h2>
<p>Циљ учења Рачунарства и информатике је стицање знања, овладавање вештинама и формирање вредносних ставова који доприносе развоју информатичке писмености неопходне за даље школовање, живот и рад у савременом друштву. Усвајањем концепта из рачунарских наука, ученик развија способност апстрактног и критичног мишљења о аутоматизацији послова уз помоћ информационо-комуникационих технологија и развија способност ефективног коришћења технологије на рационалан, етичан и безбедан начин.</p>
</body>
</html>
⦁ Класе
Овакво стилизовање се користи у случају да је потребно применити исти стил на више елемената различитих типова (нпр. желимо да користимо исту врсту, боју и величину слова у неким параграфима, листама и табелама), или је потребно применити стил на само неке елементе датог типа (нпр. на само неке параграфе).
На пример, ако желимо да различито стилизујемо елементе у левом и десном делу стране, можемо им придружити различите класе (levi и desni) и онда описати стилове тих класа.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<p class="levi">
Параграф са зеленом позадином
</p>
<p class="desni">
Параграф са плавом позадином
</p>
</body>
</html>
.levi {
display: inline-block;
width: 100px;
background-color: lime;
}
.desni {
display: inline-block;
width: 100px;
background-color: skyblue;
}
Селекторе класа користимо када постоји више елемената на страни (или различитим странама), који треба да изгледају исто. У том случају треба на једном месту дефинисати стил који се односи на класу елемената и ту класу додати свим елементима које желимо да стилизујемо на тај начин.
Стил који се поставља елементу са више класа је унија стилова дефинисаних у различитим класама. У случају да више класа дефинише различите вредности истих CSS својстава (нпр. ако и класа levo и класа naslovna поставе својство боје текста, али на различите вредности), прегледач ће разрешити конфликте. Правила разрешавања могу да буду компликована, тако да у дизајну треба настојати да до оваквих конфликата не долази.
⦁ Сложени селектори
Селектори могу бити и сложени.
⦁ Када се неколико селектора раздвоји зарезима, правило се примењује на сваки селектор појединачно (на пример, p, .pasus се односи на све елементе p и на све елементе са класом pasus).
⦁ Када се неколико селектора раздвоји размаком, правило се односи на угнежђене елементе. На пример, #radovi li се односи на све елементе li који се налазе унутар елемента чији је идентификатор radovi.
⦁ Ознака класе и идентификатора се може спојити са називом елемента. На пример, селектором p.vazno се селектују сви они пасуси који имају класу vazno (а не пасуси који немају ту класу нити елементи који нису пасуси а имају ту класу).