Back to the topics list

kaskadni stilski listovi

Kaskadni stilski listovi ( CSS ) u web razvoju

Kaskadni stilski listovi ili CSS jezik su koji web stranici govori kako da izgleda. CSS dodaje boju, stil i raspored jednostavnoj strukturi web stranice. Baš kao što birate odjeću kako biste se osjećali dobro i izgledali uredno, CSS pomaže web stranici da se uredi i izgleda atraktivno. U web razvoju koristimo CSS za promjenu boje, veličine i položaja teksta i okvira na stranici. Ova lekcija će vas upoznati s osnovama CSS a jednostavnim jezikom. Naučit ćemo što je CSS , zašto je važan i kako radi s HTML-om.

Uvod u CSS

CSS je kratica za Cascading Style Sheets (Kaskadne tablice stilova). To je poseban jezik koji se koristi za stiliziranje web stranica. Zamislite CSS kao boju i ukrase za zgradu. Zgrada je napravljena od HTML , a CSS je čini lijepom. Pomoću CSS a možete promijeniti boju pozadine, stilove fonta i prostor oko elemenata na svojoj web stranici. CSS je alat koji pomaže web dizajnerima da web stranice izgledaju bolje i zabavnije.

Zamislite da bojite crtež. Linije crteža su poput osnovne strukture web stranice. CSS je poput bojica i markera koji crtežu daju život. Uz nekoliko jednostavnih pravila, možete promijeniti cijeli crtež iz običnog u šareni!

Zašto koristimo CSS

CSS se koristi kako bi web stranice bile privlačne i jednostavne za korištenje. Odvaja stil od sadržaja. To znači da riječi i slike na stranici (koje pruža HTML ) ostaju iste, dok CSS kontrolira njihov izgled. Kada ažurirate stil, ne morate mijenjati sadržaj. Ovo odvajanje pomaže web programerima da brže rade i čini stranice ugodnijima za posjet.

Zamislite CSS kao odjeću koju odaberete. Ako nosite drugačiju odjeću, izgledate drugačije, ali ste i dalje ista osoba. CSS mijenja izgled web stranice bez promjene informacija na njoj. To olakšava ažuriranje dizajna cijele web stranice uređivanjem samo jedne CSS datoteke.

Kako CSS funkcionira

CSS radi ruku pod ruku s HTML. HTML je temelj koji određuje gdje se stvari nalaze na web stranici. CSS zatim dolazi na scenu kako bi dodao boje, fontove i stil. Kada preglednik učita web stranicu, prvo gradi strukturu pomoću HTML-a, a zatim primjenjuje stilove definirane u CSS .

CSS je napisan kao skup pravila. Svako pravilo ima dva dijela: selektor i blok deklaracije. Selektor govori pregledniku koji HTML element treba stilizirati. Blok deklaracije sadrži jednu ili više deklaracija. Svaka deklaracija ima svojstvo i vrijednost. Svojstvo je ono što želite promijeniti, a vrijednost govori kako to promijeniti.

Na primjer, da biste postavili boju pozadine stranice na svijetloplavu, možete napisati pravilo koje izgleda ovako:

 <code>tijelo {
    boja pozadine: svijetloplava;
} ...

Ovo jednostavno pravilo mijenja pozadinu cijele stranice.

Osnovna sintaksa CSS a

Osnovno CSS pravilo slijedi jednostavan obrazac. Prikazuje selektor i blok svojstava i vrijednosti. Uzorak izgleda ovako:

 <code>selektor {
    svojstvo: vrijednost;
} ...

Ovdje selektor odabire koji HTML element će ciljati. Svojstvo je ono što želite promijeniti, a vrijednost je kako to želite promijeniti.

Na primjer, ako želite da cijeli tekst odlomka bude plav, napišete:

 <code>p {
    boja: plava;
} ...

Ovo pravilo govori web pregledniku da svaki <p> ​​(paragraf) element treba imati plavi tekst.

CSS selektori

CSS selektori vam omogućuju odabir elemenata na vašoj web stranici na koje će se primjenjivati ​​stilska pravila. Postoji nekoliko vrsta selektora, a svaki od njih radi malo drugačije.

