Conas a Athraigh Cló Dathanna Gréasáin Le CSS

Is cuid thábhachtach de shuíomh gréasáin rathúil dearadh tipagrafach maith é. Tugann CSS rialú mór duit ar chuma téacs ar na leathanaigh ghréasáin na leathanaigh ghréasáin a thógann tú. Áirítear leis seo an cumas chun dath aon chlónna a úsáideann tú a athrú.

Is féidir dathanna an chló a athrú ag baint úsáide as bileog stíle seachtrach , bileog stíl inmheánach , nó d'fhéadfaí é a athrú ag baint úsáide as stíliú inlíne laistigh den doiciméad HTML. Deir na cleachtais is fearr gur chóir duit bileog stíl seachtrach a úsáid le haghaidh do stíleanna CSS. De ghnáth ní úsáidtear bileog stíle inmheánach, atá stíleanna a scríobh go díreach i "ceann" do dhoiciméad, ach le haghaidh láithreáin aon-leathanach beaga. Ba chóir stíleanna inlíne a sheachaint ós rud é go bhfuil siad cosúil leis na sean-clibeanna "cló" a dhéileáilomar le blianta fada ó shin. Déanann na stíleanna inlíne sé an-deacair stíl chló a bhainistiú ós rud é go gcaithfeá iad a athrú ag gach cás den stíl inlíne.

San alt seo, beidh tú ag foghlaim conas an dath cló a athrú ag baint úsáide as bileog stíl seachtrach agus stíl a úsáidtear i gclib mír. Is féidir leat an mhaoin stíl chéanna a chur i bhfeidhm chun an dath cló a athrú ar aon chlib a chuimsíonn téacs, lena n-áirítear an chlib .

Ag Cur Stíleanna le Dath Cló Athraigh

Ar an sampla seo, bheadh ​​ort doiciméad HTML a bheith agat le haghaidh do mharcáil leathanach agus comhad CSS ar leith atá ceangailte leis an doiciméad sin. D'fhéadfadh go mbeadh roinnt eilimintí ann sa doiciméad HTML. Is é an t-eilimint mhír atá againn maidir leis an airteagal seo.

Seo mar a athrófar dath clóite an téacs taobh istigh de na clibeanna mír le do bhileog stíl seachtrach.

Is féidir luachanna dath a chur in iúl mar eochairfhocail dath, uimhreacha dath RGB, nó uimhreacha dath heicteasa.

  1. Cuir an tréith stíl leis an gclib mír:
    1. p {}
  2. Cuir an mhaoin dathanna sa stíl. Cuir colon tar éis an mhaoin sin:
    1. p {dath:}
  3. Ansin cuir do luach dath tar éis an mhaoin. Déan cinnte deireadh a chur leis an luach sin le leathcholún:
    1. p {dath: dubh;}

Beidh na míreanna i do leathanach dubh.

Úsáideann an sampla seo eochairfhocal dath - "dubh". Sin bealach amháin chun dath a chur leis an CSS, ach tá sé an-teoranta. Tá sé simplí ag baint úsáide as eochairfhocail do "dubh" agus "bán" ós rud é go bhfuil an dá dhath an-sonrach, ach cad a tharlaíonn má úsáideann tú eochairfhocail cosúil le "dearg", "gorm" nó "glas"? Cén scáth dearg, gorm nó glas a gheobhaidh tú? Ní féidir leat a shonrú go díreach ar an scáth dathanna atá uait le heochairfhocail. Sin é an fáth go n-úsáidtear luachanna heicsáideacha go minic in ionad eochairfhocail dath.

p {dath: # 000000; }

Socraigh an stíl CSS seo dath do chuid míreanna go dubh, toisc go n-aistrítear cód heacs # 000000 go dubh. D'fhéadfá úsáid ghearrliosta a úsáid leis an luach hex sin agus é a scríobh mar díreach # 000 agus gheobhaidh tú an rud céanna.

Mar a luadh againn cheana féin, oibríonn luachanna heics go maith nuair is gá duit dath nach bhfuil ach dubh nó bán. Seo sampla:

p {dath: # 2f5687; }

Leagfadh an luach hex seo na míreanna go dath gorm, ach murab ionann agus an eochairfhocal "gorm", tugann an cód heicse seo duit cumas scáth an-shonrach gorm a shocrú - is dócha an ceann a roghnaíonn an dearthóir nuair a chruthaigh siad an comhéadan an láithreán gréasáin seo. Sa chás seo, bheadh ​​an dath mar raon lárnach, gorm-scláta.

Ar deireadh, is féidir leat luachanna dath RGBA a úsáid le haghaidh dathanna clóite chomh maith. Tugtar tacaíocht do RGCA anois i ngach brabhsálaí nua-aimseartha, ionas gur féidir leat na luachanna seo a úsáid le beagán imní nach dtabharfar tacaíocht duit i mbrabhsálaí gréasáin, ach is féidir leat teacht ar ais chomh furasta.

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

Tá an luach RGBA seo mar an gcéanna leis an dath gorm scláta a shonraítear roimhe seo. Socraíonn na chéad 3 luachanna na luachanna dearga, glas, agus gorm agus is é an líon deiridh an socrú alfa. Tá sé leagtha síos ar "1", rud a chiallaíonn "100%", mar sin ní bheadh ​​aon trédhearcacht ag an dath seo. Má shocraíonn tú go dtí uimhir dheachúlacha, cosúil le .85, aistriú go 85% ar dhóigh agus bheadh ​​an dath beagán trédhearcach.

Má theastaíonn uait do luachanna dath a chur i bhfeidhm, déanfá seo:

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

Leagann an comhréir seo an cód heicteár ar dtús. Ansin athscríobhtar an luach sin leis an uimhir RGBA. Ciallaíonn sé seo go bhfaighidh aon bhrabhsálaí níos sine nach dtacaíonn leis an RGBA an chéad luach agus neamhaird a dhéanamh air an dara ceann. Úsáidfeadh brabhsálaithe nua-aimseartha an dara ceann de réir eascaige CSS.