CSS Teorija

Veb dizajn | Teorija CSS
Kaskadni stilovi - CSS
Šta(kaskadni
CSS je i čemu služipredstavljaju
stilovi) CSS? pravila (stilove) za formatiranje HTML elemenata na veb stanici.
Jednostavno rečeno, da bismo ulepšali i precizno podesili tagove HTML-a, koriste se kaskadni stilovi - CSS.
Napredne tehnike CSS-a omogućavaju da se izradi celokupna veb strana sa minimalnom ili bez primene
HTML elemenata.
BITNO!
Ako se koristi CSS pravila za stilozovanje HTML elemenata, tada se u tagovima ne koriste atributi.
CSS pravila na jednom tipu taga, automatski se primenjuje na sve tagove istog tipa. Nema potrebe da se posebno vrši deklaris
Princip
Atributi deklarisanje
za tagove, parvila
koji se koriste CSS?
kod CSS, uglavnom se razlikuju od atributa koji se koriste pri pisanju u
liniji tag elementa. Atributi CSS-a (svojstva) mogu biti veličina, boja fonta, dimenzije i slično.
 CSS selektor počinje malim slovom.
 CSS selektor ne sme da počinje brojem.
 CSS selektor najčešće je samo naziv HTML elementa bez simbola < >. Atributi (svojstva) selektora i
