Kif tibdel il-Kuluri tal-Fajl tal-Fajls bl-CSS

Id-disinn tipografiku tajjeb huwa parti importanti ta 'websajt ta' suċċess. CSS jagħtik kontroll kbir fuq id-dehra tat-test fuq il-paġni tal-web il-paġni tal-web li tibni. Dan jinkludi l-abbiltà li tibdel il-kulur ta 'kwalunkwe tip ta' fonts li tuża.

Il-kuluri tat-tipa jistgħu jinbidlu bl-użu ta 'folja ta' stil estern , karta ta ' stil interna , jew tista' tinbidel bl-użu ta ' grafika inline fid-dokument HTML. L-aħjar prattiki jiddettaw li għandek tuża folja ta 'stil estern għall-istili CSS tiegħek. Folja ta 'stil interna, li huma stili miktuba direttament fir-"ras" tad-dokument tiegħek, ġeneralment jintużaw biss għal siti żgħar ta' paġna waħda. Stili inline għandhom jiġu evitati peress li huma simili għall-qodma "font" tikketti li aħna ttrattati ħafna snin ilu. Dawk l-istili inline jagħmluha diffiċli ħafna biex timmaniġġja l-istil tat-tipa peress li għandek bżonn tibdelhom f'kull każ tal-istil inline.

F'dan l-artikolu, inti ser titgħallem kif tibdel il-kulur tat-tipa billi tuża folja ta 'stil estern u stil li jintuża f'tagħna ta' paragrafu. Tista 'tapplika l-istess proprjetà ta' stil biex tibdel il-kulur tat-tipa fuq kwalunkwe lametta li tdawwar it-test, inkluża l-lampa .

Żieda Stili għall-Bidla tal-Kulur tal-Fajl

Għal dan l-eżempju, għandek bżonn li jkollok dokument HTML għall-markup tal-paġna tiegħek u fajl CSS separat li huwa mehmuż ma 'dak id-dokument. Id-dokument HTML x'aktarx jagħmel numru ta 'elementi fiha. Il-wieħed li aħna kkonċernati għall-għan ta 'dan l-artikolu huwa l-element tal-paragrafu.

Hawnhekk issib kif tinbidel il-kulur tat-tipa tat-test ġewwa t-tikketti tal-paragrafi bl-użu tal-karta tal-istil estern tiegħek

Il-valuri tal-kulur jistgħu jiġu espressi bħala kliem prinċipali tal-kulur, numri tal-kulur RGB, jew numri tal-kulur hexadeċimali.

  1. Żid l-attribut tal-istil għat-tikketta tal-paragrafu:
    1. p {}
  2. Poġġi l-proprjetà tal- kulur fl-istil. Poġġi kolon wara dik il-proprjetà:
    1. p {kulur:}
  3. Imbagħad żid il-valur tal-kulur tiegħek wara l-proprjetà. Kun żgur li tieqaf dak il-valur b'żewġ punti:
    1. p {kulur: iswed;}

Il-paragrafi fil-paġna tiegħek issa se jkunu suwed.

Dan l-eżempju juża keyword tal-kulur - "iswed". Dan huwa mod wieħed biex iżżid il-kulur fis-CSS, iżda huwa limitat ħafna. L-użu ta 'kliem kjavi għal "iswed" u "abjad" huwa sempliċi peress li dawk iż-żewġ kuluri huma speċifiċi ħafna, imma x'jiġri jekk tuża keywords bħal "aħmar", "blu" jew "aħdar"? Eżattament liema dell ta 'aħmar, blu, jew aħdar ikollok? Inti ma tistax tispeċifika eżattament liema kulur shade tixtieq bil-kliem kjavi. Dan huwa għaliex il-valuri hexadeċimali huma spiss użati minflok il-kliem kjavi tal-kulur.

p {kulur: # 000000; }

Dan l-istil CSS jistabbilixxi wkoll il-kulur tal-paragrafi tiegħek għal iswed, minħabba li l-kodiċi tal-hex ta '# 000000 jittraduċi għal iswed. Int tista 'saħansitra tuża d-djamant b'dak il-valur hex u tiktebha bħala biss # 000 u jkollok l-istess ħaġa.

Kif diġà semmejna, il-valuri tal-hex jaħdmu tajjeb meta għandek bżonn ta 'kulur li mhux sempliċement iswed jew abjad. Hawn hu eżempju:

p {kulur: # 2f5687; }

Dan il-valur hex jistabbilixxi l-paragrafi għal kulur blu, imma b'differenza mill-kelma "blu", dan il-kodiċi hex jagħtik il-kapaċità li tiffissa dell speċifiku ħafna ta 'blu - x'aktarx dak li d-disinjatur jagħżel meta kienu qed joħolqu l-interface għal dan is-sit elettroniku. F'dan il-każ, il-kulur ikun ta 'daqs medju, lavanja bħal blu.

Finalment, tista 'tuża wkoll valuri tal-kulur RGBA għall-kuluri tat-tipa. RGCA issa hija appoġġjata fil-browsers moderni kollha, sabiex tista 'tuża dawn il-valuri bi ftit inkwiet li mhux se tkun appoġġjata f'websajt, iżda tista' wkoll issib soluzzjoni faċli.

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

Dan il-valur RGBA huwa l-istess bħall-kulur blu tal-lavanja speċifikat qabel. L-ewwel 3 valuri jistabbilixxu l-valuri Red, Green, u Blue u n-numru finali huwa l-issettjar alfa. Huwa ssettjat għal "1", li jfisser "100%", għalhekk dan il-kulur ma jkollu l-ebda trasparenza. Jekk issettja dan f'numru deċimali, bħal .85, dan ikun ifisser 85% opaċità u l-kulur ikun kemxejn trasparenti.

Jekk trid valuri tal-kulur tal-balal tiegħek, inti tagħmel dan:

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

Din is-sintassi tiffissa l-kodiċi hex l-ewwel. Imbagħad jissostitwixxi dak il-valur bin-numru RGBA. Dan ifisser li kwalunkwe browser anzjan li ma jappoġġjax RGBA għandu l-ewwel valur u jinjora t-tieni. Il-browsers moderni jużaw it-tieni waħda għal kull kaskata tas-CSS.