CSS

Literatura

CSS: osnovni pojmovi

CSS: jezik za opis izgleda dokumenata

napisanih u HTML, XML, ...

mogu se odrediti svi bitni parametri prikaza
novine u CSS verziji 3

efekti (transformacije) - ukida potrebu za komplikovanim animacijama ili pluginovima

CSS: osnovni pojmovi

isti CSS može se koristiti za više od jedne stranice, što znači da stil celog veb sajta može biti prilagođen bez menjanja svake stranice posebno
primena konzistentnih stilova na svim stranicama pomaže unificiranju vizuelnog identiteta web stranica
web čitači imaju predefinisani skup stilova koje primenjuju ako ne definišemo svoje stilove

Povezivanje HTML i CSS

putem eksternog fajla sa CSS stilovima

<head>
  <link rel="stylesheet" href="path/to/my.css"/>
</head>

interno u HTML fajlu, u okviru style taga unutar head

<head>
  <style type="text/css">
    ...
  </style>
</head>

atribut style u bilo kom HTML elementu

<p style="...">
    ...
</p>

Box model

CSS sintaksa

skup CSS pravila se sastoji od selektora i bloka deklaracija
selektor definiše na koji element (ili elemente) se primenjuju pravila navedena u bloku deklaracija
deklaracija se sastoji od naziva osobine i njene vrednosti

Selektor

određuje na koje elemente se primenjuje pravilo
govori web čitaču šta treba da stilizuje
tri osnovne vrste selektora

element selektori
id selektori
class selektori

Element selektor

pronalazi elemente sa datim nazivom


p { 
  background: #363636; 
  padding: 10px;  
}

Id selektor

pronalazi najviše jedan element sa datom vrednošću atributa id
na početku selektora je znak #


<div id="container">...</div>


#container { 
  background: #363636; 
  padding: 10px;  
}

Class selektor

pronalazi elemente čiji atribut class sadrži datu vrednost
na početku selektora je znak . (tačka)
atribut class može sadržati više vrednosti


<p class="center no-margin">...</p>
<div class="no-margin">...</div>


.center { 
  text-align: center;
} 

.no-margin { 
  margin: 0;  
}

Univerzalni selektor

označava da se stil odnosi na sve elemente
piše se kao znak *


* { 
  font-family: Roboto, Verdana, sans-serif;
} 
 
div.poem * { 
  font-family: serif;  
}

Grupisanje selektora

ako imamo selektore sa istim definicijama, radi konciznosti možemo ih grupisati
prilikom grupisanja razdvajamo ih zarezom


h1, h2, p.center { 
  text-align: center;
}

Selektori za potomke

kada se stil primenjuje samo na potomke određenog elementa
dva oblika:

za direktne naslednike (decu)


ul > li { 
  text-align: left;
}

za sve potomke


ul li { 
  text-align: left;
}

Selektori i pseudo-klase

izbor elemenata koji imaju neko posebno stanje


a:hover { 
  color: red;
}

često se koriste: :first-child, :last-child, :nth-child, :empty, ...

Kombinovanje selektora

kombinovanjem selektora mogu se pronaći specifični elementi


div.container div.row > p:nth-child(2n) { 
  color: red;
}

ul > li:nth-child(even) {
  color: blue;
}

Jedinice mere

apsolutne izražavaju veličinu u datim jedinicama
najčešće u pikselima (px), ali i cm, mm, in, pc, pt
relativne izražavaju veličine u odnosu na neke referentne vrednosti

Relativne jedinice

omogućavaju formatiranje stranice u skladu sa veličinom prikaza
najčešće se koristi %

100% se najčešće odnosi na veličinu roditeljskog elementa
100% za tekst je podrazumevana veličina fonta (ako zoom nije menjan to je 16px)

em: visina "em" razmaka za tekući font
ex: visina malog slova "x" za tekući font
vh: 1% trenutne visine viewporta
vw: 1% trenutne širine viewporta
vmin: 1vh ili 1vw šta god da je manje