vrednost svojstva zadaju se u obliku deklaracije koji ima sledeći oblik:
css selektor {
atribut : vrednost;
Ovako zapisan stil nazivamo CSS pravilo.
 Svaki atribut može imati jednu ili više vrednosti. Na primer, element pasusa <p> tag, deklarišemo u
CSS-u na sledeći način:
p{
color: green;
font-family: "Times New
Roman"; font-size: 18pt;
background-color: red;
text-align: center;
2
}
Na osnovu gornjeg primera primene CSS-a za tag <p> i donjeg tabelarnog pregleda, može se uočiti da se
atributi (svojstva) CSS-a pišu slično ali na malo drugačiji način nego kod HTML atributa za tagove.
HTML CSS
Princip pisanja atributa za < p> tag Princip deklarisanja pravila za selektor p
p{
<p color=”blue” align=”center” size=”18”>
color: blue;
text-align: center;
font-size: 18pt;
}
w3schools.com
Sajt na kome se mogu pronaći najnoviji standardi za kreiranje veb sadržaja je w3shools.com Ovaj sajt, osim
za početnike, predstavlja stalni izvor informacija i za iskusne veb programere. Ovo je nezaobilazno mesto
koje posećuju svi koji uče veb dizajn.
3
Pozicija unosa CSS-a?

Postoji 3 načina za poziciju deklarisanja CSS-a.
1. U liniji sa deklaracijom taga:
Pravilo pisanja:
<oznaka taga style="[lista deklaracija]"> ... </oznaka>
Primer:
<p style="font-size:10pt;">Prva kragujevačka gimnazija osnovana je 1833.</p>
2. Interni u okviru zaglavlja:
Pravilo pisanja:
CSS selektor {
lista deklaracija
}
Primer:
<head>
<style>
p{
font-size: 10pt;
color: blue;
}
</style>
</head>
3. Eksterni u posebnom fajlu van html dokumenta

Kod ovog slučaja, CSS pravila pišu se u posebnom fajlu koji se nalazi izvan HTML fajla. Prednost
ovog načina jeste da se CSS pravila mogu primeniti na više HTML fajlova – veb stranica. U ovom
slučaju u svakoj veb stranici potrebno je u zaglavlju uspostaviti vezu ka eksternom CSS fajlu. Ovo je
najbolji način za poziciju deklarisanja CSS-a jer se može povezati i primeniti na više veb stranica.
Pravilo
pisanja:
<link rel="stylesheet" href="[putanja do CSS fajla]" />
Primer:
<head>
< link rel="stylesheet" href="stilovi_veb_stranica.css"/>
</head>
4
Princip nasleđivanja i CSS # selektor

Nasleđivanje CSS pravila
Kada se postavi CSS pravila na jednom tipu taga, automatski se primenjuje na sve tagove istog tipa.
Npr. CSS pravila za p selektor, važe za sve pasuse na stranici, odnosno sve HTML <p> tagove.
CSS selektor na osnovu id atributa taga

Najjednostavniji način da se iz skupa istih HTML elemenata napiše izdvojena CSS pravila samo za
jedan, jeste uvođenje ID atrinuta samo za taj HTML tag. Kada se pišu posebna CSS pravila za
odeređeni tag, tada CSS selektor mora da počne sa karakterom # .
Primer:
U slučaju potrebe da neki pasus ima npr. samo različitu boju slova, a sve ostalo da bude kao i kod
ostalih pasusa, onda tom pasusu u p tagu postavimo id atribut i dodelimo neko ime za vrednost atributa.
To ime sada koristimo kao selektor pri deklarisanju CSS pravila, koje mora ds počinje karakterom #.
Isti princip važi i za druge tagove HTML elemenata.
U donjem primeru pokazano je kako se koristi id atribut - selektor. U telu stranice postavljena su tri
pasusa. Želimo da prvi i treći pasus imaju ista CSS pravila, a da kod drugog pasusa samo da boja teksta
bude različita.
<html>
<body>
<head>
<style>
<p> Tekstualni sadržaj prvog pasusa.</p>
p { color: black;
font-family: "Times New <p id=”pasus2”> Sadržaj drugog pasusa.</p>
Roman"; font-size: 18pt; } <p> Tekstualni sadržaj trećeg pasusa.</p>
#pasus2 { color: red; }
</body>
</style>
</html>
</head>
Svojstva koja definišu granice elementa

Svaki HTML element smešten je u ograničeni prostor - box i zauzima određen prostor na veb strani.
Zbog pojednostavljenja objašnjenja posmatraćemo primere podešavanje CSS pravila za prostor - box
<p> taga. Sva objašnjenja podešavanja prostora za p tag važe i za druge HTML elemente.
Preko CSS-a ograničeni prostor za <p> tag može da se podešava za: spoljne margine (margin),
unutrašnje magine (paddining), okvirne linije (border), boju pozadine, širinu i visinu prostora.
Tekstualni sadržaj u pasusu. Prostor HTML elementa - BOX
padding border margin
5
 Background-color – boja pozadine

o Primer postavljanje boje pozadine za prostor HTML elmenta pasusa:
p { background-color: yellow;}
 Padding – unutrašnja margina, veličina područja unutar elementa, u kom sadržaj elementa ne
može da se pojavi. Prostor unutrašnje margine dodaje se na prostor sadržaja. Na ovaj način
dolazi do proširivanja prvobitnog prostora elementa za vrednost padding-a.
o Primer postavljanja sve četiri sa istim vrednostima unutrašnje margine, oko teksta
pasusa, na 10px. Prostor sadržaja pasusa proširuje se sa sve četiri strane za 10px.
p { padding: 10px; }
o Primer postavljanja zasebnih (može i samo jedna) unutrašnjih margina oko teksta
pasusa.
p{
padding-left: 10px;
padding-top: 20px;
padding-bottom: 5px;
padding-right: 15px;
}
 Border -ivica elementa (okvirne linije prostora)

o Primer postavljanja za sve četiri ivice prostora (box-a) za <p> tag:
p{
border-size:2px; - debljina linije
border-style: solid; - tip okvirne linijelinije
border-color: blue;
border-radius: 15px; - zakrivljenje svih pravih uglova prostora
}
o Primer postavljanja samo za gornju ivicu prostora (box-a) za <p> tag. Po istom
principu može se definisati i za preostale tri:
p{
border-top-size:3px;
border-top-style: dashed;
border-top-color: red;
}
 Margin – (spoljne margine) veličina područja van elementa, u kome ne mogu da se pojave drugi
elementi. Rastojanje od drugih elemenata.
o Primer postavljanja sve četiri spoljne margine (box-a) za <p> tag:
p { margin: 25px; }
o Primer postavljanja pojedinačnih spoljnih margina (box-a) za <p> tag:

p{
margin - top: 25px;
margin - bottom: 15px;
margin - left: 35px;
margin - right: 20px;

6
}
 Veličina prostora - svaki HTML element smešten je u ograničeni prostor - box i zauzima
određeno područje na veb stranici. Ovaj prostor može da se ograniči primenom CSS pravila
WIDTH i HEIGHT.
o Primer postavljanja ograničenja prostora (box-a) za <p> tag:
p{
width: 500px;
height: 75px;
}
h konstruktor - CSS pravila za elemente web stranice koji prikazuju naslove

Za tagove naslova H1,H2, … ,H6 mogu se primeniti sledeći atributi za deklarisanje CSS-a. Primer
prikazuje CSS pravila za h1 HTML element ali isti princip je za sve preostale nivoe naslova.
* Pored navedenih u tabeli, podrazumevana su sva podešavanja
opisana u svojstvima koja definišu granice elementa.
CSS pravila Opis primene

h1 {
color: blue; Boja teksta (karaktera)
font-size: 13pt; Veličina teksta (karaktera)- može i u px
font-family: "Times New Roman","Courier New"; Podržana Font grupa prikaza teksta (karaktera)
background-color: blue; Boja pozadine prostora
text-align: center; Pozicioniranje sadržaja u prostoru (box-u) po x osi
font-weight:bold; Podebljan tekst (karakteri)
font-style:italic; Iskošen tekst (karakteri)
}
p konstruktor - CSS pravila za elemente web stranice koji prikazuju pasuse


p{
font-size: 13pt; Veličina teksta (karaktera) - može i u px
}
7
a konstruktor - CSS pravila za elemente web stranice koji prikazuju linkove


a{
text-decoration: none; Uklanja podvučenu liniju linka
color: aqua; Boja teksta (karaktera)
}
CSS slekektor a:hover poseban selektor za podešavanje linkova. Postavljena CSS pravila za ovaj
selektor aktiviraju se na događaj pozicioniranja miša na link.

a:hover {
color: red; Boja teksta (karaktera)
background-color: silver; Boja pozadine prostora
}
a:visited - postavljena CSS pravila za ovaj selektor omogućavaju drugačija podešavanja za link koji je
već bio aktiviran.
a:visited {
color: orange; Boja teksta (karaktera)
background-color: yellow; Boja pozadine prostora
font-style:italic; } Iskošen tekst (karakteri)
8
hr konstruktor - CSS pravila za element web stranice koji prikazuje linije

Za razlku od ostalih selektora kod linija obavezno je podešavanje boje i visine prostora tj. linije.

hr {
width: 50px; Širina prostora HTML elementa na stranici
height: 10px; Visina prostora HTML elementa na stranici
}
li konstrultor - CSS pravila za element web stranice koji prikazuje nabrajanja

Princip podešavanja važi za oba tipa HTML taga <ol> i <ul>.

li {
}
div konstruktor
Postavljanje CSS pravila za <div> tag, po pravilu, podrazumevaju veličinu i boju prostora. Ređe okvirne
linije i radijus prostora.

div {
background-color: aqua; Boja pozadine prostora
text-align: justify; Poravnanje samo za tekst
}
9
marquee konstruktor – CSS pravila za prikaz pokretnog teksta


marquee {
font-size: 13pt; Veličina teksta (karaktera)
}
Dodatna podešavanja za prikaz pokretnog teksta na sajtu https://www.w3schools.com/css
body konstruktor – CSS pravila pozadine web stranice

atribut vrednost opis
background-color aqua Boja pozadine cele stranice
background-image url ("fajl slike") Opcija kada se postavlja slika u pozadini
background-repeat repeat; repeat-y; repeat-x; Da li se slika ponavlja, ponavlja po x, y osi,
no-repeat; odnosno ne ponavlja
background-position top center; top right; top left; Pozicija pozadinske slike
right; left; center;
background-size širina visina Veličina slike na stranici u px
background- fixed Da li će pozadinska slika biti fiksirana pri
attachment skrolovanju
Primer1 | Fiksna slika
body {
background-color: silver;
background-image: url("d:\pozadinskasilika.jpg");
background-position: top center;
background-size: 400px 600px;
background-repeat: no-repeat;
background-attachment: fixed;
}
10
Primer 2 | Slika se ponavlja po x osi
body {
background-color: silver;
background-image: url("slika.jpg");
background-position: center;
background-size: 50px 50px;
background-repeat: repeat-x;
background-attachment: fixed;
}
Tabele - kontrola
table{ prikaza tabele preko CSS
background-color: #eee; boja pozadine cele tabele
border-collapse: collapse; linije ćelija se poklapaju
border-spacing: 0px; rastojanje između ćelija ako se ne
poklapaju empty-cells: show; prikaz ćelija bez sadržaja
}
td{
border: 1px #000 solid; debljina linije - boja - tip linje
padding: 4px; rastojanje od sadržaja do ivice ćelije u sva četiri pravca
}
Primena
Ako class atributa
želite primeniti HTML
isti stil na elemenata
više HTML za deklarisanje
elemenata CSSilipravila
različitih tipova, na samo neke elemente datog
tipa, koristimo stilizovanje klasa elemenata. Imena grupa se postavljaju u okviru atributa class HTML
elementa.
Detaljno objašnjenje principa primene class atributa za deklarisanje CSS pravila izlazi iz
okvira školskog nivoa izučavanja.
Više o primeni klasa saznajte na sajtu: https://www.w3schools.com/css
Okvirne linije
11
Paleta boja
Prikaz box modela
12

CSS Teorija

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Teorija

Uploaded by

Copyright:

Available Formats

Veb dizajn | Teorija CSS

Kaskadni stilovi - CSS

Ovako zapisan stil nazivamo CSS pravilo.

Pozicija unosa CSS-a?

1. U liniji sa deklaracijom taga:

2. Interni u okviru zaglavlja:

3. Eksterni u posebnom fajlu van html dokumenta

Princip nasleđivanja i CSS # selektor

CSS selektor na osnovu id atributa taga

Svojstva koja definišu granice elementa

Tekstualni sadržaj u pasusu. Prostor HTML elementa - BOX

padding border margin

 Background-color – boja pozadine

 Border -ivica elementa (okvirne linije prostora)

o Primer postavljanja pojedinačnih spoljnih margina (box-a) za <p> tag:

margin - right: 20px;

h konstruktor - CSS pravila za elemente web stranice koji prikazuju naslove

CSS pravila Opis primene

p konstruktor - CSS pravila za elemente web stranice koji prikazuju pasuse

CSS pravila Opis primene

a konstruktor - CSS pravila za elemente web stranice koji prikazuju linkove

CSS pravila Opis primene

CSS pravila Opis primene

hr konstruktor - CSS pravila za element web stranice koji prikazuje linije

CSS pravila Opis primene

li konstrultor - CSS pravila za element web stranice koji prikazuje nabrajanja

CSS pravila Opis primene

CSS pravila Opis primene

marquee konstruktor – CSS pravila za prikaz pokretnog teksta

CSS pravila Opis primene

Dodatna podešavanja za prikaz pokretnog teksta na sajtu https://www.w3schools.com/css

body konstruktor – CSS pravila pozadine web stranice

Primer1 | Fiksna slika

Primer 2 | Slika se ponavlja po x osi

Prikaz box modela

You might also like