Dizainas CSS ypatybės apibrėžimas
Kas yra CSS savybės ir kaip jas naudoti?
TurinysIšskleistiSvetainės vizualinį stilių ir išdėstymą diktuoja CSS arba pakopinio stiliaus lapai . Tai yra dokumentai, formuojantys tinklalapio HTML žymėjimą ir pateikiantys žiniatinklio naršyklėms instrukcijas, kaip rodyti puslapius, atsiradusius dėl šio žymėjimo. CSS tvarko puslapio išdėstymą, taip pat spalvas, fono paveikslėlius, tipografiją ir dar daugiau.
Jei pažvelgsite į CSS failą, pamatysite, kad, kaip ir bet kuri žymėjimo ar kodavimo kalba, šie failai turi specifinę sintaksę. Kiekvienas stiliaus lapas yra sudarytas iš kelių CSS taisyklių. Visos šios taisyklės sukuria svetainės stilių.
CSS taisyklės dalys
CSS taisyklė susideda iš dviejų skirtingų dalių – parinkiklio ir deklaracijos. Pasirinkiklis nustato, kas puslapyje yra stilizuojamas, o deklaracija nurodo, kaip jis turėtų būti stilizuotas. Pavyzdžiui:
|_+_|
Tai CSS taisyklė. The parinkiklis dalis yra p , kuris yra „pastraipų“ elementų parinkiklis. Todėl būtų pasirinktos VISOS svetainės pastraipos ir joms būtų suteiktas šis stilius (nebent yra pastraipų, kurioms taikomi konkretesni stiliai kitur jūsų CSS dokumente).
Taisyklės dalis, kuri sako: spalva: #000; “ yra tai, kas žinoma kaip deklaracija. Ši deklaracija susideda iš dviejų dalių – nuosavybė ir vertė .
The nuosavybė yra spalva šios deklaracijos dalis. Jis nurodo, kuris parinkiklio aspektas bus vizualiai pakeistas.
The vertė į ką bus pakeista pasirinkta CSS nuosavybė. Mūsų pavyzdyje mes naudojame šešioliktainę reikšmę #000 , kuris yra CSS trumpinys, reiškiantis „juodą“.
Taigi, naudojant šią CSS taisyklę, mūsų puslapyje pastraipos būtų rodomos juodo šrifto spalva.
CSS nuosavybės pagrindai
Kai rašote CSS ypatybes, negalite jų tiesiog sukurti taip, kaip jums atrodo tinkama. Pavyzdžiui, „spalva“ yra tikroji CSS nuosavybė, todėl galite ją naudoti. Ši savybė lemia elemento teksto spalvą. Jei bandytumėte naudoti „text-color“ arba „font-color“ kaip CSS ypatybes, tai nepavyktų, nes tai nėra tikroji CSS kalbos dalis.
Kitas pavyzdys yra ypatybė „background-image“. Ši savybė nustato vaizdą, kuris gali būti naudojamas fone, pavyzdžiui:
|_+_|Jei bandytumėte naudoti „fono paveikslėlis“ arba „fono grafika“ kaip ypatybę, jie nepavyktų, nes vėlgi, tai nėra tikrosios CSS savybės.
Kai kurios CSS ypatybės
Yra keletas CSS ypatybių, kurias galite naudoti norėdami sukurti svetainės stilių. Keletas pavyzdžių:
- Kraštinė (įskaitant kraštinės stilių, kraštinės spalvą ir kraštinės plotį)
- Paminkštinimas (įskaitant užpildymą viršuje, paminkštinimu dešinėje, paminkštinimu apačioje ir kairėje)
- Paraštės (įskaitant paraštę viršuje, paraštės dešinėje, paraštės apačioje ir paraštės kairėje)
- Šrifto šeima
- Šrifto dydis
- Fono spalva
- Plotis
- Aukštis
Šios CSS ypatybės yra puikios naudoti kaip pavyzdžiai, nes visos jos yra labai paprastos ir net jei nepažįstate CSS, tikriausiai galite atspėti, ką jos daro pagal savo pavadinimus.
Taip pat susidursite su kitomis CSS ypatybėmis, kurios gali būti ne tokios akivaizdžios, kaip jos veikia pagal jų pavadinimus:
- Plūdė
- Aišku
- Perpildymas
- Teksto transformacija
- Z indeksas
Kai gilinsitės į interneto dizainą, susidursite (ir naudosite) visas šias savybes ir dar daugiau!
Savybėms reikia vertybių
Kiekvieną kartą, kai naudojate nuosavybę, turite suteikti jai vertę, o tam tikros savybės gali priimti tik tam tikras vertes.
Pirmajame ypatybės „spalva“ pavyzdyje turime naudoti spalvos reikšmę. Tai gali būti šešioliktainė vertė, RGBA reikšmė arba net spalvų raktažodžiai . Bet kuri iš šių verčių veiktų, tačiau jei su šia ypatybe naudotumėte žodį „niūrus“, tai nieko nedarytų, nes, kad ir koks būtų aprašomasis žodis, CSS ji nėra atpažįstama reikšmė.
Antrasis mūsų „fono vaizdo“ pavyzdys reikalauja, kad būtų naudojamas vaizdo kelias gauti tikrą vaizdą iš jūsų svetainės failų. Tai reikalinga reikšmė / sintaksė.
Visos CSS ypatybės turi vertes, kurių jos tikisi. Pavyzdžiui:
- Kraštinės spalva tikisi spalvos vertės.
- Kraštinės dydis tikisi dydžio vertės, pvz., pikselių arba procentų.
- Kraštinių stiliai tikisi vieno iš rezervuotų stilių, naudojamų šiai nuosavybei, pvz., „kietasis“.
Jei peržiūrėsite CSS ypatybių sąrašą, pamatysite, kad kiekviena iš jų turi konkrečias reikšmes, kurias naudos kurdami skirtus stilius.