Kratica CSS pomeni "kaskadni slogovni listi". CSS se uporablja za oblikovanje spletnih mest in aplikacij, ki se uporabljajo v vseh napravah. Slog sloga se običajno uporablja skupaj s HTML-jem in vmesnim programskim jezikom, kot je JavaScript.

CSS je mogoče implementirati na enega od treh načinov - vgrajeno, notranje ali zunanje. Čeprav je zunanji CSS priporočen pristop, obstajajo primeri, ko sta lahko preostali dve metodi izvajanja bolj praktični.

V tem vadniškem članku se boste naučili vseh osnov CSS -ja, da lahko danes začnete graditi aplikacije.

Kdaj uporabiti različne metode izvajanja CSS

Inline CSS je idealen način izvajanja, ko je namen vključiti le eno ali dve nastavitvi oblikovanja na spletni strani skupaj z nekaj drugimi nišnimi primeri. Vgrajena metoda CSS uporablja slog ključne besede skupaj z lastnostjo CSS za dosego določenega rezultata.

Če nameravate barvo enega naslova spremeniti v rdečo, je lahko vgrajen CSS dobra izbira. Nišni primer, kot je omenjeno zgoraj, bi bil pri ustvarjanju postavitev HTML, ki so v glavnem sestavljene iz tabel (zastarela praksa).

Z uporabo primera Inline CSS

Glavni naslov

V zgornji vrstici kode bo prikazano besedilo »Glavni naslov«, prevlečeno z rdečo barvo. Verjetno je to eden od edinih praktičnih razlogov za uporabo vgrajenega CSS, ker je običajno le en h1 element na določeni spletni strani.

Če nameravate vse premazati h2 elementi na spletni strani z rumeno barvo. Uporabiti boste morali CSS slog ključno besedo skupaj z barvo lastnost in njena vrednost (rumena) na vsakem elementu. Učinkovitejši način za izvajanje te naloge pa je uporaba notranjega CSS.

Z uporabo primera notranjega CSS

Zgornjo kodo postavite v oznaka vaše datoteke HTML bo zagotovila, da bodo vse datoteke h2 elementi v tej datoteki so prevlečeni z rumeno barvo. Notranji CSS je ločen od kode HTML, zato je metoda učinkovitejša, saj olajša ciljanje na različne skupine elementov.

Zakaj je torej zunanja metoda izvajanja CSS še vedno najbolj priporočen pristop? Ločitev skrbi. Z zunanjim CSS je vaša koda CSS popolnoma ločena od vaše kode HTML, kar zagotavlja prilagodljivost za velike projekte in naredi postopek testiranja učinkovitejši.

Z uporabo zunanjega primera CSS

Vstavljanje zgornje vrstice kode v oznaka vaše datoteke HTML bo olajšala oblikovanje vaše spletne strani z uporabo zunanje metode CSS. Edini vidik zgornje kode, ki se bo spremenil, je vrednost, dodeljena datoteki href lastnost, ki mora biti vedno ime datoteke CSS (vključno s pripono .css).

Povezano: Kaj so kaskadne slogovne liste in za kaj se uporablja CSS? Ker je datoteka CSS povezana z vašim dokumentom HTML, lahko zdaj začnete pisati kodo CSS v datoteko CSS. Na tej točki je edina razlika med zgornjim notranjim primerom CSS in zunanjim CSS slog oznaka. Zato bo vstavljanje naslednje kode v datoteko CSS dalo enak rezultat kot zgornji notranji primer CSS.

h2 {
barva: rumena;
}

Raziskovanje osnovne strukture CSS

Osnovna deklaracija CSS vsebuje sedem bistvenih elementov, kot lahko vidite iz spodnjega primera. Vsi skupaj sodelujejo pri doseganju določenega sklopa stilskih želja.

Izbirnik

V izjavi CSS je izbirnik lahko tudi id, a razred, element ali v nekaterih posebnih primerih psevdoizbirnik. V strukturi CSS nad a element se uporablja kot izbirnik, kar pomeni, da bodo vse povezave na spletni strani obložene z rdečo barvo. V bistvu je namen izbirnika identificiranje elementov, ki jih je treba oblikovati.

Začetek in konec deklaracije

Začetek in konec deklaracije sta pomembna, ker zajemata vse nastavitve oblikovanja, ki veljajo za določen izbirnik. Oba elementa predstavljata par odprtih in zaprtih zavihkov. Dober način, da se spomnite uporabe začetka deklaracije ali konca deklaracije, je, da se spomnite, da če imate odprt zavit oklepaj, mora obstajati ustrezen zaprt zavit oklepaj in obratno.

Lastnina

Lastnost CSS v strukturi deklaracije je lahko katera koli od več kot sto različnih vrst lastnosti. Vrsta lastnosti, uporabljena v zgornji strukturi CSS, je barvo in ta lastnost cilja na besedilo na spletni strani. Če želite izvedeti več, si oglejte našo izčrpen seznam lastnosti CSS in njihove uporabe.

Ločevalnik lastnosti/vrednosti

Čeprav se morda zdi majhno in nepomembno, je ločilo lastnosti/vrednosti enako pomembno kot vsi drugi elementi v strukturi CSS. Če kdaj obstaja primer, ko je ta element pozabljen, se celotna deklaracija CSS ne izvede.

Vrednost

