Lühend CSS tähistab "kaskaadlaadilehti". CSS -i kasutatakse kõikides seadmetes kasutatavate veebisaitide ja rakenduste kujundamiseks. Stiililehte kasutatakse tavaliselt koos HTML-i ja kasutajaliidese, näiteks JavaScriptiga.

CSS -i saab rakendada ühel kolmest viisist - inline, sisemine või väline. Ehkki soovitatav lähenemisviis on väline CSS, on juhtumeid, kus kaks ülejäänud rakendusmeetodit võivad olla praktilisemad.

Selles õpetusartiklis saate teada kõik CSS -i põhitõed, et alustada rakenduste loomisega juba täna.

Millal kasutada erinevaid CSS -i rakendusmeetodeid?

Inline CSS on ideaalne rakendusmeetod, kui kavatsetakse koos mõne muu nišijuhtumiga lisada veebilehele ainult üks või kaks stiilieelistust. Sisseehitatud CSS -meetod kasutab stiil märksõna koos CSS -i omadusega, et saavutada konkreetne tulemus.

Kui kavatsete muuta ühe pealkirja värvi punaseks, võib sisemine CSS olla hea valik. Nagu eespool mainitud, oleks nišijuhtum HTML -paigutuste loomisel, mis koosnevad peamiselt tabelitest (aegunud praktika).

Inline CSS -i näide

Peamine rubriik

Ülaltoodud koodirida kuvab punase värviga teksti „Pealkiri”. See on tõenäoliselt üks ainsaid praktilisi põhjusi sisemise CSS -i kasutamiseks, sest tavaliselt on seda ainult üks h1 element antud veebilehel.

Kui kavatsete kõik katta h2 veebilehe elemente kollase värviga. Peate kasutama CSS -i stiil märksõna koos värvi omadus ja selle väärtus (kollane) igal elemendil. Selle ülesande täitmiseks on aga tõhusam viis kasutada sisemist CSS -i.

Sisemise CSS -i näide

Ülaltoodud koodi paigutamine kausta HTML -faili silt tagab, et kõik h2 selle faili elemendid on kaetud kollase värviga. Sisemine CSS on eraldatud HTML -koodist ja see muudab meetodi tõhusamaks, kuna hõlbustab erinevate elementide rühmade sihtimist.

Miks on CSS -i väline rakendusmeetod endiselt kõige soovitatavam lähenemisviis? Murede eraldamine. Välise CSS -i puhul on teie CSS -kood teie HTML -koodist täielikult eraldatud, mis tagab suurte projektide mastaapsuse ja muudab testimisprotsessi tõhusamaks.

Välise CSS -i näide

Ülaloleva koodirida sisestamine kausta HTML -faili silt hõlbustab teie veebilehe kujundamist välise CSS -meetodi abil. Ainus ülaltoodud koodi aspekt, mis muutub, on sellele määratud väärtus href atribuut, mis peaks alati olema CSS -faili nimi (kaasa arvatud laiend .css).

Seotud: Mis on kaskaadlaadilehed ja milleks kasutatakse CSS -i? Kui teie CSS -fail on lingitud teie HTML -dokumendiga, saate nüüd hakata oma CSS -faili CSS -koodi kirjutama. Siinkohal on ainus erinevus ülaltoodud sisemise CSS -näite ja välise CSS -i vahel stiil silt. Seetõttu annab järgmise koodi sisestamine CSS -faili sama tulemuse nagu ülaltoodud CSS -näide.

h2 {
värv: kollane;
}

CSS -i põhistruktuuri uurimine

CSS -põhideklaratsioon sisaldab seitset olulist elementi, nagu näete allolevast näitest. Nad kõik teevad koostööd, et saavutada konkreetne stiilieelistuste komplekt.

Valija

CSS -deklaratsioonis võib valija olla kas id, a klassi, element või mõnel erijuhul pseudovalija. Ülaltoodud CSS -i struktuuris a elementi kasutatakse valijana, mis tähendab, et kõik veebilehe lingid kaetakse punasega. Põhimõtteliselt on valija eesmärk tuvastada element (id), mida tuleks stiilida.

Deklaratsiooni algus ja lõpp

Deklaratsiooni algus ja lõpp on olulised, kuna need sisaldavad kõiki stiilieelistusi, mis kehtivad konkreetsele valijale. Mõlemat elementi esindavad paar avatud ja suletud lokkis traksid. Hea võimalus meeles pidada deklaratsiooni alguse või deklaratsiooni lõpu kasutamist on meeles pidada, et kui sul on avatud lokkis traks, peaks olema vastav suletud lokkis ja vastupidi.

Kinnisvara

Deklaratsioonistruktuuris olev CSS -atribuut võib olla ükskõik milline üle saja erineva atribuuditüübi. Ülaltoodud CSS -i struktuuris kasutatav atribuuditüüp on värvi ja see atribuut sihib veebilehe teksti. Kui soovite rohkem teada saada, vaadake meie täielik loetelu CSS -i omadustest ja nende kasutamisest.

Kinnisvara/väärtuse eraldaja

Kuigi see võib tunduda väike ja ebaoluline, on vara/väärtuse eraldaja sama oluline kui kõik muud CSS -i struktuuri elemendid. Kui on mõni juhtum, kus see element unustatakse, siis kogu CSS -deklaratsiooni ei täideta.

Väärtus

CSS -i atribuudi väärtus tähistab täpselt seda stiili, mida soovite konkreetsele atribuudile rakendada. Kasutatavad väärtused sõltuvad atribuudi tüübist. Näiteks ülaltoodud struktuuris kasutatav omadus on värvi, mis tähendab, et sellele atribuudile saab rakendada ainult ühte tüüpi väärtusi - värvi nime. A värvi väärtust saab esitada ühel neljast vormist: sõna väärtus (nagu ülaltoodud näites), kuueteistkümnendarv, HSL (toon, küllastus, heledus) või RGB (punane, roheline, sinine) väärtus.