Formatiranje teksta

najčešće osobine koje se podešavaju su oblik slova, veličina slova, poravnanje, "težina", boja, boja pozadine...

color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-shadow

text-transform
unicode-bidi
vertical-align
white-space
word-spacing
font-family
font-style
font-weight

Formatiranje blokova

koristi box model
podešavaju se sledeći atributi

margin: sve ili pojedinačno za svaku stranu
padding: sve ili pojedinačno za svaku stranu
border: sve ili pojedinačno za svaku stranu
width, height: u apsolutnim ili relativnim jedinicama
min-width, min-height, max-width, max-height

Formatiranje blokova: display

atribut display određuje kako se blok prikazuje u odnosu na ostatak sadržaja
block: (podrazumevano)
inline-block: kao inline elementi ali ima svoj width i height
none: ne zauzima prostor, kao da ne postoji
(različito od visibility: hidden kada se ne vidi ali rezerviše prostor)

Formatiranje blokova: position

osobina position određuje kako se blok pozicionira
static: (podrazumevano, ignoriše top, bottom, itd)
relative: relativno pomeren u odnosu na normalnu poziciju
pomoću osobina top, bottom, left, right
absolute: relativno u odnosu na najbližeg pozicioniranog pretka
ako ih nema, onda se uzima body;
pomera se sa skrolovanjem
fixed: relativno u odnosu na viewport
ne pomera se prilikom skrolovanja
ne zauzima prostor na stranici

Float i clear

osobina float omogućava da se element izdvoji iz normalnog rasporeda
da "pluta" levo ili desno

slika oko koje će biti tekst, a slika ide udesno:


img {
  float: right;
  margin: 0 0 10px 10px;
}

osobina clear zabranjuje raspoređivanje elemenata oko plutajućeg elementa
sa leve strane zabranjujemo raspoređivanje drugih elemenata:
```
div {
  clear: left;
}
            
```

Osobine specifične za web čitač

Mozilla čitači: Firefox
- -moz-
WebKit čitači: Chrome, Safari
- -webkit-
Opera
- -o-
Internet Explorer
- -ms-
- 
Ne rade sve CSS osobine u svim čitačima

CSS3

tekući standard za CSS
modularizovan standard
- selectors
- box model
- backgrounds and borders
- image values and replaced content
- text effects
- 2D/3D transformations
- animations
- multiple column layout
- user interface
- ... još ~40-tak

CSS3 novine

boje u rgba, hsl, hsla formatu
text-overflow: šta sa tekstom koji ne stane u blok
korišćenje web fontova


@font-face {
  font-family: mojnaziv;
  src: url(putanjadofonta.woff);
}

Složeni selektori

element1 ~ element2
braća element2 elementa1
element1 + element2
element2 neposredno posle elementa1
element[attr]
selektuje sve elemente koji imaju atribut
element[attr="value"]
selektuje sve elemente koji imaju atribut sa datom vrednošću
element[attr^="value"]
selektuje sve elemente čiji atribut počinje datom vrednošću
element[attr$="value"]
selektuje sve elemente čiji atribut završava datom vrednošću
element[attr*="value"]
selektuje sve elemente čiji atribut sadrži datu vrednost

Nove pseudoklase

:nth-child(n)
:nth-of-type(n)
:root
:target
:enabled
:disabled
:checked
:selection
:not(selector)

border-color

sivi gradijent u borderu


border: 18px solid #000; 
border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
padding: 5px 5px 5px 15px;

border-image


border-image: url(border.png) 27 27 27 27 round round;


border-image: url(border.png) 27 27 27 27 stretch stretch;

border-radius

border radius


#example1 {
  -moz-border-radius: 15px;
  border-radius: 15px;
}

box-shadow


#example1 {
  -moz-box-shadow: 10px 10px 5px #888;
  -webkit-box-shadow: 10px 10px 5px #888;
  box-shadow: 10px 10px 5px #888;
}

text-shadow


