CSS-i sissejuhatus
Kaskaadlaadilehed, mida tuntakse paremini CSS-na, on väga lihtne kavandatud protsess, mida kasutatakse veebilehtede palju esinduslikumaks muutmiseks. CSS võimaldab teil oma veebilehtede kohandamiseks stiile lisada. Parim osa selle stiilifunktsiooni kasutamisel on see, et CSS on sõltumatu HTML-i viisist veebilehtede loomiseks. Põhiline erinevus hüperteksti märgistuskeele ja kaskaadlaadsete stiililehtede vahel on see, et esimene pakub peamiselt maastiku struktuurset viisi veebilehele, kuna esimene on mõeldud võimsa värvikoodide ja stiilitehnikate pakkumiseks. Seda kasutatakse korraga mitme veebilehe paigutuse juhtimiseks. Kõik välised stiililehed salvestatakse CSS-failidena.
CSSi põhikomponendid
Ülaltoodud jaotises oleme uurinud CSS-i sissejuhatust. Nüüd jätkame CSS-i põhikomponentidega järgmiselt:
1. Kergesti hooldatav: kui teil on plaanis teha globaalseid muudatusi, siis muutke lihtsalt kujundust ja näete kõigi teiste veebilehtede kõiki elemente automaatselt värskendatuna.
2. CSS säästab aega: võite skripti kirjutada üks kord ja sama lehte uuesti kasutada nii palju aega, kui soovite.
3. Naturaalse esiotsa parimad stiilid: CSS-il on HTML-iga võrreldes palju laiem atribuutide ja loendite valik. Seetõttu võib HTML-i leht tavalise HTML-i atribuutidega võrreldes olla heledam.
4. Lihtne otsingumootoritega: CSS-i peetakse väga mugavaks ja hõlpsasti loetavaks stiilileheks. See tähendab, et otsimootorid ei pea teksti lugemiseks palju pingutama.
5. Tõhus vahemälu salvestamine: CSS-i saab kasutada veebirakenduste kohalikuks salvestamiseks võrguühenduseta vahemälu mehhanismi abil, mida saab kasutada võrguühenduseta veebisaitide kuvamiseks.
CSSi omadused
Nagu arutasime CSS-i sissejuhatust ja selle komponenti. nüüd õpime tundma CSS-i omadusi. CSS-i peamisteks omadusteks on stiilireeglid, mida kliendibrauser tõlgendab ja rakendab teie dokumendi erinevatele elementidele. Peamised omadused on järgmised:
- Stiilireegel koosneb valijakomponendist ja deklaratsiooniploki komponendist.
- Valijat kasutatakse HTML-komponendile osutamiseks, mille soovite kujundada.
- Deklaratsiooniplokis on üks või mitu deklaratsiooni koos semikoolonitega.
- Igal esitatud deklaratsioonil on CSS-i vara nimi, semikoolon ja väärtus. Näiteks värv on omadus ja väärtus on punase värvi. Fondi suurus on omadus ja väärtus 15 pikslit.
- CSS-i deklaratsioon lõpeb semikooloniga ja need plokid on ümbritsetud lokkis traksidega.
- CSS-i valijaid kasutatakse HTML-elementide leidmiseks, mis põhinevad elemendi nimel, id, atribuudil, klassil ja muul.
- Üks ainulaadne element valitakse elemendi ID järgi.
- Kui soovite valida konkreetse elemendi kindla id-ga, tuleks kasutada funktsiooni # koos atribuudiga id.
- Kui soovite valida kindla klassiga elemente, tuleks kirjutada perioodi märk koos nimiklassiga.
- Universaalne selektor: kui te pole teatud tüüpi elementide valimisest huvitatud, sobib universaalne selektor lihtsalt elemendi nimega.
- Elemendi valija: need valijad valivad elemendi elemendi nime põhjal.
- Laskuv valija: kui konkreetne element asub teise elemendi sees, nimetatakse seda alanevaks valijaks.
- ID valija: see valija kasutab HTML-i elemendi ID-d, nii et konkreetse elemendi saaks valida.
- Klassi valijad: see valib konkreetse klassi atribuudiga elemendi.
- Valikute rühmitamine: hea võimalus valijaid grupeerida nii, et kood oleks võimalikult väike. Valijate rühmitamiseks tuleks kasutada iga valijat koos komaga.
CSS-i rakendused
Pärast CSS-i sissejuhatuse ja CSS-i omaduste õppimist hakkame õppima CSS-i rakendamist. HTML-i saab CSS-i kasutada kolmel viisil:
1. Inline:
Siseset stiililehte kasutatakse ainult selle sildi mõjutamiseks, milles see on. See tähendab sisuliselt seda, et lehe väikeseid detaile saab muuta ilma lehe üldist paigutust või kõike lehel muutmata. See on kasulik, kui teil oleks välistel lehtedel kõik olemas, siis oleks teil vaja üksikasjade muutmiseks lisada täiendavaid silte. Inline tühistab välise, mis tähendab, et väikseid detaile saab muuta. See tühistab ka sisemise.
2. sisemine:
Siseühendust kasutatakse ainult siis, kui soovite lisada ühe sildi väikese muudatuse. Selle põhjuseks on see, et tekst mõjutab ainult ühte selles sisalduvat silti, samas kui sisemine stiil pannakse HTML-dokumendi pähe. See tähendab, et kui soovite lehte kohandada, näete kõiki vajalikke muudatusi lihtsalt kerides. Sisekujundus paigutatakse siltide sisse. Võrdlemisi näeb see välja stiililt ja siltidelt erinevalt, lihtne, elegantne ja korraldatud.
3. Väline
Väliseid stiililehti kasutatakse selleks, et inimesed saaksid oma veebilehti vormindada ja uuesti luua täiesti erineval dokumendil. See tähendab tegelikult, et teil võib olla kaks või enam töökohta, kuna dokumendi sisse saab manustada rohkem kui ühte stiililehte, pakkudes teile seega palju puhtamat tööruumi. Stiilitabel oleks sel juhul hõlpsasti juurdepääsetav, mis on tohutu eelis, kuid teisest küljest mõjutavad kõik välise lehe muudatused kõiki vanemlehti, millega see on seotud.
CSS-i eelised ja puudused:
CSS eelised
- Seadme ühilduvus
- Veebisaidi kiirem kiirus
- Kergesti hooldatav
- Järjepidevad ja spontaansed muutused
- Võimalus uuesti positsioneerida
- Parandab otsingumootori võimalusi veebilehtede indekseerimiseks
CSS-i puudused
- Brauseritevahelised probleemid
- Haavatav
- Mitmel tasandil esinevad probleemid
- Turvalisuse puudumine
- Killustatus
Järeldus - CSS-i sissejuhatus
CSS annab veebidisainerile volituse, et ühe veebisaidi kõigi lehtede veebipaigutusse saaks teha ulatuslikke muudatusi, kasutades vaid ühte faili. See aitab kujundada kerget ja loomingulist veebisaiti, millel on suur reageerimine ja mis avaldab publikule muljet selle kuvamisel. Seetõttu on see tänapäeval veebisaitide lahutamatu osa, mida ei tohiks tähelepanuta jätta.
Soovitatavad artiklid
See on olnud CSS-i sissejuhatuse juhend. Siin oleme arutanud CSS-i põhikomponente, omadusi, eeliseid ja puudusi. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -
- CSS-i intervjuu küsimused ja vastused
- Sissejuhatus GIT-i
- Sissejuhatus PHP-sse
- Sissejuhatus JavaScripti