Deklaratsiooni eraldaja

Deklaratsiooni eraldaja näitab, et olete konkreetse stiilideklaratsiooni lõpus. Ülaltoodud struktuuris on ainult üks deklaratsiooni eraldaja, kuid neid võib olla rohkem. Kõik sõltub CSS -i atribuutide arvust, mida kavatsete konkreetsel juhul kasutada klassi, idvõi element.

Mis on ID -d ja klassid?

id ja klassid mängivad CSS -i kujundamise protsessis olulist rolli. Nagu HTML -elemendid, nii ka CSS id ja klassid kasutatakse CSS -deklaratsioonis valijatena. Kuid, klassid ja id olla HTML -elemendi ees.

CSS -i üldreegel on see, et viimane failile lisatud stiilideklaratsioon tühistab need, mis olid varem olemas. Seega, kui on kaks deklaratsiooni koos h2 CSS -faili valija, alistab viimati lisatud deklaratsioon need, mis olid varem olemas.

Siiski, kui see h2 elemendil on id mida kasutatakse CSS -deklaratsiooni valijana, olenemata positsioonist (enne või pärast) CSS -deklaratsioonis, millel on h2 elemendi valijana, stiilieelistus id deklaratsioon on alati elemendi ees. Lühidalt, an id alistab teisi stiilivalijaid.

Oluline on meeles pidada, et CSS -i deklaratsioonis id algab numbrimärgiga ja tunnid algavad punktiga. Kõige olulisem erinevus an id ja a klassi kas see on id on ainulaadne, samas kui a klassi saab dubleerida. Näiteks sarnaste kogumik märgenditele võib anda sama klassi nimi; siiski, id igast silt peab olema ainulaadne.

Eri tüüpi valijate uurimine

Selektoreid on kolme põhitüüpi - üks, mitu ja pesastatud. Siiani on see artikkel ulatuslikult käsitlenud üksikuid valijaid.

CSS -i kasutamisel on juhtumeid, kui soovite erinevaid elemente erinevatel positsioonidel a veebilehe sarnase stiiliga, mis erineb kogu veebilehe üldisest stiilist. Sellistel juhtudel on abiks mitme valija kasutamine.

Põhiline HTML -malli näide

Tere tulemast

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







Umbes

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







Pealkiri

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? 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 on korruptsioon
mollitia, miinimumid, magni ja iusto id vajadus harum ratione, ipsum doloremque deleniti ex eligendi
takistab hic maxime? Eius modi optio ad, nisi tempora sapiente?







Pealkiri

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? 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 on korruptsioon
mollitia, miinimumid, magni ja iusto id vajadus harum ratione, ipsum doloremque deleniti ex eligendi
takistab hic maxime? Eius modi optio ad, nisi tempora sapiente?

Kui vaatate ülaltoodud HTML -faili tähelepanelikult, näete nende vahel valitsevat dünaamikat id ja klassid. Viidates ülaltoodud failile, kui soovite rakendusele sama stiili rakendada umbes jaotis ja ainult veebilehe artiklid, aitab seda teha järgmine CSS -kood.

Näide mitme valija kasutamisest

#Umbes, .content {
värv: valge;
taustavärv: tumesinine;
}

Kui kasutate mitut valijat, peaksite iga valija alati komaga eraldama. Ülaltoodud näites on kaks valijat, an id ja a klassi. Kui sellele järgnev koma umbesid puudub, CSS -i deklaratsiooni ei täideta.

Tulles tagasi ülaltoodud lihtsa HTML -malli näite juurde, on neid kaks märgendid olemas - üks tervitusjaotises ja teine ​​jaotises umbes. Kui teie eesmärk on sihtida ainult ühte neist silte, peaks pesastatud valija olema teie valikmeetod.

Pesastatud valijate kasutamine

#Tere tulemast p span {
värv: punane;
}

Ülaltoodud pesastatud valija sisaldab id ja kaks HTML -i elementi. Nagu ülaltoodud näitest näete, pakub pesastatud valija võimalust sihtida rühma teatud elementi.

Seetõttu ainult span jaotis jaotises silt div koos tere tulemast id kaetakse punase värviga.

Ükskõik, kas kasutate stiilikeelt nagu CSS või programmeerimiskeelt, peaksite kindlasti teadma, kuidas kommentaari kirjutada. Kommentaarid on hädavajalikud ettevõtte tasemel projektides, kus mitu arendajat teevad koostööd, ja see on kasulik ka väikesemahulise arenduse tegemisel.

CSS -i kommentaar sisaldab kahte kaldkriipsu, kahte tärni ja kommentaaride jaotist.

/ * Nii kirjutad CSS -is ühe rea kommentaari */

/*
Nii kirjutad
mitmerealine kommentaar
CSS -is
*/

Mis järgmiseks?

See artikkel pakub teile CSS -i põhikomponente. Nüüd saate identifikaatorit kasutada:

• Mis tahes kolmest CSS -i rakendusmeetodist
• Kõik CSS -deklaratsiooni elemendid
• Kolm põhitüüpi valijat
• CSS kommentaar

Ometi on see alles algus. CSS -il on mitu raamistikku, mis aitavad teil keelt paremini mõista. Ainus väljakutse on otsustada, milline neist on teie jaoks parim.

Tagatuule CSS vs. Bootstrap: milline on parem raamistik?

CSS -i raamistiku valimisel on oluline leida see, mis vastab teie nõuetele.

Loe edasi

Autori kohta