#example1 {
  text-shadow: 2px 2px 5px red;
}

prvi broj je x offset, drugi je y offset, opcioni treći je radius rasipanja senke, četvrti je boja

column-count

za slaganje sadržaja u više kolona


.clanci {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
  -moz-column-count: 2;    /* Firefox */
  column-count: 2;
}

2D i 3D transformacije

translate()
rotate()
scale()
skewX()
skewY()
matrix()

translateX()
translateY()
translateZ()
translate3d()
rotateX()
rotateY()
rotateZ()
rotate3d()
scaleX()
scaleY()
scaleZ()
scale3d()
matrix3d()
perspective()

Tranzicije

transition-delay: broj sekundi pre nego što tranzicija počne
transition-duration: trajanje tranzicije
transition-property: na koju osobinu se tranzicija odnosi
transition-timing-function: oblik funkcije za tranziciju
ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)
transition: omogućava da se sve podesi u jednoj osobini

Media queries

za iste elemente definišemo različite stilove zavisno od konteksta
mediatype: najčešće
all, print, screen, speech
opšti oblik


@media not|only mediatype and (expressions) {
  ... 
}

Media queries za responsive design


/* phone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {...}

/* tablet */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {...}

/* tablet portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {...}

/* tablet landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {...}

CSS nasleđivanje

primer:


.container {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  border: 5px solid red;
}


<div class="container">
  <p>Lorem ipsum...</p>
</div>

div sadrži p;
p je nasledio font-family i font-size,
ali nije nasledio border

.

CSS nasleđivanje

p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.special {
  font-size: 24px;
  color: red;
}


<p>Lorem ipsum...</p>
<p class="special">Lorem ipsum...</p>

oba p taga imaju font-family i font-size
drugi p ima redefinisanu veličinu fonta
drugi p ima novu boju teksta

CSS rezolucija konflikta

za datu osobinu, pronađi sve deklaracije koje se primenjuju na element
sortiraj deklaracije u skladu sa značajem i poreklom
deklaracije sa istim značajem i poreklom sortiraj prema specifičnosti selektora
ako imaju isti značaj, poreklo i specifičnost, sortiraj ih u redosledu kojim su definisane (poslednja pobeđuje)

CSS rezolucija konflikta

poreklo deklaracije: web čitač < korisnik < autor
značaj deklaracije: običan < !important

Redosled važnosti od najmanje do najveće:

deklaracije web čitača
normalne deklaracije korisnika
normalne deklaracije autora
značajne deklaracije korisnika
značajne deklaracije autora

CSS osobine i nasleđivanje

neke osobine se nasleđuju
a neke druge se ne nasleđuju
za svaku osobinu se zna da li se nasleđuje ili ne

Zadatak #01

Pronađite zadaci/css/zadatak01 u repozitorijumu

Zadatak #02

Pronađite zadaci/css/zadatak02 u repozitorijumu

Zadatak #03

Analizirajte CSS3 animaciju

CSS

Cascading Style Sheets

Literatura

CSS: osnovni pojmovi

CSS: osnovni pojmovi

Povezivanje HTML i CSS

Box model

CSS sintaksa

Selektor

Element selektor

Id selektor

Class selektor

Univerzalni selektor

Grupisanje selektora

Selektori za potomke

Selektori i pseudo-klase

Kombinovanje selektora

Jedinice mere

Relativne jedinice

Formatiranje teksta

Formatiranje blokova

Formatiranje blokova: display

Formatiranje blokova: position

Float i clear

Osobine specifične za web čitač

CSS3

CSS3 novine

Složeni selektori

Nove pseudoklase

border-color

border-image

border-radius

box-shadow

text-shadow

column-count

2D i 3D transformacije

Tranzicije

Media queries

Media queries za responsive design

CSS nasleđivanje

CSS nasleđivanje

CSS rezolucija konflikta

CSS rezolucija konflikta

CSS osobine i nasleđivanje

Zadatak #01

Zadatak #02

Zadatak #03

Kraj dela