Vrednost lastnosti CSS predstavlja natančen slog, ki ga želite uporabiti za določeno lastnost. Vrednosti, ki so na voljo za uporabo, so odvisne od vrste lastnosti. Na primer, lastnost, uporabljena v zgornji strukturi, je barvo, kar pomeni, da je za to lastnost mogoče uporabiti samo eno vrsto vrednosti, ime barve. A barvo vrednost je lahko predstavljena v eni od štirih oblik: vrednost besede (kot v zgornjem primeru), šestnajstiška vrednost, vrednost HSL (odtenek, nasičenost, lahkotnost) ali vrednost RGB (rdeča, zelena, modra).

Ločevalnik deklaracij

Ločevalnik deklaracij označuje, da ste na koncu posebne izjave o slogu. V zgornji strukturi je samo en ločevalnik deklaracij, lahko pa jih je več. Vse je odvisno od števila lastnosti CSS, ki jih nameravate uporabiti za določeno vrsto razred, idali element.

Kaj so ID -ji in razredi?

ID -ji in razredov igrajo temeljno vlogo v procesu oblikovanja CSS. Tako kot elementi HTML, CSS ID -ji in razredov se uporabljajo kot izbirniki v izjavi CSS. Vendar pa razredov in ID -ji imajo prednost pred elementom HTML.

Splošno pravilo v CSS je, da bo zadnja deklaracija sloga, ki jo dodate datoteki, preglasila tiste, ki so bile tam prej. Če torej obstajata dve izjavi z h2 izbirnik v datoteki CSS, zadnja dodana deklaracija preglasi tiste, ki so bile tam prej.

Če pa to h2 element ima id ki se uporablja kot izbirnik v izjavi CSS, ne glede na njen položaj (pred ali po) izjave CSS, ki ima h2 element kot njegov izbirnik, prednost oblikovanja v id deklaracija bo vedno imela prednost pred elementom. Skratka, an id bo preglasil druge izbirnike slogov.

Pomembno si je zapomniti, da v izjavi CSS, ID -ji začnite s številskim znakom in razredi se začnejo s piko. Najpomembnejša razlika med an id in a razred je to an id je edinstven, medtem ko je a razred se lahko podvoji. Na primer zbirka podobnih oznake so lahko enake razred ime; pa je id od vsakega oznaka mora biti edinstvena.

Raziščite različne vrste izbirnikov

Obstajajo tri osnovne vrste izbirnikov - enojni, večkratni in ugnezdeni. Doslej je ta članek obsežno obravnaval posamezne izbirnike.

Ko uporabljate CSS, se bodo pojavili primeri, ko bi želeli različne elemente na različnih položajih na a ima podoben slog, ki se razlikuje od splošnega sloga, ki velja za celotno spletno stran. V teh primerih bo koristno vedeti, kako uporabljati več izbirnikov.

Primer osnovne predloge HTML

Dobrodošli

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







Približno

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







Naslov

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dic quod quibusdam!
Ea delectus sit, Laboriosam eos aperiam asperiores? Pri 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
ovirati hic maxime? Ali želite spremeniti optio ad, niste tempora sapiente?







Naslov

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dic quod quibusdam!
Ea delectus sit, Laboriosam eos aperiam asperiores? Pri 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
ovirati hic maxime? Ali želite spremeniti optio ad, niste tempora sapiente?

Če natančno pogledate zgornjo datoteko HTML, boste videli dinamiko, ki obstaja med ID -ji in razredov. Glede na zgornjo datoteko, če želite uporabiti isti slog za približno razdelku in člankih samo na spletni strani, bo naslednja koda CSS to dosegla.

Primer uporabe več izbirnikov

#O, .content {
barva: bela;
barva ozadja: darkcyan;
}

Ko uporabljate več izbirnikov, jih morate vedno ločiti z vejico. Zgornji primer ima dva izbirnika, an id in a razred. Če vejica, ki sledi približnoid manjka, se deklaracija CSS ne bo izvedla.

Če se vrnemo k zgornjemu primeru osnovne predloge HTML, obstajata dva prisotne oznake - ena v razdelku dobrodošlice, druga pa v razdelku o. Če je vaš cilj ciljati samo na eno od teh oznake, bi moral biti ugnezdeni izbirnik vaša metoda izbire.

Uporaba primerov ugnezdenih izbirnikov

#Dobrodošli p span {
barva: rdeča;
}

Zgornji ugnezdeni izbirnik vsebuje id in dva elementa HTML. Kot lahko vidite iz zgornjega primera, vam ugnezdeni izbirnik omogoča ciljanje na določen element v skupini.

Zato samo razpon razdelku v oznaka div z dobrodošel id bo prevlečena z rdečo barvo.

Ne glede na to, ali uporabljate jezik za oblikovanje, na primer CSS ali programski jezik, morate vsekakor vedeti, kako napisati komentar. Komentarji so bistveni pri projektih na ravni podjetja, kjer sodeluje več razvijalcev, uporabni pa so tudi pri majhnem razvoju.

Komentar CSS vsebuje dve poševnici naprej, dve zvezdici in razdelek s komentarji.

/ * Tako napišete komentar v eni vrstici v CSS */

/*
Tako pišeš
večvrstični komentar
v CSS
*/

Kaj je naslednje?

V tem članku so predstavljene temeljne komponente CSS. Zdaj lahko uporabite identifikacijo:

• Vsak od treh načinov izvajanja CSS
• Vsi elementi v izjavi CSS
• Tri osnovne vrste izbirnikov
• Komentar CSS

Vendar je to šele začetek. CSS ima več okvirov, ki vam bodo pomagali razviti boljše razumevanje jezika. Edini izziv je odločiti se, kateri je najboljši za vas.

Tailwind CSS vs. Bootstrap: Kaj je boljši okvir?

Pri izbiri ogrodja CSS je pomembno najti tistega, ki ustreza vašim zahtevam.

Preberite Naprej

O avtorju