In visuele styl en webside fan 'e webside wurde diktearre troch CSS of Cascading Style Sheets. Dit binne dokuminten dy't foarmje fan in HTML-webside fan 'e webside, it bieden fan webbrowsers mei ynstruksjes oer hoe jo de siden sjen te litten dy't út dy markearring resultaat. CSS behannelet in layout fan in side, lykas kleur, eftergrûnôfbyldings, typografy en safolle mear.
As jo op in CSS-triem sjogge, sille jo dizze sjogge as in markearring of kodearring-taal, dan hawwe dizze bestannen in spesifike syntaks foar har. Elke stylblêd is makke fan in tal CSS-regels. Dizze regels, as folslein opnommen binne, binne hokker stilen de side.
De dielen fan in CSS-regel
In CSS-regel is makke út twa ûnderskate dielen - de selector en de ferklearring. De seleksje bepaalt hoe't op in side stylearre wurdt en de deklaraasje is hoe't it styl wurde moat. Bygelyks:
p {
kleur: # 000;
}
Dit is in CSS-regel. It selecteurpart is de "p", in elemint seleksje foar "paragrafen". It soargen ALLE paragrafen op in side en selektearje dy dizze styl (of it moat wêze dat paragrafen dy't troch mear spesifike stilen oars yn jo CSS dokumint binne rjochtsje).
It diel fan 'e regel dy't' kleur: # 000; 'seit. is wat bekend is as de ferklearring. Dizze ferklearring is makke út twa stikken - it eigendom en de wearde.
It eigendom is it "kleur" stik fan dizze ferklearring. It bepaalt hokker aspekt fan 'e selector ferwachte wurdt.
De wearde is wat it keazen CSS-eigenskip feroare wurdt. Yn ús foarbyld brûke wy de hexwearde fan # 000, dat is CSS-rol foar "swart".
As jo dizze CSS-regel brûke, dan soe ús side paragrafen sjen litte yn in lettertype fan swart.
CSS-Eigenskippen
As jo CSS-eigenskippen skriuwe, kinne jo net gewoan meitsje as se passe sjogge. Foar ynstekkers is "kleur" in feitlike CSS-eigenskip, dus kinst it brûke. Dit eigenskip is wat bepale de tekstkleur fan in elemint. As jo besykje "tekst-kleur" of "font-color" as CSS-eigenskippen te brûken, sille dizze mislearre omdat se gjin echte dielen fan 'e CSS-taal binne.
In oar foarbyld is it eigendom "eftergrûnôfbylding". Dit eigenskip pleatst in ôfbylding dy't brûkt wurde kin foar in eftergrûn, sa as dit:
.logo {
background-image: url (/images/company-logo.png);
}
As jo besykje "eftergrûnôfbylding" of "eftergrûnôfbylding" brûke as in eigenskip, sille se falle, om't dizze kearen net werkelike CSS-eigenskippen binne.
Guon CSS-eigenskippen
Der binne in tal CSS-eigenskippen dy't jo brûke kinne om in side te styl te meitsjen. Guon foarbylden binne:
- Border (ynklusyf grûnstyl, grinskleur en grinsbreedte)
- Padding (wêrûnder padding-top, padding-right, padding-bottom, en padding-left)
- Marginen (wêrûnder margjen-top, margje-rjochts, margin-bottom, margje-links)
- Lettertypefamylje
- Letter grutte
- Achtergrûn kleur
- Breedte
- Hichte
Dizze CSS-eigenskippen binne geweldig om as foarbylden te brûken, om't se al hiel ienfâldich binne en, sels as jo CSS net witte, kinne jo wierskynlik guon sizze wat se dogge basearre op har nammen.
Der binne oare CSS-eigenskippen dy't jo oanfolje, dy't ek net sa maklik wêze as se wurkje op basis fan harren nammen:
- Driuwe
- Opklearje
- Oerflak
- Tekst-transformaasje
- Z-yndeks
As jo djipper yn webûntwerp komme, sille jo dizze eigenskippen en mear (en) brûke!
Eigenskippen ferletten wearden
Eltse kear as jo in eigendom brûke, moatte jo in wearde jaan, en guon eigenskippen kinne inkele gewoanten akseptearje.
Yn ús earste foarbyld fan 'e "kleur" eigendom moatte wy in kleurwearde brûke. Dit kin in hexwearde wêze , RGBA-wearde, of sels kleur-kaaiwurden . Elk fan dy wearden soe lykwols wurkje as jo it wurd "gloeiend" brûke mei dit eigendom, it soe neat dwaan, om't, as beskriuwend as dat wurd wêze kin, it net in erkende wearde is yn CSS.
Us twadde foarbyld fan "eftergrûnôfbylding" freget om in byldpaad te brûken om in actualisjele ôfbylding fan jo bestannen te heljen . Dit is de wearde / syntaksis dy't nedich is.
Alle CSS-eigenskippen hawwe wearden dat se ferwachtsje. Bygelyks:
- Border-kleur ferwachtet in kleurwearde
- Bordergrutte ferwachtet in bepaalde wearde, lykas piksels of persintaazje
- Borderstilen ferwachtet ien fan 'e reservearre stilen dy't brûkt binne foar dit eigendom, lykas "solid"
As jo troch de list fan CSS-eigenskippen gean, sille jo ûntdekke dat elk fan har spesifike wearden hat dy't se brûke om de styl te meitsjen dy't se bedoeld binne.
Edited by Jeremy Girard