Kratica CSS označava "kaskadne stilske tablice". CSS se koristi za oblikovanje web stranica i aplikacija koje se koriste na svim uređajima. Tablica stilova obično se koristi uz HTML i prednji programski jezik kao što je JavaScript.

CSS se može implementirati na jedan od tri načina - linijski, interno ili eksterno. Iako je vanjski CSS preporučeni pristup, postoje slučajevi kada bi dvije preostale metode implementacije mogle biti praktičnije.

U ovom vodiču naučit ćete sve osnove CSS -a za početak izrade aplikacija već danas.

Kada koristiti različite metode implementacije CSS -a

Ugrađeni CSS idealan je način implementacije kada je namjera uključiti samo jednu ili dvije postavke stylinga na web stranicu, zajedno s nekoliko drugih nišnih slučajeva. Ugrađena CSS metoda koristi stil ključne riječi zajedno sa svojstvom CSS -a za postizanje određenog rezultata.

Ako namjeravate promijeniti boju jednog naslova u crvenu, tada bi umetnuti CSS mogao biti dobra opcija. Niša, kao što je gore spomenuto, bila bi pri stvaranju HTML izgleda koji se prvenstveno sastoji od tablica (zastarjela praksa).

Koristeći Inline CSS primjer

Glavni naslov

Gornji redak koda prikazat će tekst "Glavni naslov" premazan crvenom bojom. Ovo je vjerojatno jedan od jedinih praktičnih razloga za korištenje ugrađenog CSS -a jer obično postoji samo jedan h1 element na zadanoj web stranici.

Ako namjeravate sve premazati h2 elementi na web stranici žute boje. Morat ćete koristiti CSS stil ključna riječ, zajedno sa boja svojstvo i njegovu vrijednost (žuto) na svakom elementu. Međutim, učinkovitiji način ostvarivanja ovog zadatka je korištenje internog CSS -a.

Korištenje primjera internog CSS -a

Postavljanje gornjeg koda u oznaka vaše HTML datoteke osigurat će da sve h2 elementi u toj datoteci su obloženi žutom bojom. Unutarnji CSS odvojen je od HTML koda, što ovu metodu čini učinkovitijom jer olakšava ciljanje različitih skupina elemenata.

Dakle, zašto je vanjska metoda implementacije CSS -a još uvijek najpreporučljiviji pristup? Odvajanje briga. S vanjskim CSS -om vaš je CSS kôd potpuno odvojen od vašeg HTML koda, što osigurava skalabilnost za velike projekte i čini proces testiranja učinkovitijim.

Korištenje primjera vanjskog CSS -a

Umetanje gornje linije koda u oznaka vaše HTML datoteke olakšat će oblikovanje vaše web stranice pomoću vanjske CSS metode. Jedini aspekt gornjeg koda koji će se promijeniti je vrijednost dodijeljena href svojstvo, koje bi uvijek trebalo biti naziv CSS datoteke (uključujući proširenje .css).

Povezano: Što su kaskadne tablice stilova i za što se koristi CSS? Budući da je vaša CSS datoteka povezana s vašim HTML dokumentom, sada možete početi pisati CSS kôd u svoju CSS datoteku. U ovom trenutku jedina razlika između gornjeg unutarnjeg primjera CSS -a i vanjskog CSS -a je stil označiti. Stoga će umetanje sljedećeg koda u CSS datoteku proizvesti isti rezultat kao gornji primjer internog CSS -a.

h2 {
boja: žuta;
}

Istražujući osnovnu strukturu CSS -a

Osnovna CSS deklaracija sadrži sedam bitnih elemenata, kao što možete vidjeti iz donjeg primjera. Svi zajedno rade na postizanju određenog sklopa stilskih preferencija.

Selektor

U CSS deklaraciji, birač može biti ili iskaznica, a razred, element, ili u nekim posebnim slučajevima, pseudo-selektor. U CSS strukturi iznad a element koristi se kao birač, što znači da će sve veze na web stranici biti prekrivene crvenom bojom. U biti, svrha birača je identificirati element (e) koje treba stilizirati.

Početak i kraj deklaracije

Početak i kraj deklaracije važni su jer obuhvaćaju sve postavke stila koje se odnose na određeni birač. Oba elementa predstavljena su parom otvorenih i zatvorenih zagrada. Dobar način da se sjetite upotrijebiti početak deklaracije ili kraj deklaracije je da zapamtite da ako imate otvorenu vitičanu zagradu, trebala bi postojati odgovarajuća zatvorena vitičasta zagrada, i obrnuto.

Vlasništvo

CSS svojstvo u strukturi deklaracije može biti bilo koja od preko stotinu različitih vrsta svojstava. Vrsta svojstva korištena u gornjoj CSS strukturi je boja a ovo svojstvo cilja tekst na web stranici. Ako želite saznati više, pogledajte naše opsežan popis svojstava CSS -a i njihova uporaba.

Razdvojnik svojstva/vrijednosti

Iako se može činiti malim i beznačajnim, separator svojstva/vrijednosti jednako je važan kao i svi ostali elementi u CSS strukturi. Ako ikada postoji slučaj kada je ovaj element zaboravljen, cijela CSS deklaracija se neće izvršiti.

Vrijednost

Vrijednost CSS svojstva predstavlja točan stil koji želite primijeniti na dato svojstvo. Vrijednosti koje su dostupne za uporabu ovise o vrsti svojstva. Na primjer, svojstvo korišteno u gornjoj strukturi je boja, što znači da postoji samo jedna vrsta vrijednosti koja se može primijeniti na ovo svojstvo, naziv boje. A boja vrijednost može biti predstavljena u jednom od četiri oblika: vrijednost riječi (kao u gornjem primjeru), heksadecimalna vrijednost, vrijednost HSL (nijansa, zasićenje, svjetlina) ili vrijednost RGB (crvena, zelena, plava).

