Mae dylunio teipograffeg da yn rhan bwysig o wefan lwyddiannus. Mae CSS yn rhoi rheolaeth wych i chi dros edrychiad testun ar y tudalennau gwe y tudalennau gwe rydych chi'n eu hadeiladu. Mae hyn yn cynnwys y gallu i newid lliw unrhyw ffontiau rydych chi'n eu defnyddio.
Gellir newid lliwiau'r ffont gan ddefnyddio dalen arddull allanol , dalen arddull fewnol , neu gellir ei newid gan ddefnyddio arddull inline o fewn y ddogfen HTML. Mae'r arferion gorau yn nodi y dylech ddefnyddio dalen arddull allanol ar gyfer eich arddulliau CSS. Yn gyffredinol, dim ond ar gyfer safleoedd bach, un-dudalen y defnyddir dalen arddull fewnol, sy'n arddulliau a ysgrifennir yn uniongyrchol yn "ben" eich dogfen. Dylid osgoi arddulliau mewnline gan eu bod yn debyg i'r hen tagiau "ffont" yr ymdrinnom â hwy flynyddoedd lawer yn ôl. Mae'r arddulliau inline hynny yn ei gwneud hi'n anodd iawn rheoli arddull ffont gan y bydd angen i chi eu newid ym mhob achos o'r arddull inline.
Yn yr erthygl hon, byddwch yn dysgu sut i newid lliw y ffont gan ddefnyddio dalen arddull allanol ac arddull a ddefnyddir mewn tag paragraff. Gallwch chi ddefnyddio'r un arddull i newid lliw y ffont ar unrhyw tag sy'n amgylchynu'r testun, gan gynnwys y tag
.Ychwanegu Styles i Newid Lliw Ffont
Ar gyfer yr enghraifft hon, byddai angen i chi gael dogfen HTML ar gyfer eich marcio tudalen a ffeil CSS ar wahân sydd ynghlwm wrth y ddogfen honno. Byddai'r ddogfen HTML yn debygol o wneud nifer o elfennau ynddo. Yr un yr ydym yn ymwneud â hi at ddibenion yr erthygl hon yw'r elfen baragraff.
Dyma sut i newid lliw ffont y testun y tu mewn i tagiau paragraff gan ddefnyddio'ch dalen arddull allanol.
Gellir mynegi gwerthoedd lliw fel geiriau allweddol lliw, rhifau lliw RGB, neu niferoedd lliw hecsadegol.
- Ychwanegu'r priodwedd arddull ar gyfer y tag paragraff:
- p {}
- Rhowch yr eiddo lliw yn yr arddull. Rhowch colon ar ôl yr eiddo hwnnw:
- p {lliw:}
- Yna, ychwanegu eich gwerth lliw ar ôl yr eiddo. Gwnewch yn siwr i orffen y gwerth hwnnw gyda lled-colon:
- p {lliw: du;}
Bydd y paragraffau yn eich tudalen nawr yn ddu.
Mae'r enghraifft hon yn defnyddio allweddair lliw - "du". Dyna un ffordd i ychwanegu lliw yn CSS, ond mae'n gyfyngu iawn. Mae defnyddio geiriau allweddol ar gyfer "du" a "gwyn" yn syml gan fod y ddau liw yn benodol iawn, ond beth sy'n digwydd os ydych chi'n defnyddio geiriau allweddol fel "coch", "glas", neu "gwyrdd"? Yn union pa gysgod o goch, glas, neu wyrdd fyddwch chi'n ei gael? Ni allwch nodi'n union pa cysgod lliw rydych chi ei eisiau gyda keywords. Dyna pam y defnyddir gwerthoedd hecsadegol yn aml yn lle allweddeiriau lliw.
p {lliw: # 000000; }
Byddai'r arddull CSS hon hefyd yn gosod lliw eich paragraffau i ddu, oherwydd mae cod hecs # 000000 yn cyfieithu i ddu. Gallech hyd yn oed ddefnyddio llaw fer gyda'r gwerth hecs hwnnw a'i ysgrifennu fel dim ond # 000 a byddech chi'n cael yr un peth.
Fel y crybwyllwyd eisoes, mae gwerthoedd hecs yn gweithio'n dda pan fydd angen lliw arnoch, nid yn unig yn ddu neu'n wyn. Dyma enghraifft:
p {lliw: # 2f5687; }
Byddai'r gwerth hecs hwn yn gosod y paragraffau i liw las, ond yn wahanol i'r gair "glas", mae'r cod hecsig hwn yn rhoi'r gallu i chi osod cysgod glas penodol iawn - mae'n debyg yr un y mae'r dylunydd yn ei ddewis wrth greu y rhyngwyneb ar gyfer y wefan hon. Yn yr achos hwn, byddai'r lliw yn ganolbwynt, glas tebyg i lechi.
Yn olaf, gallwch ddefnyddio gwerthoedd lliw RGBA ar gyfer lliwiau ffont hefyd. Mae RGCA bellach yn cael ei gefnogi ym mhob porwr modern, fel y gallwch ddefnyddio'r gwerthoedd hyn heb lawer o ofid na fydd yn cael ei gefnogi mewn porwr gwe, ond gallwch hefyd osod gwrthdaro hawdd.
p {lliw: rgba (47,86,135,1); }
Mae'r gwerth RGBA hwn yr un fath â'r lliw glas llechi a nodwyd yn gynharach. Mae'r 3 gwerthoedd cyntaf yn gosod gwerthoedd Coch, Gwyrdd a Glas a'r rhif olaf yw'r lleoliad alffa. Fe'i gosodir i "1", sy'n golygu "100%", felly ni fyddai'r lliw hwn yn dryloyw. Os ydych chi'n gosod hynny i rif degol, fel .85, byddai'n cyfieithu i 85% o ddibyniaeth a byddai'r lliw ychydig yn dryloyw.
Os ydych chi eisiau bwledio eich gwerthoedd lliw, byddech chi'n gwneud hyn:
p {
lliw: # 2f5687;
lliw: rgba (47,86,135,1);
}
Mae'r cystrawen hon yn gosod y cod hecs gyntaf. Yna mae'n trosysgrifio'r gwerth hwnnw gyda'r rhif RGBA. Mae hyn yn golygu y byddai unrhyw borwr hŷn nad yw'n cefnogi RGBA yn cael y gwerth cyntaf ac anwybyddu'r ail. Byddai porwyr modern yn defnyddio'r ail fesul rhaeadr CSS.