Ki jan yo chanje sit wèb Koulè Font ak CSS

Bon tipografik se yon pati enpòtan nan yon sit entènèt siksè. CSS ba ou gwo kontwòl sou aparans nan tèks sou paj wèb yo paj wèb yo ou bati. Sa a gen ladan kapasite nan chanje koulè a ​​nan nenpòt ki polis ke ou itilize.

Koulè Font ka chanje lè l sèvi avèk yon fèy style ekstèn , yon fèy style entèn , oswa li ka chanje lè l sèvi avèk inline manier nan dokiman an HTML. Pi bon pratik dikte ke ou ta dwe itilize yon fèy style ekstèn pou Styles CSS ou. Yon fèy style entèn yo, ki se estil ekri dirèkteman nan "tèt la" nan dokiman ou yo, yo jeneralman sèlman itilize pou ti, yon sèl-paj sit. Styles Inline yo ta dwe evite depi yo analogue nan fin vye granmoun "font" Tags sa yo ke nou te fè fas ak anpil ane de sa. Moun sa yo ki Styles aliye fè li trè difisil jere style font depi ou ta bezwen chanje yo nan chak egzanp nan style la aliye.

Nan atik sa a, ou pral aprann ki jan yo chanje koulè a ​​font lè l sèvi avèk yon fèy style ekstèn ak yon style ki itilize nan yon tag paragraf. Ou ka aplike pwopriyete a menm menm chanje koulè a ​​font sou nenpòt ki tag ki antoure tèks, ki gen ladan tag .

Ajoute Styles Chanje Font Koulè

Pou egzanp sa a, ou ta bezwen gen yon dokiman HTML pou marke paj ou a ak yon dosye CSS apa ki tache ak dokiman sa a. Dokiman an HTML ta gen anpil chans fè yon kantite eleman nan li. Youn nan nou yo konsène ak nan bi pou yo atik sa a se eleman nan paragraf.

Isit la se ki jan yo chanje koulè a ​​font nan tèks andedan Tags paragraf lè l sèvi avèk fèy style ekstèn ou.

Koulè valè yo ka eksprime kòm mo kle koulè, nimewo koulè RGB, oswa nimewo koulè ekzadesimal.

  1. Ajoute atribi nan style pou tag paragraf la:
    1. p {}
  2. Mete pwopriyete a koulè nan style la. Mete yon kolon apre pwopriyete sa a:
    1. p {koulè:}
  3. Lè sa a, ajoute valè koulè ou apre pwopriyete a. Asire ou ke ou fini ke valè ak yon semi-kolon:
    1. p {koulè: nwa;}

Paragraf yo nan paj ou an pral kounye a nwa.

Egzanp sa a itilize yon mo kle - "nwa". Sa se yon fason pou ajoute koulè nan CSS, men li trè limite. Sèvi ak mo kle pou "nwa" ak "blan" se dwat depi sa yo de koulè yo trè espesifik, men sa k ap pase si ou itilize mo kle tankou "wouj", "ble", oswa "vèt"? Egzakteman ki lonbraj nan wouj, ble, oswa vèt ou pral jwenn? Ou pa ka presize egzakteman ki lonbraj koulè ou vle ak mo kle. Sa a se poukisa valè ekzadesimal yo souvan itilize nan plas mo kle koulè.

p {koulè: # 000000; }}

Sa a style CSS ta tou mete koulè a ​​nan paragraf ou a nwa, paske Kòd la hex nan # 000000 tradui nwa. Ou ta ka menm sèvi ak steno ak valè eksepsyon sa a epi ekri li kòm jis # 000 epi ou ta jwenn menm bagay la.

Kòm nou deja mansyone, valè hex travay byen lè ou bezwen yon koulè ki pa tou senpleman nwa oswa blan. Isit la se yon egzanp:

p {koulè: # 2f5687; }}

Sa a valè hexes ta mete paragraf yo nan yon koulè ble, men kontrèman ak mo kle a "ble", kòd sa a ègzist ba ou kapasite nan mete yon lonbraj trè espesifik nan ble - chans yon sèl la ke designer a chwazi yo lè yo te kreye koòdone a pou sit entènèt sa a. Nan ka sa a, koulè a ​​ta dwe yon mitan-ranje, adwaz-tankou ble.

Finalman, ou ka itilize valè RGBA koulè pou koulè font tou. RGCA se kounye a sipòte nan tout navigatè modèn, kidonk, ou ka sèvi ak sa yo valè ak enkyete ti kras ke li pa pral sipòte nan yon navigatè entènèt, men ou ka tou mete yon rapide fasil.

p {koulè: rgba (47,86,135,1); }}

Sa a valè RGBA se menm bagay la kòm adwaz a koulè ble espesifye pi bonè. Premye 3 valè yo mete valè wouj, vèt, ak ble ak nimewo final la se anviwònman an alfa. Li se mete nan "1", ki vle di "100%", se konsa sa a koulè ta pa gen okenn transparans. Si ou mete ke nan yon nimewo desimal, tankou .85, li ta tradui a 85% stupidity ak koulè a ​​ta dwe yon ti kras transparan.

Si ou vle baletore valè koulè ou, ou ta fè sa:

p {
koulè: # 2f5687;
koulè: rgba (47,86,135,1);
}}

Sentaks sa a kouche kòd ekzèsis la an premye. Li Lè sa a, redaksyon ki valè ak nimewo a RGBA. Sa vle di ke nenpòt ki navigatè ki pi gran ki pa sipòte RGBA ta jwenn valè an premye ak inyore dezyèm lan. Navigatè modèn ta itilize dezyèm lan pou chak Cascade CSS la.