Odvajač deklaracije

Razdvajač deklaracije označava da ste na kraju određene deklaracije o stilu. U gornjoj strukturi postoji samo jedan separator deklaracija, ali može biti i više. Sve ovisi o broju CSS svojstava koja namjeravate koristiti na određenom razred, iskaznica, ili element.

Što su ID -ovi i klase?

ids i klase igraju temeljnu ulogu u procesu oblikovanja CSS -a. Kao i HTML elementi, CSS ids i klase koriste se kao birači u CSS deklaraciji. Međutim, klase i ids imaju prednost nad HTML elementom.

Općenito pravilo u CSS -u je da će posljednja deklaracija stila koju dodate datoteci nadjačati one koje su bile prije. Stoga, ako postoje dvije deklaracije s h2 selektor u CSS datoteci, posljednja dodana deklaracija nadjačava one koje su bile prije.

Međutim, ako je ovo h2 element ima iskaznica koji se koristi kao birač u CSS deklaraciji, bez obzira na njen položaj (prije ili poslije) CSS deklaracije koja ima h2 element kao njegov izbornik, preferencija za stil u iskaznica deklaracija će uvijek imati prednost nad elementom. Ukratko, an iskaznica će nadjačati druge birače stilova.

Važno je zapamtiti da u CSS deklaraciji, ids započinju znakom broja, a nastava počinje točkom. Najznačajnija razlika između an iskaznica i a razred je li to an iskaznica je jedinstven, dok je a razred mogu se duplicirati. Na primjer, zbirka sličnih oznake se mogu dati istim razred Ime; Međutim iskaznica svakog oznaka mora biti jedinstvena.

Istražujući različite vrste selektora

Postoje tri osnovne vrste birača - pojedinačni, višestruki i ugniježđeni. Do sada je ovaj članak opsežno obuhvaćao pojedinačne birače.

Kada koristite CSS, bit će slučajeva kada želite različite elemente na različitim položajima na a web stranicu imati sličan stil koji se razlikuje od općeg stila primijenjenog na cijelu web stranicu. U tim će slučajevima biti korisno znati koristiti više birača.

Primjer osnovnog HTML predloška

Dobrodošli

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Oko

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Titula

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dic quod quibusdam!
Ea delectus sit, Laboriosam eos aperiam asperiores? At ad Laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum Laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id neophoditatibus harum ratione, ipsum doloremque deleniti ex eligendi
spriječiti maksimalni maksimum? Želite li promijeniti optio oglas, niste li tempora sapiente?







Titula

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dic quod quibusdam!
Ea delectus sit, Laboriosam eos aperiam asperiores? At ad Laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum Laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id neophoditatibus harum ratione, ipsum doloremque deleniti ex eligendi
spriječiti maksimalni maksimum? Želite li promijeniti optio oglas, niste li tempora sapiente?

Ako pomno pogledate gornju HTML datoteku, vidjet ćete dinamiku koja postoji između ids i klase. U odnosu na gornju datoteku, ako želite primijeniti isti stil na oko odjeljku i člancima samo na web stranici, sljedeći CSS kod će to postići.

Primjer korištenja više birača

#O, .content {
boja: bijela;
boja pozadine: darkcyan;
}

Kad koristite više birača, svaki birač uvijek morate odvojiti zarezom. Gornji primjer ima dva selektora, an iskaznica i a razred. Ako zarez koji slijedi iza okoiskaznica nedostaje, CSS deklaracija se neće izvršiti.

Vraćajući se na gornji primjer osnovnog HTML predloška, ​​postoje dva prisutne oznake - jedna u odjeljku dobrodošlice, a druga u odjeljku o. Ako vam je cilj ciljati samo jedno od njih oznake, ugniježđeni birač trebao bi biti vaša metoda odabira.

Primjeri ugniježđenih selektora

#Dobrodošli p raspon {
boja: crvena;
}

Gore ugniježđeni selektor sadrži iskaznica i dva HTML elementa. Kao što možete vidjeti iz gornjeg primjera, ugniježđeni birač pruža vam mogućnost ciljanja određenog elementa unutar grupe.

Stoga, samo raspon odjeljak u oznaka div sa id dobrodošlice bit će obložene crvenom bojom.

Bez obzira koristite li jezik za oblikovanje poput CSS -a ili jezik za programiranje, apsolutno biste trebali znati napisati komentar. Komentari su bitni u projektima na razini poduzeća gdje radi više programera, a korisni su i pri razvoju malih razmjera.

CSS komentar sadrži dvije kose crte naprijed, dvije zvjezdice i odjeljak komentara.

/ * Ovako pišete komentar u jednom retku u CSS -u */

/*
Ovako pišeš
komentar u više redaka
u CSS -u
*/

Što je sljedeće?

Ovaj članak pruža vam temeljne komponente CSS -a. Sada možete koristiti identifikator:

• Bilo koja od tri metode implementacije CSS -a
• Svi elementi u CSS deklaraciji
• Tri osnovne vrste birača
• CSS komentar

Ipak, ovo je tek početak. CSS ima nekoliko okvira koji će vam pomoći da razvijete bolje razumijevanje jezika. Jedini izazov je odlučiti koji je najbolji za vas.

Tailwind CSS vs. Bootstrap: Koji je bolji okvir?

Prilikom odabira CSS okvira važno je pronaći onaj koji zadovoljava vaše zahtjeve.

Pročitajte Dalje

O autoru