Wéi Ändere Site Schrëftfärder Mat CSS

Gutt typographesch Design ass e wichtege Bestanddeel vun enger erfollegräicher Websäit. CSS gitt dech super Kontroll iwwer d'Erscheinung vum Text op den Websäiten déi Websäiten déi Dir bauen. Dëst beinhalt d'Fäegkeet, d'Faarf vun all Schrëften ze änneren, déi Dir benotzt.

Schrëftfarmen kënnen geännert ginn mat engem externe Formblat , e internen Stilblatt , oder et däerf geännert ginn mat Inline-Styling am HTML-Dokument. Best Practices Diktat datt Dir e externe Stylblatt fir Är CSS Styles benotzt. Eng intern Formentitel, déi Stiler direkt an de "Kapp" ​​vun Ärem Dokument geschriwwe sinn, sinn normalerweis nëmme fir kleng Site mat enger Säit. Inline Stile sollen vermeelt ginn well se an de alen "Schrëft" Tester sinn, déi mir mat ville Jore virun. Déi Inline Styles mécht et ganz schwéier fir Schrëftstil ze manéieren, well Dir musst si bei all Instruktioune vum Inline-Stil änneren.

An dësem Artikel léiert Dir wéi Dir d'Schrëftfärder benotzt mat engem externen Stylblat an e Stil, deen an engem Paragraf benotzt. Dir kënnt d'selwecht Stil Stil benotzen fir d'Schrëftfärder op all Zertifika z'änneren, déi Text ubelaangt, dorënner dem Tag.

Stiler addéieren fir Schrëftfärder z'änneren

Fir dësem Beispill musst Dir e HTML-Dokument fir Är Säite markéieren an eng separat CSS-Datei déi mat dësem Dokument verbonnen ass. De HTML-Dokument hätt wahrscheinlech eng Rei vun Elementer un. Deen dee mir betrëfft fir den Zweck vun dësem Artikel ass de Punkt Element.

Hei ass wéi d'Schrëftfärderung vun Text am Paragraeg mat dengem externen Stylblat geännert gëtt.

Faarweg Wäerter kënnen als Faarfstichwahlen, RGBfarbennummeren oder hexadezimal Farba Numberen ausgedréckt ginn.

  1. Fëllt d'Stil Attribut fir de Paragraf Tag:
    1. p {}
  2. Fëllt d' Faarfimmkeet am Stil. Plaz e Colon nom dësem Besëtz:
    1. p {color:}
  3. Duerno addéiere mer d'Faarf no der Oweskeess. Vergewëssert Iech datt dee Wäert mat engem Hallefaarwen enden:
    1. p {Faarf: schwa;;}

D'Absätze vun Ärer Säit ginn elo schwaarz.

Dëst Beispill benotzt e Faarfschlëssel - "schwaarz". Dat ass eng Aart a Weis fir d'Faarf a CSS ze addéieren, awer et ass ganz limitéiert. Benotzt Schlësselwierder fir "schwaarz" a "Wäiss" ass richteg, well dës zwee Faarwen ganz spezifesch sinn, awer wat passéiert wann Dir Schlësselwierder wéi "r", "blu" oder "gréng" benotzt? Egal wat Schattich vum roude, bloe oder gréng wäert Dir kréien? Dir kënnt net genau spezifizéieren wéi e Faarffleeg mat Schlësselwieder steet. Duerfir gi hexadezimal Wäerter oft benotzt a Plaz vu Faarf Keywords.

p {color: # 000000; }}

Dëse CSS-Stil géing och d'Faarf vun Ären Absätze fir schwaarz maachen, well de Hexcode vun # 000000 schreift schwa. Dir kënnt souguer Stäerz benotzen mat dësem Hexwert a schreift et als just # 000 an Dir hätt déiselwecht Saache kritt.

Wéi mir schon erwähnt sinn, funktionnéiert d'Hexendiwueleg wann Dir eng Faarf braucht, déi net nëmmen schwaarz oder wäiss ass. Hei ass e Beispill:

p {color: # 2f5687; }}

Dëse Hexwert huet d'Absätze op eng blo Faarf gesat, awer am Géigesaz zum Schlusselwort "Blue" huet dësen Hexcode d'Fähëet e ganz spezifesche Schatt vu bloem - e wahrscheinlech deen, dee vum Konstruktor gewielt huet, wann se d'Interface fir dësem Site. An dësem Fall wäerte d'Faarf a Mëttelklass, Schiefer wéi Blo.

Schlussendlech kënnt Dir och RGBA-Faarwen fir Schrëftfärber benotzen. RGCA gëtt elo an all modernen Browser ënnerstëtzt, sou datt Dir dës Wäerter mat wéineg Suerg benotzt datt et net an engem Webbrowser ënnerstëtzt gëtt, awer Dir kënnt och e liichtfällege Fall setzen.

p {color: rgba (47.86.135,1); }}

Dëse RGBA-Wäert ass d'selwecht wéi déi éischter schwaarz Faarf. Déi éischt 3 Wäerter setzen déi rout, gréng a blo Wäerter an d'endlech Nummer ass d'Alpha-Parameteren. Et ass op "1" gesetzt, dat heescht "100%", sou datt dës Faarf keen Transparenz huet. Wann Dir dat op eng Dezimalzuel setzt, wéi .85, wäert et op 85% Opazitéit maachen an d'Faarf méi liicht transparent wären.

Wann Dir wëllt Är Kär wuere wëllt, da géif Dir dëst maachen:

p {
Faarf: # 2f5687;
Faarf: rgba (47.86.135,1);
}}

Dës Syntax setzt den Hexcode als éischt. Et iwwerschratt dann dee Wäert mat der RGBA Nummer. Dëst bedeit datt all äere Browser, deen net RGBA ënnerstëtzt, den éischte Wäert kritt an déi zweet ignoréiere kënnt. Modern Browser benotzen déi zweet per CSS Kascade.