Embed Size (px)
Citation preview
PROGRAMIRANJE ZA INTERNET
Upute za laboratorijske vježbe (izradio: Marin Bugarić, Frano Rezo)
Osnove CSS-a
Lab. vježba
4
P R O G R A M I R A N J E Z A I N T E R N E T
1
Općenito o CSS-u
CSS - Cascading Style Sheets
askadni stilovi (eng. Cascading Style Sheets), odnosno CSS, koriste se za dizajniranje internetskih stranica. CSS opisuje kako će se HTML elementi prikazati na ekranu, papiru ili nekom drugom medijskom uređaju. Riječ je o jednostavnom mehanizmu kojim je omogućeno
odvajanje sadržaja od stila. Korištenje CSS-a izazvalo je revoluciju kod programiranja za Internet i to zahvaljujući nizu prednosti koje ima pred tabličnim layout-om (korištenje tablica za formiranje stranice). Najnovija verzija je CSS3 koja donosi neke velike novosti i još uvijek se radi na njezinoj nadogradnji. Korištenjem CSS-a kod postaje pregledniji te je moguće odvojiti prezentaciju podataka i dizajn od same strukture podataka. Mogućnosti HTML-a u svrhu dizajna ostale su relativno ograničene, upravo zbog toga što je tu ulogu preuzeo CSS. Jedna od prednosti korištenja CSS-a je i u tome što se na isti HTML kôd može primijeniti nekoliko različitih stilova i time mijenjati izgled same stranice. Na slici ispod imamo dva primjera internetske stranice koja ima identičan sadržaj (HTML):
C S S K
O D V A J A N J E
D I Z A J N A
2
Struktura i sintaksa CSS-a
Stilski obrasci sastoje se od stilskih pravila. Svako pravilo ima dva dijela:
• Selektor: Određuje element na koji se stilsko pravilo odnosi
• Deklaracija: Određuje kako izgleda sadržaj opisan CSS-om. Dijeli se na dva dijela: svojstvo i vrijednost. Svojstvo se od vrijednosti u deklaraciji odvaja dvotočkom, svaka deklaracija završava s točkom-zarez, a deklaracijski blokovi su okruženi vitičastim zagradama.
Sintaksa po kojoj se definira stilsko pravilo je prikazana na sljedećem primjeru:
Slika 1. Sintaksa CSS-a
Ukoliko imamo nekoliko svojstava koje želimo kombinirati, CSS nam dozvoljava kombiniranje nekoliko deklaracija u jedno stilsko pravilo koje utječe na karakteristike prikaza pojedinog selektora.
Slika 2. Sintaksa CSS-a za više svojstava
Kao i kod HTML-a, kod CSS-a je također bitna preglednost kôda, pa se zato
preporučuje način pisanja kao u sljedećem primjeru:
h1 {
color: red;
text-align: center;
background-color: #333333;
}
S I N T A K S A
P R E G L E D N O S T
3
Uključivanje CSS-a u stranicu
Tri su načina implementiranja CSS-a:
1. INLINE – Piše se neposredno uz sadržaj, tj. unutar otvarajućeg taga.
Definira unikatni stil za samo jedan element (rijetko se koristi).
Primjer:
<p style="font-size: 12px; color: red;">Tekst na koji se odnosi stil</p>
Rezultat:
Tekst na koji se odnosi stil
2. INTERNAL – Piše se u <style> elementu u okviru <head> dijela HTML-a. Definira unikatni stil za samo jednu stranicu (također se rijetko koristi).
Primjer:
<!DOCTYPE html> <html>
<head> ... <style> p { color: red; text-align: center; } span { font-weight: bold; font-size: 24px; } </style> </head> <body> <p>Tekst na koji se odnosi <span>stil</span></p> </body>
</html>
Rezultat:
Tekst na koji se odnosi stil
3. EXTERNAL – Piše se kao vanjski CSS dokument. Definira izgled jedne ili više stranica pomoću stilova zapisanih u samo jednom dokumentu . Svaka stranica mora sadržavati referencu na vanjski CSS dokument koristeći <link> element unutar <head> dijela:
<head> ... <link rel="stylesheet" type="text/css" href="styles/stil.css"> </head>
CSS dokument se mora spremiti s ekstenzijom .css (npr. moj_stil.css). Također, unutar jednog CSS dokumenta se mogu uključivati i ostali CSS dokumenti koristeći naredbu:
@import url("./moj_stil.css")
I N L I N E
I N T E R N A L
E X T E R N A L
4
Ako imamo više stilova za jedan element, postavlja se pitanje koji stil će se primijeniti? Zbog toga je uveden kaskadni redoslijed koji sav stil grupira u jedan „virtualni“ stil i poreda ga prema prioritetu kako je u nastavku definirano (najveći prioritet ima broj 1):
1. „Inline“ stil (unutar HTML elementa)
2. „External“ i „Internal“ stilovi (u <head> sekciji)
3. „Browser default“
CSS Box Model
Kao što se već spominjalo u prethodnoj vježbi, svaki HTML element je u biti
pravokutna „kutija“ (eng. Box Model) u koju spremamo sadržaj. Stoga se može reći da se HTML element sastoji od 4 dijela:
• Sadržaj (eng. content) – definira područje unutar kojeg se nalazi sadržaj elementa (npr. tekst ili ostali elementi)
• Padding – definira područje od ruba sadržaja do obruba elementa (zeleno područje na slici 3.)
• Border (hrv. obrub, granica) – definira liniju koja se nalazi između padding-a i margina (žuto područje na slici 3.)
• Margin – definira područje od obruba/granice elementa do susjednih elemenata (crveno područje na slici 3.). Napomena: Može koristiti negativne vrijednosti.
Slika 3. CSS Box Model
P R I O R I T E T
S T I L O V A
B O X
M O D E L
5
Pozicioniranje
Svaki element na internetskoj stranici moguće je pozicionirati po želji kreatora. Poziciju elementa moguće je promijeniti korištenjem CSS position svojstva. Razlikuje se 5 različitih vrijednosti position svojstva:
• static (default value)
• relative
• fixed
• absolute
• sticky
Ukoliko ne mijenjamo position svojstvo za kutiju, ona će se ponašati kao da je
definirano pravilo position: static;. Elementi u ovom slučaju se pozicioniraju
na prirodan način, odnosno onim redoslijedom kako se pojavljuju u HTML kodu. Drugim riječima, block elementi se pozicioniraju vertikalno jedan iznad drugog, a inline elementi se pozicioniraju horizontalno s lijeva na desno dok se ne popuni cijeli redak. Primjer dvaju blok elemenata, ukoliko je postavljeno: position: static; Ukoliko za određeni element, definiramo da je position: relative;, treba voditi računa o sljedećem: Svi okolini elementi se u početnom trenutku pozicioniraju identično kao da je riječ o statičnom pozicioniranju. Ipak, dotičnu kutiju moguće je pomicati u bilo kojem smjeru, a kao referentna točka uzima se njena početna pozicija. Primjer tri blok elementa, drugi element pomaknut je udesno i prema dolje. Ukoliko za element definiramo svojstvo position: absolute;, svi se okolni elementi pozicioniraju kao da dotična kutija ne postoji, a kao referentnu točku za pozicioniranje dotične kutije uzimamo njen najbliži roditeljski element koji ima definiran position na bilo koju drugu vrijednost osim static. Ukoliko takav ne postoji, uzima se element <body> odnosno referentna točka postaje gornji lijevi rub stranice.
P O S I T I O N
S T A T I C
P O S I T I O N
R E L A T I V E
P O S I T I O N
A B S O L U T E
6
Primjer tri inline elementa, s tim da je za drugi element postavljeno svojstvo position: absolute; te je od gornjeg lijevog ruba stranice pomaknut udesno i prema dolje.
Poseban slučaj je kad za element definiramo svojstvo position: fixed;, tada se taj element na stranici nikada ne pomiče, čak ni prilikom „scroll“-anja mišem. Primjer tri inline elementa, s tim da je pozicija trećeg elementa fiksno određena.
Kao veza između relative i fixed pozicioniranja, javlja se position: sticky; koje se pozicionira ovisno o poziciji korisnikovog „scroll“-anja. Tako imamo primjer da je element pozicioniran relative sve dok „scroll“-anjem ne dođemo do tog elementa. On se tada „zalijepi“ za dio stranice i ponaša kao fixed element. Kod ovakvog pozicioniranja treba napomenuti da trenutno nije podržan u Internet Explorer-u, Edge 15 i ranijim verzijama, Safari traži -webkit- prefiks, a obavezno je uz njega definirati barem jedno svojstvo od sljedećih: top, right, bottom, left. Primjer se može pronaći na sljedećoj poveznici: https://www.w3schools.com/howto/howto_css_sticky_element.asp z-indeks – broj koji definira hijerarhiju prikazivanja elemenata koji se preklapaju. Što je broj veći, tada se može reći da se nalazi na višem sloju od ostalih elemenata s kojima se preklapa. Razmišljajući na taj način, Internetsku stranicu možemo shvatiti kao sliku koja se sastoji od nekoliko slojeva, odnosno layer-a, gdje je sloj s najvećim brojem prvi vidljiv, dok su ostali elementi ispod njega. Ostala bitna svojstva za pozicioniranje su: float i clear.
P O S I T I O N
F I X E D
P O S I T I O N
S T I C K Y
Z - I N D E X
7
Pseudo klase i elementi
Pseudo klase koristimo da bismo definirali različita „stanja“ elemenata. Kao primjer, pseudo klase se koriste kada mišom pređemo preko elementa, prilikom fokusa na unos teksta ili za stiliziranje posjećenih i neposjećenih linkova na web stranici. Sintaksa pseudo klasa je definirana na sljedeći način:
selektor:pseudo-klasa {
svojstvo: vrijednost;
}
Detaljnije o pseudo klasama možete pronaći na: https://www.w3schools.com/css/css_pseudo_classes.asp
Pseudo elemente koristimo da bismo stilizirali različite dijelove elementa. Kao primjer, pseudo elementi se koriste za stiliziranje prvog slova ili prve linije elementa, za umetanje sadržaja neposredno prije ili poslije sadržaja elementa i sl.. Sintaksa je slična pseudo klasama:
selektor:pseudo-element {
svojstvo: vrijednost;
}
Više o pseudo elementima možete pronaći na: https://www.w3schools.com/css/css_pseudo_elements.asp
P S E U D O
K L A S E
P S E U D O
E L E M E N T I
Primjeri:
a:visited {
color: pink;
}
a:hover {
color: green;
}
Primjer:
h1::after {
content: "*";
}
8
Komentari u CSS-u
Kao i u HTML-u, u CSS-u je također moguće je dodavati komentare koji nam pomažu pri dokumentiranju kôda, služe za zapisivanje podsjetnika i obavijesti ukoliko su nam potrebni. Komentari u CSS-u nisu vidljivi na web stranici i pišu se između znakova „/*„ i „*/“. Primjer komentara u CSS-u:
/* Ovo je komentar */
p { color: blue; }
/* Ovo je komentar u
više linija i piše se
isto kao i za jednu liniju */
Važniji selektori
CSS ima mnoštvo selektora, no u nastavku ćemo izdvojiti samo one najvažnije u tablici 1. Sve CSS selektore možete pogledati na sljedećoj poveznici: https://www.w3schools.com/cssref/css_selectors.asp
Selektor Primjer Opis
.class .naslov Dohvati SVE elemente s class="naslov"
#id #tablica Dohvati JEDAN element s id="tablica"
* * Dohvati sve elemente na stranici
element p Dohvati sve elemente s određenim tagom (npr. sve <p> elemente)
element.opis p.opis Dohvati sve elemente s određenim tagom koji imaju klasu opis (npr. sve <p> elemente s class="opis")
element1 element2 div p Dohvati sve elemente2 koji su ugniježdeni u elementu1 (npr. sve <p> elemente unutar <div> elemenata)
element1, element2 div, p Dohvati sve elemente1 i sve elemente2 (npr. sve <div> i sve <p> elemente)
element1 > element2 div > p Dohvati sve elemente2 koji su direktno dijete elementa1 (npr. sve <p> elemente koji su direktno dijete <div> elementa)
element1 + element2 div + p Dohvati sve elemente2 koji slijede odmah nakon elementa1 – „prvi susjed“ (npr. sve <p> elemente koji dolaze odmah nakon <div> elemenata)
[atribut] [title] Dohvati sve elemente koji sadrže određeni atribut (npr. sve elemente s title atributom – nije bitna njegova vrijednost)
Tablica 1. Najvažniji CSS selektori
K O M E N T A R I
V A Ž N I J I
S E L E K T O R I
9
Važnija svojstva
font Sva svojstva teksta u jednoj deklaraciji font-family Specificiranje font family za tekst
• family-name - "times", "courier", "arial", etc.
• generic-family - "serif", "sans-serif", "cursive", "fantasy", "monospace".
font-size Specificiranje veličine teksta xx-small x-small small medium large x-large xx-large smaller larger length % font-style Specificiranje stila teksta normal italic oblique font-variant Specificiranje hoće li se tekst prikazati u „small-caps“ obliku normal SMALL-CAPS font-weight Specificiranje koliko je tekst „masan“
normal bold bolder lighter 100 200 ... 900
color Boja teksta direction Smjer pisanja teksta letter-spacing Definira razmak među slovima line-height Visina linije text-align Horizontalno poravnavanje teksta text-decoration Dodaje dekoraciju (ukrase) tekstu text-indent Uvlačenje prve linije teksta text-shadow Efekt sjena text-transform Prvo slovo veliko vertical-align Vertikalno poravnavanje teksta white-space Specificiranje kako se obrađuje razmak word-spacing Razmak između riječi
font-family - font, npr Arial, sans-serif ... font-size - veličina fonta font-style - italic, none, blique font-weight - light, bold, normal letter spacing - razmak meďż˝u slovima line-height - razmak među recima text-align - right, left, justify text-ident - pomak prvog slova u paragrafu
background-image : url() – pozadinska slika background-position – pozicioniranje pozadine background-repeat: - no, repeat background-color – boja pozadine
F O R M A T I R A N J E
F O N T O V A
F O R M A T I R A N J E
T E K S T A
I S P I S
T E K S T A
P O Z A D I N A
10
Zadatak
Pripremiti radni direktorij/mapu za vježbu 4 kao i u prethodnim vježbama. Nastaviti kroz sljedeće zadatke: (Napomena: Pri čitanju zadataka pratiti sliku na posljednjoj stranici)
• Body i Header:
1. Kreirati mapu/direktorij „styles“ i „stil.css“ dokument unutar njega. Povezati taj CSS dokument s HTML dokumentom.
2. Cijelom vidljivom dijelu stranice ukloniti margine, definirati boju teksta u „#333333“ i font: 'Pacifico', cursive;
3. Svim elementima definirati box-sizing u border-box. 4. Prvom <div> elementu unutar <body>-a dodijeliti id s vrijednosti „wrapper“. U CSS dokumentu
mu definirati boju pozadine u „#fafafa“. 5. Element <header> pozicionirati na vrhu koristeći sticky svojstvo pozicioniranja. Za pozadinsku
boju staviti „#c00a27“, padding po 16px gore i dole, z-index neka bude veći od 1. 6. Sav sadržaj unutar <header> elementa obuhvatiti <div> elementom i dati mu klasu „container“.
U CSS-u toj klasi dati maksimalnu širinu na 1140px, centrirati sadržaj pomoću margina i dati padding od 16px na lijevu i desnu stranu.
7. Naslov za ime loga pozicionirati kao inline-block, boja neka bude bijela, bez margina, padding 12px lijevo i desno, veličina fonta 32px, a visina reda 1.4em.
8. Samu navigaciju premjestiti u desno koristeći float svojstvo i dati padding 10px gore i dole. 9. Linkovima navigacije dati klasu „nav-links“, ukloniti podvučenu liniju, tekst neka je 18px,
podebljan na 600, obojan u bijelo s padding-om 12px lijevo i desno.
• Cover slika:
1. Sekciji dati id „cover“, pozicionirati je relativno, s pozadinskom bojom kao i <header>, te s gornjom granicom debljine 1px, pune linije i boje rgba(255, 255, 255, 0.3);.
2. Slici ukloniti atribut „width“, definirati širinu na 100%, ali je ograničiti na 1140px, centrirati pomoću margina i prikazati kao blok.
3. Elementu <div> nakon slike dati id „cover-text“, pozicionirati ga apsolutno, centrirati tekst, ukloniti padding, left i right svojstva postaviti na 0, a top na 36%. Također dati klasu „container“ tom elementu.
4. Naslovu <h1> definirati po 8px margine gore i dole, obojati tekst u bijelo i pretvoriti ga u velika slova, fonta veličine 54px, a linije visine 1.4em.
5. Opisu naslova (<small> element) definirati font od 28px, debljine 500, donje margine 16px, prikazati ga kao blok i dati prozirnost 0.9 na bijelu boju teksta.
6. Akcijskom linku dati klasu „action-btn“, ukloniti dekoraciju, definirati pozadinu boje „#78bb1b“, tekst bijele boje, padding 12px (gore i dole) i 36px (lijevo i desno), te radijus (zaobljenost) granice od 23px.
7. Između slike i #cover-text elementa kreirati <div> element s id-om „bg-gradient“ bez ikakvog sadržaja. Taj element pozicionirati apsolutno na vrhu (top: 0;), s visinom i širinom po 100% i pozadinskom slikom: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);.
11
• Akcije i naslovi ostalih sekcija:
1. Sekciji za akcije uz predefiniran id dodati i klasu „section-box“. Toj klasi definirati padding kao 80px 0 40px;. Istu tu klasu pridijeliti na iduće dvije sekcije: Cjenik i Kontakt.
2. Prvom naslovu u sekciji dati klasu „section-title“ i unutar nje centrirati tekst od 26px, visine linije od 2em i bez margina. Istu tu klasu pridijeliti prvom naslovu u iduće dvije sekcije.
3. Odmah ispod tog naslova kreirati <span> s klasom „title-underline“ koja je širine 80px, visine 3px, pozadinske boje kao i <header>, centriran pomoću margina sa 6px gore i dole i prikazom kao blok.
4. Bloku koji drži 3 artikla dati id „pizzas-holder“ s padding-om od 40px gore i dole i centriranim tekstom.
5. Svakom artiklu dati klasu „pizza-card“ koji ima display: inline-block; širinu od 300px, margine 4px lijevo i desno, padding-om 20px (gore i dole) i 16px (lijevo i desno), prozirnu granicom od 2px pune linije.
6. Koristeći pseudo-klasu „:hover“, definirati da se mijenja pozadinska boja u bijelo i boja granice u „#eee“ kada se prijeđe mišom preko elementa s klasom „pizza-holder“.
7. Slici artikla dati klasu „pizza-image“ koja je širine 100%, maksimalne širine 200px i centrirana pomoću margina.
8. Paragrafu artikla dati klasu „pizza-description“ koja definira veličinu fonta u 14px i boje #777. 9. Elementu <span> dati klasu „pizza-price“ s fontom veličine 80%, te elementu <em> definirati
veličinu fonta na 20px s lijevim padding-om od 4px. 10. Dugmetu <button> dati klasu „pizza-button“ koju je potrebno prikazati kao blok centriran
pomoću margina s 12px gore i dole, padding-om 8px gore i dole. Definirati font kao i za body, veličine 16px, prozirne granice pune linije od 2px, pozadinske boje kao <header>, bijele boje teksta, širine 150px, zaobljenosti/radijusa ruba od 22px i ukloniti „outline“.
12
![CSS & eCSStender [CSS Summit 2011]](https://img.dokumen.tips/doc/110x75/54c70c6e4a79593f288b4656/css-ecsstender-css-summit-2011.jpg)
