Još malo CSS refactoringa
U prijašnjem postu smo napravili malo lijepši kod sa još dva paragraph elementa. U ovome postu ćemo prijašnji kod pretvoriti u još čišći kod.
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: purple;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
p {
color: green;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Naziv stranice</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Ovo je tekst koji nije naslov.</p>
<p>Ovo je još jedan tekst ispod.</p>
</body>
</html>
Kada gledamo naš kod, prvo što vidimo je da u oba elementa koristimo isti font. Ako napravimo još jedan element koji nema h1 ili p tag, font će biti drugačiji od stiliziranih elemenata. Cilj nam je da cijela web stranica koristi isti font, osim kod nekih određenih elemenata.
Za to možemo iskoristiti <body> tag koji imamo definiran. Unutar <style> taga na vrh, prije h1 elementa možemo staviti body element, kako je već za h1 i p element. Unutar body elementa u CSS-u možemo definirati font-family property sa istim fontovima, koji će se primjenjivati na sve elemente unutar body taga u HTML-u. Nakon toga možemo slobodno pobrisati pobrisati font-family property-e iz h1 i p elemenata.
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: purple;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
p {
color: green;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
Iz primjera gornjeg koda brišemo font-family property za h1 i p elemente. Krajnji rezultat našeg <style> taga treba izgledati kao kod ispod.
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: purple;
font-size: 30px;
}
p {
color: green;
font-size: 16px;
}
</style>
Kako je <body> element glavni element, i unutar njega se nalaze ostali elementi, njegov font-family property se sada primjenjuje na sve elemente koji su unutar njega. Možemo sada spremiti promijene u kodu i osvježiti stranicu.
Nema nikakve promijene u prikazu! Stranica izgleda kako je izgledala i prije. Zašto smo to napravili? Ako nakon nekog vremena hoćemo promijeniti font, sada to možemo napraviti na jednom mjestu, umjesto da tražimo po svim elementima i po njima radimo promjene.
Sada možemo property veličine i boje fonta isto staviti u body element. Zašto? Isto kao i za font, u većini slučajeva gotovo svi elementi će imati istu veličinu i boju fonta.
Kada to napravimo ostaje nam kod kao u primjeru ispod.
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: green;
}
h1 {
color: purple;
font-size: 30px;
}
p {
}
</style>
Kako nam je p element prazan, možemo ga kompleto pobrisati iz <style>.
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: green;
}
h1 {
color: purple;
font-size: 30px;
}
</style>
Zašto je naslov onda druge boje i veličine?
<body> je glavni element ili se još zove parent element. Dok je <h1> child element <body> elementu. Kada definiramo stil za parent element, on pregazi sav stil koji nije definiran u child elementu. Kako su boja i veličina definirani u child elementu, odnosno, <h1> elementu, parent element neće pregaziti taj stil. Samo ako child element nema definiran CSS property u parent elementu, stil iz parent elementa će pregaziti njegove property-e sa svojima, u suprotnome ne. To možemo dokazati tako da pobrišemo stil za h1 element i ostavimo samo za body. Boja <h1> elementa sada je zelena i rezultat će biti kao na slici ispod.
Zašto je onda veličina teksta u h1 elementu veća?
Svaki web preglednik ima svoje definirane vrijednosti za određene elemente. Tako i za <h1> element. Web preglednik dodaje svoj CSS sa nekim property-ima i ako ne "pregazimo" njegov property, vidjeti ćemo stil koji nam je dao web preglednik. U ovom slučaju, h1 property nismo "pregazili" sa body property-em jer h1 već ima definiran property, a to je od web preglednika. Da ga pregazimo moramo isti property definiratu baš u h1 elementu, a to je font-size.
Natrag na refactoring!
Nakon što smo razjasnili CSS odnos paretn-child elemenata, ostala nam je još jedna sitnica za promijeniti u kodu. A to je izdvojiti HTML od CSS-a.
Inline CSS
Prvo sam pokazao kako se CSS piše direktno unutar HTML tagova. Takvo pisanje CSS zove se inline CSS. Nedostatak takvom pisanju je nepregledan kod i ako imamo više istih elemenata, stil moramo promijeniti na svakom elementu, ako ih ima puno, to se pretvara u pakao!
Internal CSS
Drugi stil je koji smo upravo sada koristili, a zove se internal CSS. To je CSS koji pišemo unutar <style> taga. Što njemu fali? Prvi razlog je ako imamo puno CSS-a u našem kodu, moramo dugo tražiti po kodu da dođemo do HTML-a. Drugi razlog je što imamo sve u jednoj CSS dokumentu i teže ćemo se snaći da saznamo koji dio CSS-a ima koju svrhu. Treći razlog je ako imamo nekoliko sličnih HTML dokumenata, koje imaju isti ili sličan stil, moramo promijene raditi na svim dokumentima. To također nije problem ako imamo neku sitnicu za napraviti, ali ako je više posla ili ima više HTML dokumenata, onda je to isto pakao!
External CSS
Zadnji stil se zove external CSS. Što to znači? CSS koji hoćemo koristiti na stranici pišemo u odvojenom dokumentu koja ima .css nastavak. Kada napišemo stil kakav želimo, umetnemo stil preko <link> taga koji stavimo unutar <head> taga. Kod učitavanja stranice web preglednik vidi da imamo nekakav vanjski CSS link koji želimo dodati stranici, otvori taj link i dodjeli CSS našoj stranici. Primjer kako izgleda tag je <link rel="stylesheet" href="index.css">. To je ujedino i najbolja praksa. Gotovo uvijek treba odvojiti HTML od CSS-a.
Idemo onda još i to ispraviti, pa smo gotovi sa prvom stranicom, obećajem da će biti brzo.
Odvajanje CSS-a od HTML-a
Prva stvar koja nam je potreba, a to je dokument u koji ćemo staviti CSS koji smo već napisali. Izređemo dio koji smo napisali u <style> tagu tako da označimo cijeli dio koji nam je CSS i držimo tipku Ctrl i pritisnemo tipku x (Ctrl+X) da izrežemo kod.
U text editoru držimo tipku Ctrl i stisnemo slovo n (Ctrl + N) da kreiramo novi dokument. Nakon toga nam se otvara novi dokument i samo držimo tipku Ctrl i stisnemo slovo v (Ctrl + V) da zalijepimo kod.
Sada spremimo dokument (Ctrl+S) i pronađemo mjesto gdje smo stavili naš index.html. I spremamo datoteku naziva index.css.
Kada smo to napravili, ostalo nam je samo povezati HTML i CSS. To radimo tako da u index.html dokumentu pobrišemo style tag i umjesto njega stavimo <link rel="stylesheet" href="index.css">.
Gdje rel="stylesheet" dio govori da je to CSS dokument. A href="index.css" dio govori koji je path/putanja do te datoteke, da pronađe index.css datoteku u istom folderu gdje je in index.html datoteka. Index.html sada treba izgledati kao kod ispod.
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Naziv stranice</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Ovo je tekst koji nije naslov.</p>
<p>Ovo je još jedan tekst ispod.</p>
</body>
</html>
Nakon toga kada spremimo index.html i osvježimo stranicu, trebamo vidjeti da je stranica ostala ista. Ako nema stila, provjeri da nisi slučajno stavio/stavila krivi path jer preglednik onda neće moći pronaći tu datoteku i prikazati je.
Čestitam na prvoj stranici!
U idućem postu počinjemo sa novom i kompleksijom stranicom!
Primjedbe
Objavi komentar