Nola aldatu CSS webgunearen letra-tipoen koloreak

Diseinu tipografiko ona webgune arrakastatsuaren zati garrantzitsua da. CSS- k web orrien testuen itxura kontrolatzeko aukera ematen dizu. Horrela erabiltzen dituzun letra-tipoen kolorea aldatu ahal izango duzu.

Letra-koloreak aldatu egin daitezke kanpoko estilo-orri baten, barneko estilo-orri baten bidez edo HTML dokumentuan barneratutako estetika erabiliz aldatu daiteke. Praktika onak CSS estiloetarako kanpoko estilo-orri bat erabili beharko zenituzke. Barneko estilo-orri bat, zure dokumentuaren "buruan" zuzenean idazten diren estiloak, oro har, orri bakarreko orri txikietarako bakarrik erabiltzen dira. Lerro estiloak saihestu egin behar dira duela urte asko daramatzaten aspaldiko "letra-tipo" etiketak direla eta. Lerro estilo horiek oso gogorra izaten dute estilo-estiloa kudeatzeko, lineaz kanpoko estiloaren edozein instantan aldatzeko.

Artikulu honetan, letra-kolorea kanpoko estilo-orriaren eta paragrafo-etiketa batean erabiliko den estiloa erabiliz nola aldatu aldatu egingo duzu. Estiloaren propietate berdina aplikatu dezakezu letra-tipoaren kolorea testu inguratzen duen etiketaren artean aldatzeko, etiketa barne.

Estalkiak kolore-kolorea aldatzeko estekak gehitzea

Adibide honetarako, HTML dokumentua izan behar duzu orriaren markatzeagatik eta dokumentu horretara atxikitako CSS fitxategi bereizi bat. HTML dokumentuak zenbait elementu egin ditzake bertan. Artikulu honen helburuari dagokionez, artikuluaren elementua da.

Hona hemen nola aldatzen den testuaren letra-kolorea kanpoko etiketak zure kanpoko estilo-orriaren bidez.

Kolore-balioak kolore-gako - hitzak, RGB kolore - zenbakiak edo kolore hamaseitar zenbaki gisa adieraz daitezke.

  1. Gehitu paragrafoaren etiketa estiloko atributua:
    1. p {}
  2. Jarri koloretako propietatea estiloan. Jarri ondasun horren ondoren bi puntu:
    1. p {color:}
  3. Ondoren, gehitu zure kolorea balioa jabetza ondoren. Ziurtatu balio erantsi bat erdi puntutik:
    1. p {kolorea: beltza;}

Zure orriko paragrafoak beltzak izango dira.

Adibide honek koloreko gako-hitzak erabiltzen ditu: "beltza". Hori da CSS kolorea gehitzeko modu bat, baina oso mugatua da. "Beltza" eta "zuria" hitzak erabiltzea erraza da, bi kolore horiek zehatzak direlako, baina zer gertatzen da "gorri", "urdina" edo "berdea" bezalako hitzak erabiltzen badituzu? Zehatzena zein gorri, urdina edo berdea geratzen zaizu? Ezin duzu zehaztu zein koloretako itzala nahi duzun gakoekin. Horregatik, balio hexadetakoren bat sarritan erabili ohi da koloreen gakoekin.

p {color: # 000000; }

CSS estilo honek zure paragrafoen kolorea beltzean ezarriko luke, # 000000 kode hexagora beltzez itzultzen delako. Ere egin dezakezu taupada hex balio horrekin eta idatzi # 000 bezala eta gauza bera lortuko duzu.

Dagoeneko aipatu dugun bezala, hex balioak ondo funtzionatzen dutenean kolore edo zuriz soilik ez duzula behar duzu. Hona hemen adibide bat:

p {kolorea: # 2f5687; }

Hex balio honek paragrafoak kolore urdin bat ezarriko luke, baina "urdina" hitza ez bezala, hex kode honek kode urdinaren itzal zehatza ezartzeko gaitasuna ematen du; agian, diseinatzaileak interfazea sortzen ari zela aukeratzen duenean webgune hau. Kasu honetan, kolorea erdialdean, arbelezko urdina izango litzateke.

Azkenean, RGBA kolore-balioak ere erabil ditzakezu letra-koloretarako. RGCA orain onartzen da arakatzaile moderno guztietan, beraz, balio horiek erabili ahal izango dituzu kezka gutxi, web nabigatzailean ez dela onartzen baina konponketa erraz bat ere ezar dezakezu.

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

RGBA balio hau arbel urdina zehaztutakoa baino lehenagokoa da. Lehenengo 3 balioek balio gorria, berdea eta urdina ezartzen dute eta azken zenbakia alpha ezarpena da. "1" ezartzen da, hau da, "% 100" esan nahi du, beraz kolore honek ez luke gardentasunik izango. Zenbaki hamartar bat ezartzen baduzu, .85 bezala, 85% opakutara itzuliko litzateke eta kolorea pixka bat gardena izango litzateke.

Zure kolore balioak baltseatu nahi badituzu, hau egin beharko zenuke:

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

Sintaxi hau lehenbiziko hex kodea ezartzen du. Ondoren, balio hori gainidazten du RGBA zenbakiarekin. Horrek esan nahi du RGBA onartzen ez duen arakatzailerik zaharrenak lehenengo balioa lortuko luke eta bigarrenari ez ikusi egingo zaio. Nabigatzaile modernoek CSSren ur-jauziaren bigarrena erabiliko luke.