• Selektor tipa: Ovaj selektor cilja sve elemente određenog tipa. Na primjer, <code>p {}<code> odabire svaki odlomak na stranici.
• Selektor klase: Ovo cilja elemente koji imaju određeni atribut klase. U HTML-u pišete <code><p class="greeting"></code>, a u CSS y u ga ciljate s <code>.greeting {}<code>.
• Selektor ID-a: Koristi se za jedinstveni element na stranici. Element može imati atribut ID-a kao što je <code><h1 id="header"></code>. U CSS, možete stilizirati taj element pomoću <code>#header {}<code>.

Ovi različiti selektori daju vam mnogo mogućnosti za stiliziranje određenih dijelova vaše web stranice. Omogućuju vam precizno ciljanje elemenata i odlučivanje kako bi trebali izgledati.

CSS svojstva i vrijednosti

CSS nudi mnogo različitih svojstava koja možete koristiti za stiliziranje svoje web stranice. Svako svojstvo vam omogućuje promjenu određenog aspekta izgleda elementa. Neka uobičajena svojstva su:

• boja: Postavlja boju teksta.
• boja pozadine: Postavlja boju pozadine elementa.
• veličina fonta: Mijenja veličinu teksta.
• margina: Dodaje prostor izvan elementa.
• padding: Dodaje prostor unutar elementa, oko sadržaja.

Svako CSS svojstvo prati vrijednost. Na primjer, da biste tekstu dali crvenu boju, možete napisati:

 <code>p {
    boja: crvena;
} ...

Ovo jednostavno pravilo čini da svi odlomci imaju crveni tekst. Svojstvo color kontrolira kako se tekst pojavljuje, a vrijednost red govori koje boje treba biti.

Kaskada i nasljeđivanje u CSS

Riječ "kaskadno" u CSS znači da stilovi mogu teći iz jednog pravila u drugo. Ako bi se dva pravila mogla primijeniti na isti element, redoslijed može odlučiti koje će pravilo pobijediti. To je slično slaganju blokova gdje jedan blok ponekad prekriva dio drugog.

Jedno uobičajeno pravilo je da stilovi napisani izravno unutar HTML elementa (nazvani inline stilovi) nadjačavaju stilove u vašoj CSS datoteci. Drugo pravilo je da ako je roditeljski element stiliziran, njegovi podređeni elementi mogu naslijediti taj stil osim ako im nije drugačije rečeno.

Na primjer, ako boju teksta elementa <div> postavite na zelenu, tada će se tekst unutar elementa <div> često također pojavljivati ​​zeleno zbog nasljeđivanja. To pomaže u održavanju dosljednog dizajna web stranice.

CSS boje i fontovi

Pomoću CSS -a možete mijenjati boje na mnogo načina. Možete koristiti uobičajene nazive boja poput crvene , plave i zelene . Također možete koristiti heksadecimalne kodove poput <code>#FF0000</code> za crvenu ili RGB vrijednosti poput <code>rgb(255, 0, 0)</code>.

Fontovi su još jedan važan dio CSS . Font je poput stila rukopisa koji odaberete u bilježnici. U CSS možete promijeniti obitelj fontova, veličinu, debljinu i stil. Na primjer, ako želite da se vaši odlomci pojavljuju u Arialu, možete koristiti:

 <code>p {
    obitelj fontova: Arial, sans-serif;
} ...

Ovo pravilo govori pregledniku da prikaže tekst u fontu Arial ako je dostupan, a da koristi drugi sličan font ako nije.

Promjena boja i fontova pomoću CSS-a čini tekst lakšim za čitanje, a vašu web stranicu zanimljivijom za gledanje.

CSS model okvira

CSS Box model je način razumijevanja kako su različiti dijelovi elementa raspoređeni na stranici. Svaki element je poput kutije. Box model ima četiri dijela:

• Sadržaj: Ovo je područje gdje se nalaze vaš tekst i slike.
• Raspored: Ovo je prostor oko sadržaja unutar okvira.
• Obrub: Ovo je linija koja okružuje padding i sadržaj.
• Margina: Ovo je prostor izvan obruba koji odvaja element od ostalih elemenata.

