Wéi Dir e External Style Sheet ze bauen

CSS Site Wide benotzen

Websäiten sinn eng Kombinatioun vum Stil an der Struktur, an am heitegen Web, ass et eng bescht Praxis fir dës zwee Aspekter vun enger Websäit separat auseneen ze halen.

HTML ass ëmmer gewiescht wat e Site mat senger Struktur ubitt. An den éischten Deeg vum Web hunn HTML och Stil Informatiounen enthale gelooss. Elemente wéi den Tag waren iwwer den HTML Code ofgeléist ginn, fir Aussoen an Informatioun niddereg mat strukturellen Informatiounen ze addéieren. D'Web Standards Bewegung huet eis gedroen fir dës Praxis z'ënnerhuelen a stattdessen all Stil Informatiounen an CSS oder Cascading Style Sheets ze drécken. An dësem Schrëtt weider, aktuell Empfehlungen sinn datt Dir benotzt wat e "externe Stylblat" benotzt fir Är Websäit Styling Bedierfnesser.

Virdeeler a Noutwennegkeet vun äusseren Style Sheets

Ee vun de schéinsten Saachen iwwer Cascading Style Sheets ass datt Dir se ka benotzen fir Är ganz Site konsequent ze halen. Deen einfachste Wee fir dat ze maachen ass fir e externen Stilblatt ze verbannen oder ze importéieren. Wann Dir déi selwecht Ekstallerstëtzung fir all Säit vun Ärer Säit benotzt, kënnt Dir sécher sinn datt all Säiten déi selwecht style sinn. Dir kënnt et och méi liicht maachen fir Ännerungen fir d'Zukunft ze maachen. Well all Säiten déi selwecht externen Stylblat benotzen, gëtt all Changement zu dësem Blatt all Säit Site beaflosst. Dëst ass vill besser wéi wann Dir all Säit individuell ännere muss!

Virdeeler vum Externe Stilblieder

  • Dir kënnt de Look a fille vun e puer Dokumenter direkt kontrolléieren.
    • Dëst ass besonnesch nëtzlech wann Dir mat engem Team vu Leit geschafft fir Är Websäit ze kreéieren. Viele Stilregelen kënnen schwéier erënneren, a wann Dir e gedréckte Stil Leedung hutt, ass et net effikass an zevill Zäit fir ze bestëmmen, duerchzeféieren, ob d'Beispillt Text an 12 Punkten Arial Schrëft oder 14 Point Courier geschriwwe gëtt. Wann Dir alles an enger Plaz hutt, a well dat ass och Plaz wou Dir Ännerungen maacht, da kënnt Dir esou vill méi einfach Betreiung maachen.
  • Dir kënnt Klassen vu Stiler erstellen, déi dann op ville verschidden HTML Elementer benotzt kënne ginn .
    • Wann Dir oft e gewësse Schrëftsteller benotzt, fir Betriber op verschiddene Saachen op Är Säit ze léinen, kënnt Dir e Klassenattribut benotze fir datt Dir Är Stilblatt opgeriicht hutt, fir dat Look an ze fillen, anstatt e spezifeschen Stil fir all Exemplar vun der Wäert.
  • Dir kënnt Är Stiler einfach matmaachen fir méi effizient ze sinn.
    • All d'Gruppéierungsmethoden, déi zu CSS verfügbar sinn, kënnen an externen Formblieder benotzt ginn an doduerch Iech méi Kontrolle an Flexibilitéit op Säiten.

Nodeeler vun äusseren Style Sheets

  • Externe Stilblieder kënnen d'Downloadzeit erhéijen, besonnesch wann se extrem grouss sinn. Zënter der CSS-Datei ass e gesonden Dokument, dat muss gelueden ginn, et wäert d'Performance beaflossen fir dësen Download ze maachen.
  • Externe Stilblieder gi séier séier wéi et schwéier ass ze soen, wann e Stil net méi benotzt gëtt, well se net geläscht gëtt wann d'Säit ewechgehale gëtt. Benotzere Verwaltung vun Äre CSS-Dateien ass wichteg, besonnesch wann verschidde Leit schaffen am selwechte Fichier.
  • Wann Dir nëmmen eng eenzeg Säit Websäit hutt, mat enger externer Datei fir CSS net néideg sinn, well Dir nëmmen dës Säit benotzt. Vill vun de Virdeeler vun externe CSS sinn verluer wann Dir nëmmen eng eenzeg Säit Site hunn.

Wéi Dir e External Style Sheet erstellt

Externe Formblieder ginn mat enger ähnlecher Syntax zum Dokumentebalkenstilblatt erstellt. All déi Dir braucht, och opzehuelen, sinn de Selektor an d'Erklärung. Just wéi an engem Dokumentebalkenstilbett ass d'Syntax fir eng Regel:

selector {property: value;}

Späichere dës Regelen an eng Textdatei mat der Extensioun. Css. Dëst ass net erfuerderlech, awer et ass eng gutt Gewunnech fir anzeginn, fir datt Dir Äert Stylbläsch an engem Verzeichnislëscht direkt erkennt.

Soubal Dir e Stylblat dokumentéiert, musst Dir se op Är Websäiten verknäppt. Dat kann op zwou Méiglechkeete gemaach ginn:

  1. Verléieren
    1. Fir e Stilblatt ze verbannen, benotzt Dir den HTML Tag. Dëst huet d'Attribut Rel , Typ a href . De Rel Attribut verbreet wat Dir verknäppt (an dësem Fall en Stylesheet), de Type definéiert de MIME-Typ fir de Browser, an den href ass de Wee an d'.css-Datei.
  2. Importéieren
    1. Dir hätt e importéierte Stylstick an engem Dokumentebenebléckstéck benotze fir datt Dir d'Attributer vun engem externen Stylblatt importéiere wëllt, ouni datt Dir Dokumetspezifikatioune verléiert. Dir nennt et op eng ähnlech Manéier e Link ze verbannen, nëmmen datt et an enger Dokumentarfilm Stellvertriedung genannt gëtt. Dir kënnt esou vill externe Formblieder importéieren wéi Dir braucht Är Websäit z'erhalen.

Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard am 8/8/17