Die webwerf se visuele styl en uitleg word deur CSS of Cascading Style Sheets gedikteer. Dit is dokumente wat 'n HTML-opmaak van 'n webblad vorm. Weblesers voorsien instruksies oor hoe om die bladsye wat uit daardie opmaak voortspruit, te vertoon. CSS hanteer 'n bladsy se uitleg, sowel as kleur, agtergrond beelde, tipografie en nog baie meer.
As jy na 'n CSS-lêer kyk, sal jy sien dat, soos enige opmerkings- of kodertaal, hierdie lêers 'n spesifieke sintaksis vir hulle het. Elke stylblad bestaan uit 'n aantal CSS-reëls. Hierdie reëls, wanneer dit volledig geneem word, is wat die werf van die webwerf is.
Die Dele van 'n CSS-reël
'N CSS-reël bestaan uit twee afsonderlike dele - die keurder en die verklaring. Die keurder bepaal wat op 'n bladsy gestileer word en die verklaring is hoe dit gestileer moet word. Byvoorbeeld:
p {
kleur: # 000;
}
Dit is 'n CSS reël. Die seleksie deel is die "p", wat 'n element selector vir "paragrawe" is. Dit sal dus ALLE paragrawe in 'n webwerf kies en aan hierdie styl voorsien (tensy daar paragrawe is wat deur meer spesifieke style elders in u CSS-dokument geteiken word).
Die deel van die reël wat sê "kleur: # 000;" is wat bekend staan as die verklaring. Die verklaring bestaan uit twee stukke - die eiendom en die waarde.
Die eiendom is die "kleur" van hierdie verklaring. Dit bepaal watter aspek van die selector visueel verander sal word.
Die waarde is waaraan die gekose CSS-eiendom verander sal word. In ons voorbeeld gebruik ons die hex-waarde van # 000, wat CSS-kortskrif vir "swart" is.
As ons dus hierdie CSS-reël gebruik, sal ons bladsy paragrawe vertoon wat in 'n fontkleur van swart vertoon word.
CSS Eiendomsbeginsels
As jy CSS-eienskappe skryf, kan jy dit nie eenvoudig maak soos jy dit goedvind nie. Vir gevalle is "kleur" 'n werklike CSS-eiendom, dus jy kan dit gebruik. Hierdie eienskap is wat die teks kleur van 'n element bepaal. As jy probeer om "teks-kleur" of "font-kleur" as CSS-eienskappe te gebruik, sal dit misluk omdat dit nie werklike dele van die CSS-taal is nie.
Nog 'n voorbeeld is die eiendom "agtergrond-beeld". Hierdie eienskap stel 'n prentjie wat vir 'n agtergrond gebruik kan word, soos volg:
.logo {
agtergrond-beeld: url (/images/company-logo.png);
}
As jy probeer om "agtergrond-prent" of "agtergrond-grafiese" as eiendom te gebruik, sal hulle misluk omdat dit weer nie werklike CSS-eienskappe is nie.
Sommige CSS eienskappe
Daar is 'n aantal CSS eienskappe wat jy kan gebruik om 'n webwerf te styl. Enkele voorbeelde is:
- Grens (insluitend grensstyl, grens-kleur en grenswydte)
- Opvulling (insluitend opvulling-top, vulling-regs, polstering-bodem, en padding-links)
- Marge (insluitend marge-boonste, marge-regs, marge-onderkant en marge-links)
- Font familie
- Skrifgrootte
- Agtergrondkleur
- wydte
- Hoogte
Hierdie CSS-eienskappe is wonderlik om as voorbeelde te gebruik, want hulle is almal baie eenvoudig en selfs as jy nie CSS ken nie, kan jy waarskynlik raai wat hulle doen op grond van hul name.
Daar is ook ander CSS eienskappe wat jy ook sal ontmoet wat dalk nie so duidelik is hoe hulle werk op grond van hul name nie:
- float
- duidelik
- oorloop
- Teks-omskep
- Z-indeks
As jy dieper in webontwerp raak, sal jy al hierdie eienskappe ontmoet (en gebruik)!
Eienskappe benodig waardes
Elke keer as jy 'n eiendom gebruik, moet jy dit 'n waarde gee - en sekere eienskappe kan slegs sekere waardes aanvaar.
In ons eerste voorbeeld van die "kleur" eiendom, moet ons 'n kleurwaarde gebruik. Dit kan 'n hex waarde , RGBA waarde of selfs kleur sleutelwoorde wees . Enige van daardie waardes sou werk, maar as jy die woord "somber" met hierdie eiendom gebruik het, sou dit niks doen nie, want dit is nie beskrywend as wat dit is nie, maar dit is nie 'n erkende waarde in CSS nie.
Ons tweede voorbeeld van 'agtergrond-beeld' vereis dat 'n beeldpad gebruik word om 'n werklike beeld van die lêers van jou werf te haal . Dit is die waarde / sintaks wat benodig word.
Alle CSS-eienskappe het waardes wat hulle verwag. Byvoorbeeld:
- Grens-kleur verwag 'n kleurwaarde
- Grensgrootte verwag 'n maatwaarde, soos pixels of persentasies
- Grensstyle verwag een van die gereserveerde style wat vir hierdie eiendom gebruik word, soos "soliede"
As jy deur die lys van CSS-eienskappe gaan, sal jy ontdek dat elkeen spesifieke waardes het wat hulle sal gebruik om die style te skep waarvoor hulle bedoel is.
Geredigeer deur Jeremy Girard