Zamislite fotografiju. Sama fotografija je sadržaj. Podloga koja okružuje fotografiju je poput podloge. Okvir koji sve drži zajedno je rub. A prostor oko okvira je margina. Koristeći ovaj model, možete osigurati da svi dijelovi vašeg dizajna imaju odgovarajući prostor i ravnotežu.

CSS izgledi i pozicioniranje

CSS se ne odnosi samo na boje i fontove; on vam također pomaže u rasporedu elemenata na web stranici. To se naziva raspored i pozicioniranje. Pomoću CSS, možete odlučiti gdje će se svaki element pojaviti na stranici.

Postoji nekoliko načina za kontrolu izgleda web stranice, uključujući:

• Prikaz: Ovo svojstvo definira kako se element pojavljuje u rasporedu. Na primjer, <code>display: block;</code> čini da element zauzme vlastiti redak, dok <code>display: inline;</code> omogućuje elementima da budu u istom retku.
• Položaj: Ovo svojstvo postavlja vrstu metode pozicioniranja koja se koristi za element. Vrijednosti mogu biti statičke , relativne , apsolutne ili fiksne . Na primjer, <code>position: relative;</code> pomiče element relativno u odnosu na njegov normalni položaj.
• Flexbox: Flexbox je moderan način raspoređivanja elemenata u retke ili stupce. Olakšava poravnavanje elemenata.

Korištenje ovih tehnika rasporeda je kao slaganje igračaka na policu. Vi odlučujete gdje će svaka igračka ići kako bi sve imale dovoljno prostora i izgledale uredno. To čini vašu web stranicu organiziranijom i privlačnijom.

Primjer CSS koda

Evo primjera kako HTML i CSS funkcioniraju zajedno. Ovaj primjer koda prikazuje jednostavnu web stranicu s nekim stilovima:

 <code><!DOCTYPEhtml>
<html>
<glava>
  <stil>
    tijelo {
      boja pozadine: svijetloplava;
    }
    h1 {
      boja: mornarsko plava;
      veličina fonta: 24px;
    }
    p {
      boja: zelena;
      veličina fonta: 18px;
    }
  </style>
</head>
<tijelo>
  <h1>Moja prva web stranica</h1>
  <p>Ovo je jednostavna web stranica stilizirana pomoću CSS-a.</p>
</body>
</html></code>

Ovaj kod stvara web stranicu sa svijetloplavom pozadinom. Tekst zaglavlja je tamnoplav, a tekst odlomka zelen. CSS unutar oznake <code><style></code> prikazuje kako se pravila pišu i primjenjuju.

Kako povezati CSS s HTML-om

CSS možete dodati u HTML na tri glavna načina. Svaka metoda ima svoju upotrebu ovisno o situaciji:

• Ugrađeni CSS: CSS se piše izravno u HTML elementu pomoću atributa <code>style</code>. Na primjer: <code><p style="color: blue;">Hello</p></code> mijenja boju teksta ovog pojedinačnog odlomka u plavu.
• Interni CSS: CSS pravila se pišu unutar oznake <code><style></code> u odjeljku zaglavlja vašeg HTML dokumenta. Ova metoda je korisna kada radite s jednom web stranicom.
• Vanjski CSS: CSS pravila se nalaze u zasebnoj datoteci, obično nazvanoj <code>style.css</code>. CSS datoteku povezujete s HTML pomoću oznake <code><link></code>. Na primjer: <code><link rel="stylesheet" href="style.css"></code> To olakšava primjenu istog stila na više stranica.

Vanjska metoda je najčešća u profesionalnom web razvoju jer održava HTML urednim i omogućuje vam ažuriranje stilova na više stranica odjednom.

Prednosti korištenja CSS

CSS je vrlo koristan na mnogo načina. Evo nekih prednosti korištenja CSS u web razvoju:

