E visuelle Styl vun engem Site a Layout ginn duerch CSS oder Cascading Style Sheets verdeelt. Dëst sinn Dokumenter, déi d'HTML Markup vun engem Webform formen, déi Webbrowser mat Instruktioune kréien fir wéi d'Säiten déi dës Markup erreeche weisen. CSS handelt de Layout vun enger Säit, wéi och d'Faarf, d'Backgroundsbilder, d' Typographie an sou vill méi.
Wann Dir op eng CSS-Datei kuckt, gesitt Dir datt e wéi all Markéierungs- oder Kodierungssprooch dës Dateien e spezifesch Syntax hunn. All Stylblat ass aus enger Rei vu CSS Regele gemaach. Dës Regelen, wann se voll sinn, sinn d'Stiler am Site.
D'Parts of a CSS Regel
Eng CSS Regel besteet aus zwee verschiddenen Deel - de Selektor a d'Erklärung. De Sailor bestëmmt, wat op enger Säit stiliséiert gëtt an d'Deklaratioun ass wéi et soll geschafft ginn. Zum Beispill:
p {
Faarf: # 000;
}}
Dëst ass eng CSS Regel. De Sektor Deel ass den "p", deen e Element selector fir "Paragrafen" ass. Et wäerte also all ALL Paragrafen an enger Websäit auswielen an se mat dësem Stil unzebidden (ausser et gëtt Absätze déi vu méi spezifeschen Stiler an engem anere Fall an Ärem CSS-Dokument gezielt ginn).
Deen Deel vun der Regel déi "Faarf: # 000" sot; ass wat als Deklaratioun bekannt ass. Dës Deklaratioun besteet aus zwee Stécker - d'Besëtz an den Wäert.
D'Besëtz ass de "Faarwen" Deel vun dëser Erklärung. Et Diktat datt deen Aspekt vum Wähler visuell geännert gëtt.
De Wäert ass wat d'gewielte CSS-Propietéit geännert ginn ass. An eise Beispiller benotzt mir den Hexwäert vun # 000, wat CSS kuerzst "schwaarz" ass.
Aems Dir dës CSS Regel huet, ass eis Säit Paragrafen an enger Schrëftfärbung vun schwaarz.
CSS Property Basics
Wann Dir CSS Properties schreift, kënnt Dir se net nëmmen sou séier wéi Dir gesitt. Zousätzlech "Faarwen" ass eng tatsächlech CSS Eigenschaft, sou datt Dir se benotze kënnt. Dës Eigenschaft ass wat d'Textfär vun engem Element bestëmmt. Wann Dir probéiert hutt "Textfär" oder "Schrëftfärbung" als CSS-Propositiounen ze benotzen, fanne se dëst net falsch, well se net d'Wierder vun der CSS Sprooch sinn.
En anert Beispill ass d'Besëtz "Background-Image". Dës Eigenschaft setzt e Bild, dat benotzt ka mat engem Hannergrond, sou wéi:
.logo {
Hannergrond-Image: url (/images/company-logo.png);
}}
Wann Dir probéiert hutt "background-picture" oder "background-graphic" als Eegeschafte ze benotzen, fille se zou, well dës Kéier net eigentlech CSS-Properties sinn.
E puer CSS Properties
Et ginn e puer CSS-Propositiounen, déi Dir benotzt fir e Site ze stiléieren. E puer Beispiller sinn:
- Border (inkl. Grenzart, Grenzfär a Grenzbreed)
- Padding (inklusive Padding-top, padding-right, padding-bottom, and padding-left)
- Margren (och Margin-Top, Margin-Right, Margin-Bottom, a Rand Link)
- Font-Famill
- Schrëftgréisst
- Background-color
- Breet
- Héicht
Dës CSS-Propétaiten sinn grouss, fir Beispiller ze benotzen, well se ganz einfach sinn an och wann Dir net CSS kennt, kënnt Dir wahrscheinlech virstellen, wat se op hirem Numm baséieren.
Et ginn aner CSS-Propositiounen, déi Dir op Iech erausfënnt, och wat net vläicht sou kloer wéi se hir Aarbecht nennen:
- Schwammen
- Clear
- Iwwerfluss
- Texttransformatioun
- Z-Index
Wéi Dir méi déif an Webdesign bekëmmst, wäert Dir all dës Eegeschaften a méi oppassen (a benotzen!
Properties Need Wäerter
All Kéier wann Dir eng Eegeschafte benotzt, musst Dir e Wäert ginn - a verschiddene Besëtzer kënnen nëmme gewësse Wäert akzeptéieren.
An eisen éischte Beispill vun der "Faarf" Eegeschafte brauche mir e Faarwen ze benotzen. Dëst kéint e Secherwerfer , RGBA Wäert, oder souguer Faarfschlësselen . All vun dëse Wäerter géifen ariichten, awer wann Dir d'Wuert "gloomy" mat dësem Besëtz gebraucht huet, da wier et näischt, well se beschreift wéi dëst Wuert ka sinn net als erkannt Wäerter zu CSS.
Eist zweet Beispill vu "Background-Image" erfuerdert e Bildpfad fir e aktuellen Image aus Äre Site ze liesen. Dëst ass de Wäert / Syntax, deen erfuerderlech ass.
All CSS Properties hunn Wäerter, déi se erwaarden. Zum Beispill:
- Border Faarf erwähnt e Faarwen
- D'Grenzgréisst erwähnt e gréisstende Betrag, wéi Pixel oder Prozentzuelen
- Border Styles erwaart eent vun de reservéiert Stiler, déi fir dës Eigenschaft gebraucht ginn, wéi "fest"
Wann Dir d'Lëscht vu CSS-Propositiounen duerchkuckt, kënnt Dir entdecken datt jiddereen vun hinnen spezifesch Wäerter huet, déi se benotzen fir d'Stile ze kreéieren déi si beabsichtegen.
Edited by Jeremy Girard