Veebisaidi visuaalset stiili ja kujundust juhendavad CSS või kaskaaditavate stiilide loendid. Need on dokumendid, mis kujundavad veebilehe HTML-märgistust ja pakuvad veebibrauseritele juhiseid, kuidas kuvada sellel märgistusel tekkinud lehti. CSS käitleb lehe kujundust, samuti värvi, taustapilte, tüpograafiat ja palju muud.
Kui vaatate CSS-faili, näete, et selline fail, nagu mis tahes märgistus- või kodeerimiskeel, on neile spetsiifiline süntaks. Iga stiilileht koosneb mitmest CSS-i reeglist. Need reeglid, kui neid täies ulatuses võtta, on see, mis veebisaiti stiilib.
CSS-i reegli osad
CSS-reegel koosneb kahest erinevast osast - valijast ja deklaratsioonist. Valija määrab, mida lehel stiilis muuta, ja deklaratsioonis, kuidas seda tuleks stiili muuta. Näiteks:
p {
värv: # 000;
}
See on CSS-i reegel. Valikuosa on "p", mis on elemendi valija "paragrahvide" jaoks. Seepärast valiks saidil KÕIK lõigud ja antaks neile selle stiili (välja arvatud juhul, kui on olemas paragrid, mille sihiks on konkreetsemad stiilid mujal teie CSS-dokumendis).
Reegli osa, mis ütleb "värv: # 000;" mida nimetatakse deklaratsiooniks. See deklaratsioon koosneb kahest osast - vara ja väärtusest.
Kinnistus on selle deklaratsiooni "värv" tükk. See määrab, millist aspekti selektorit visuaalselt muuta.
Väärtus on see, millist valitud CSS-i vara on muudetud. Meie näites kasutame kuueteistkümnendat väärtust # 000, mis on "must" jaoks mõeldud CSS-i stenogramm.
Seega, kasutades seda CSS-i reeglit, peaks meie lehel olema mustade font-värvidega parteid.
CSS Kinnisvara põhitõed
CSS-i omaduste kirjutamisel ei saa te lihtsalt seda teha, kui näete sobivat. Näidete puhul on "värv" tegelik CSS-i vara, nii et saate seda kasutada. See omadus määrab elemendi teksti värvi. Kui proovisite kasutada "teksti-värvi" või "font-color" kui CSS-i omadusi, siis need ebaõnnestuvad, kuna need ei ole CSS-keele tegelikud osad.
Veel üks näide on vara "taustapild". See omadus määrab pildi, mida saab taustal kasutada, näiteks:
.logo {
tausta-kujundus: url (/images/company-logo.png);
}
Kui proovisite kasutada "taustpilti" või "taust-graafikat" kui vara, siis need ei õnnestu, sest need ei ole veel CSS-i tegelased.
Mõned CSS-i omadused
On mitmeid CSS-i omadusi, mida saate saidi stiilis kasutada. Mõned näited on:
- Piirid (sealhulgas piiri stiilis, piiri värv ja piiri laius)
- Padding (ka padding-top, padding-right, padding-bottom ja padding-left)
- Marginaalid (sh margin-top, margin-right, margin-bottom ja marginaal-vasakpoolne)
- Fontide perekond
- Fondi suurus
- Taustavärv
- Laius
- Kõrgus
Need CSS-i omadused on suurepärased, mida saab kasutada näidetena, sest need on kõik väga otsekohesed ja isegi kui te ei tea CSS-i, võite arvatavasti arvata, mida nad oma nimede alusel teevad.
Lisaks on ka teisi CSS-i omadusi, mis ei pruugi olla nii ilmne, kuidas nad toimivad nende nimede alusel:
- Float
- Selge
- Ülevool
- Teksti teisendamine
- Z-indeks
Kui jõuate veebidisaini sügavamale, kogete (ja kasutate) kõiki neid omadusi ja palju muud!
Omadused vajavad väärtusi
Iga kord, kui kasutate vara, peate andma sellele väärtuse - ja teatud omadused võivad aktsepteerida ainult teatud väärtusi.
Meie värviomandi esimesel näitel peame kasutama värviväärtust. See võib olla kuueteistkümne väärtus , RGBA väärtus või isegi värvilised märksõnad . Mõni nendest väärtustest töötab, aga kui seda omadust kasutate sõna "sünge", ei teeks see midagi, sest kuna see sõna võib olla kirjeldav, ei ole see CSSis tunnustatud väärtus.
Teine näide "taust-pildist" nõuab, et teie saidi failide tegelikku pilti tuuakse kasutama pilt tee. See on nõutav väärtus / süntaks.
Kõik CSS-i omadused on väärtused, mida nad ootavad. Näiteks:
- Piirivalge värv eeldab värvi väärtust
- Piiri suurus eeldab suuruse väärtust, näiteks piksleid või protsente
- Piiri stiilid eeldavad, et üks varjatud stiilidest, nagu "solid"
Kui te läbite CSS-i omaduste loendi, avastate, et neil on konkreetsed väärtused, mida nad kasutavad stiilide loomiseks, millele need on ette nähtud.
Redigeeris Jeremy Girard