• Razdvajanje sadržaja i stila: HTML sadrži sadržaj i strukturu, dok CSS upravlja izgledom i dizajnom. Ovo razdvajanje olakšava ažuriranje vaše web stranice.
• Ponovna upotrebljivost: Nakon što kreirate CSS pravilo, možete ga koristiti na mnogim elementima na različitim stranicama. To štedi vrijeme i održava sve dosljednim.
• Poboljšane performanse web stranice: S CSS u odvojenim datotekama, preglednici mogu brže učitavati stilove i brže prikazivati ​​vašu web stranicu.
• Dosljedan dizajn: CSS pomaže osigurati da svaka stranica na vašoj web stranici izgleda slično. To stvara bolje iskustvo za korisnike jer mogu lakše razumjeti i navigirati vašom web stranicom.
• Jednostavno održavanje: Kada trebate promijeniti stil, trebate ažurirati samo jednu CSS datoteku umjesto mnogo HTML datoteka. To pojednostavljuje upravljanje web stranicom.

Korištenje CSS je kao imati poseban set alata. Svaki alat u setu alata pomaže vam da lako poboljšate izgled svoje web stranice. Kako budete vježbali, vidjet ćete koliko CSS može biti moćan u stvaranju lijepih i jednostavnih web stranica.

CSS u stvarnom svijetu

Svaka web stranica koju posjetite koristi CSS na neki način. Od vaših omiljenih stranica s crtićima do stranica školskih projekata, CSS pomaže u stvaranju zabavnog i lako čitljivog izgleda. Kada vidite šarenu web stranicu s urednim razmacima i jasnim tekstom, to je CSS na djelu.

Razmotrite dizajn popularnih web stranica poput onih za igre, crtiće ili online priče. Promišljena upotreba boja, fontova i izgleda čini ove web stranice uzbudljivima i zanimljivima. CSS se također koristi u aplikacijama i mobilnim stranicama, osiguravajući da sadržaj izgleda dobro i na velikim zaslonima i na malim telefonima.

U svakodnevnom životu, CSS je sličan uređenju sobe. Možete odabrati temu za svoju sobu, objesiti šarene slike i uredno rasporediti namještaj. CSS čini isto za web stranice. Unosi red i ljepotu u digitalni prostor, čineći ga ugodnim za posjetitelje.

Sažetak ključnih točaka

Evo glavnih točaka koje smo naučili o CSS:

• Definicija: CSS je kratica za Cascading Style Sheets (Kaskadne stilske tablice) i koristi se za stiliziranje web stranica.
• Uloga u web razvoju: CSS čini web stranice atraktivnima dodavanjem boja, fontova i izgleda.
• Osnovna sintaksa: CSS pravilo koristi selektor i blok deklaracije gdje se svojstva postavljaju s vrijednostima.
• Selektori: Selektori tipa, klase i ID-a pomažu u ciljanju određenih HTML elemenata.
• Svojstva i vrijednosti: CSS koristi svojstva poput boje, boje pozadine i margine za kontrolu različitih aspekata dizajna web stranice.
• Kaskada i nasljeđivanje: Pravila mogu nadjačati jedno drugo, a stilovi se mogu prenositi s roditeljskih elemenata na podređene elemente.
• Model okvira: Svaki HTML element se tretira kao okvir sa sadržajem, paddingom, obrubom i marginom.
• Rasporedi i pozicioniranje: CSS pruža metode za raspoređivanje elemenata na stranici pomoću svojstava poput prikaza, pozicije i Flexboxa.
• Metode primjene CSS: CSS se može primijeniti unutar teksta, interno u odjeljku zaglavlja ili eksterno putem zasebnog stilskog lista.
• Prednosti: CSS odvaja sadržaj od prezentacije, omogućuje ponovnu upotrebu i osigurava dosljedan dizajn na svim web stranicama.

CSS je ključni dio web razvoja, čineći stranice lijepima i jednostavnima za navigaciju. Dok istražujete više i pokušavate izraditi vlastite web stranice, zapamtite da je CSS vaš alat za izražavanje kreativnosti. Zabavite se eksperimentirajući s bojama, fontovima i izgledima, jer svaka mala promjena doprinosi magiji dobro dizajnirane web stranice.

Nastavite vježbati i promatrati svoje omiljene web stranice. Primijetite kako se različiti stilovi koriste kako bi privukli vašu pažnju i stvorili ugodno iskustvo. S vremenom ćete vidjeti koliko CSS može biti moćan u pretvaranju jednostavnih HTML struktura u vizualno privlačne web stranice.