Itakda ang font ng teksto, laki at kulay

Itakda ang font ng teksto, laki at kulay

Sa unang bahagi ng aklat, ipinakita na namin sa ilang mga halimbawa kung paano itakda ang kulay ng teksto sa CSS. Walang kumplikado dito: kakailanganin mo ang pag-aari ng kulay at ang halaga ng kulay na gusto mong kulayan ang teksto.

P (kulay: #211C18; )

Sa aming halimbawa, ang value #211C18 ay kumakatawan sa hexadecimal color code. Kung pamilyar ka na sa hexadecimal number system, maaari mong laktawan ang pagbabasa sa susunod na talata. Tatalakayin din namin ang higit pa tungkol sa iba pang mga paraan upang kumatawan sa mga kulay sa web - gamit ang mga modelo ng kulay (RGB, HSL) at mga keyword. Ang impormasyong ito ay magiging kapaki-pakinabang para sa mga nagsisimula at inirerekomendang basahin.

Hexadecimal na kulay (hex)

Hexadecimal number system ( hexadecimal, hex) ay batay sa bilang na 16. Upang magsulat ng isang hexadecimal na halaga, 16 na character ang ginagamit: Arabic numerals mula 0 hanggang 9 at ang mga unang titik ng Latin na alpabeto (A, B, C, D, E, F). Ang kulay sa hexadecimal na format ay isinusulat bilang tatlong dalawang-digit na numero mula 00 hanggang FF (dapat silang unahan ng simbolo ng hash #), na tumutugma sa tatlong bahagi: Pula, Berde, Asul (modelo ng kulay ng RGB). Sa madaling salita, ang isang entry ng kulay ay maaaring katawanin bilang #RRGGBB, kung saan tinutukoy ng unang pares ng mga character ang pulang antas, ang pangalawa - ang berdeng antas, at ang pangatlo - ang asul na antas. Ang resultang kulay ay kumbinasyon ng tatlong kulay na ito.

Shorthand notation para sa hex na kulay

Ang ilang mga halaga ng hexadecimal na kulay ay maaaring isulat sa mga pagdadaglat. Para magawa ito, gawing #RGB ang entry tulad ng #RRGGBB. Magagawa ito kapag ang hex na numero ay naglalaman ng tatlong pares ng magkaparehong mga character.

Ang pinaikling anyo ng notasyon ay medyo karaniwan, at para sa iyong sanggunian ay magbibigay kami ng ilang halimbawa ng mga pagdadaglat. Sa pamamagitan ng paraan, ang mga halaga ng kulay ng hex ay hindi case sensitive - maaari mong gamitin ang parehong uppercase at lowercase na mga titik, ang lahat ay depende sa iyong pagnanais at panlasa.

Mga halimbawa ng pinaikling notasyon para sa mga kulay ng hex:

Modelo ng kulay ng RGB

Ang pangalawang paraan upang tukuyin ang mga kulay sa CSS ay ang paggamit ng mga decimal na halaga ng RGB (Pula, Asul, Berde). Upang gawin ito, kailangan mong isulat ang keyword rgb pagkatapos ng pag-aari ng kulay, at pagkatapos ay sa panaklong at pinaghihiwalay ng mga kuwit - tatlong numero sa hanay mula 0 hanggang 255, bawat isa ay nangangahulugang ang intensity ng pula, berde at asul na mga kulay (r , g, b). Kung mas mataas ang numero, mas matindi ang kulay. Halimbawa, upang makakuha ng maliwanag na berdeng kulay, kailangan mong isulat:

P (kulay: rgb(0, 255, 0); )

Ngunit ang madilaw-dilaw na mustasa na kulay ay may sumusunod na kahulugan:

Kulay: rgb(94, 81, 3); /* sa ibaba ay ang parehong kulay, nakasulat sa hexadecimal: */ kulay: #5E5103;

Ang halaga para sa itim ay isinusulat bilang (0, 0, 0) at para sa puti bilang (255, 255, 255) . Posible ring ipahiwatig ang mga halagang ito bilang mga porsyento. Kaya, ang bilang 255 ay tumutugma sa 100%, samakatuwid, ang puting kulay ay maaaring itakda tulad ng sumusunod:

Kulay: rgb(100%, 100%, 100%);

Kung saan hahanapin ang mga kahulugan ng kulay

Marahil mayroon kang tanong: saan mo nakukuha ang lahat ng mga kahulugan ng kulay na ito? Mayroong maraming mga graphic editor at online na serbisyo kung saan maaari kang pumili ng mga kulay at bumuo ng mga scheme ng kulay. Ang isa sa mga pinakasikat na programa kung saan maaari kang pumili ng angkop na kulay at makuha ang RGB, mga halaga ng hex at higit pa nito ay ang Adobe Photoshop. Bilang kahalili, may mga espesyal na site kung saan madali kang makakapili ng hindi lamang isang kulay, kundi pati na rin sa isang buong scheme ng kulay. Ang isang magandang halimbawa ay ang serbisyo ng Adobe Color CC.

Modelo ng kulay ng RGBA

Maaari kang magtakda ng kulay sa format na RGBA sa parehong paraan tulad ng sa RGB. Ang pagkakaiba sa pagitan ng RGBA at RGB ay ang pagkakaroon ng alpha channel, na responsable para sa transparency ng kulay. Itinakda ang transparency gamit ang isang numero sa hanay mula 0 hanggang 1, kung saan ang 0 ay nangangahulugang ganap na transparency, at ang 1, sa kabaligtaran, ay nangangahulugang ganap na opaque. Ang mga intermediate na halaga tulad ng 0.5 ay nagbibigay-daan sa iyo na magtakda ng isang translucent na hitsura (pinahihintulutan ang shorthand notation, nang walang zero, ngunit may tuldok – .5). Halimbawa, para gawing kulay at bahagyang transparent ang text, kailangan mong isulat ang rgba keyword at ang value ng kulay pagkatapos ng color property:

P ( kulay: rgba(94, 81, 3, .9); )

Ang kawalan ng RGBA ay hindi ito sinusuportahan ng bersyon 8 ng Internet Explorer at mas maaga. Lalo na para sa IE8, maaari mong ilapat ang sumusunod na solusyon:

P ( kulay: rgb(94, 81, 3); kulay: rgba(94, 81, 3, .9); )

Ang unang pag-aari sa halimbawa ay inilaan para sa IE8 browser, na magpapakita ng teksto sa nais na kulay, ngunit walang transparency. At ilalapat ng mga browser na iyon na nakakaunawa sa RGBA ang pangalawang property sa elemento, nang may transparency.

Mga modelo ng kulay ng HSL (HSLA).

Maaari ka ring magtakda ng kulay sa CSS gamit ang mga coordinate ng HSL color model (Hue, Saturation, Lightness). Ito ay nakasulat tulad nito:

P (kulay: hsl(165, 100%, 50%); )

Ang unang numero sa mga bracket ay nangangahulugang kulay at ibinibigay sa mga degree (hanay ng numero mula 0 hanggang 359). Magiging madaling maunawaan kung bakit ginagamit ang mga degree kung naaalala mo kung ano ang hitsura ng color wheel:

Ang pangalawa at pangatlong numero sa mga bracket ay nangangahulugang saturation at lightness, ayon sa pagkakabanggit. Ang kanilang mga halaga ay nakatakda sa mga porsyento mula 0 hanggang 100. Kung mas mababa ang halaga ng saturation, mas nagiging naka-mute ang kulay. Ang isang saturation value na zero ay magreresulta sa isang kulay abong kulay, anuman ang halaga ng hue. Ang halaga ng liwanag ay nagbibigay-daan sa iyo upang tukuyin ang liwanag ng kulay. Ang mga mababang halaga ay nagreresulta sa madilim na lilim ng kulay, ang mataas na halaga ay nagreresulta sa mga light shade. Ang halaga ng 100% para sa liwanag ay nangangahulugang puti, 0% ay nangangahulugang itim.

Ang modelo ng kulay ng HSLA ay gumagana halos kapareho ng HSL, ngunit, katulad ng RGBA, mayroon itong alpha channel kung saan maaari mong itakda ang transparency ng kulay sa pamamagitan ng pagtukoy ng nais na halaga sa hanay mula 0 hanggang 1:

P (kulay: hsla(165, 100%, 50%, .6); )

Ang HSL at HSLA ay sinusuportahan ng lahat ng browser maliban sa bersyon 8 ng Internet Explorer at mas nauna.

Mga Karaniwang Kulay ng HTML

Ang isa pang paraan upang kumatawan sa mga kulay sa web ay sa pamamagitan ng mga keyword, na maaaring magamit upang tukuyin ang isang kulay para sa isang elemento. Halimbawa:

P(kulay:itim;)

Mayroong 16 na karaniwang kulay na maaaring isulat sa halaga ng katangian ng kulay:

Ang mga kulay na ito ay sinusuportahan ng lahat ng mga browser. Bilang karagdagan sa mga ito, mayroong humigit-kumulang 130 karagdagang mga keyword para sa iba't ibang kulay ng mga kulay. Ang kumpletong talahanayan ng mga kulay na ito ay makikita sa W3C reference book.

Ang paggamit ng naturang mga keyword ay katanggap-tanggap, ngunit may panganib na ang ilang salita ay hindi tatanggapin ng browser. Samakatuwid, inirerekomendang isulat ang hexadecimal color code sa halip na mga keyword.

Mga resulta

Sa CSS, ang kulay ng teksto ay tinukoy gamit ang pag-aari ng kulay, at ang halaga nito ay maaaring isulat sa maraming paraan - sa hexadecimal (hex) na format, sa RGB o HSL na format, o sa pamamagitan ng pagtukoy ng isang keyword. Upang maiwasan ang maling pagpapakita ng isang kulay na tinukoy gamit ang isang keyword, mas mainam na tukuyin ang hex na halaga nito.

Posible ring itakda ang transparency ng elemento gamit ang alpha channel (mga format ng RGBA at HSLA). Ito ay nagkakahalaga ng pagsasaalang-alang na ang IE8 browser at ang mga naunang bersyon nito ay hindi sumusuporta sa mga format ng RGBA, HSL at HSLA.

Sa HTML, maaaring tukuyin ang kulay sa tatlong paraan:

Pagtatakda ng kulay sa HTML ayon sa pangalan nito

Maaaring tukuyin ang ilang mga kulay sa pamamagitan ng kanilang pangalan, gamit ang pangalan ng kulay sa English bilang halaga. Ang pinakakaraniwang mga keyword: itim, puti, pula, berde, asul, atbp.:

Kulay ng teksto – pula

Ang pinakasikat na mga kulay ng pamantayan ng World Wide Web Consortium (W3C):

Halimbawa ng paggamit ng iba't ibang pangalan ng kulay:

Halimbawa: pagtukoy ng kulay sa pamamagitan ng pangalan nito

• Subukan ito sa iyong sarili »

Header sa pulang background

Header sa orange na background

Heading sa lime background

Puting teksto sa asul na background

Header sa pulang background

Header sa orange na background

Heading sa lime background

Puting teksto sa asul na background

Pagtukoy ng Kulay Gamit ang RGB

Kapag nagpapakita ng iba't ibang kulay sa isang monitor, ginagamit ang RGB palette bilang batayan. Ang anumang kulay ay nakuha sa pamamagitan ng paghahalo ng tatlong pangunahing mga: R - pula, G - berde, B - asul. Ang liwanag ng bawat kulay ay binibigyan ng isang byte at samakatuwid ay maaaring tumagal ng mga halaga mula 0 hanggang 255. Halimbawa, ang RGB(255,0,0) ay ipinapakita bilang pula dahil ang pula ay nakatakda sa pinakamataas na halaga nito (255) at ang ang iba ay nakatakda sa 0 Maaari mo ring itakda ang kulay bilang porsyento. Ang bawat parameter ay nagpapahiwatig ng antas ng liwanag ng kaukulang kulay. Halimbawa: ang mga halaga rgb(127, 255, 127) at rgb(50%, 100%, 50%) ay magtatakda ng parehong berdeng kulay ng medium saturation:

Halimbawa: Pagtukoy ng Kulay Gamit ang RGB

• Subukan ito sa iyong sarili »

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Itakda ang kulay sa pamamagitan ng hexadecimal na halaga

Mga halaga R G B maaari ding tukuyin gamit ang mga halaga ng kulay ng hexadecimal (HEX) sa anyo: #RRGGBB kung saan ang RR (pula), GG (berde) at BB (asul) ay mga hexadecimal na halaga mula 00 hanggang FF (kapareho ng decimal 0-255 ). Ang hexadecimal system, hindi katulad ng decimal system, ay nakabatay, gaya ng ipinahihiwatig ng pangalan nito, sa numerong 16. Ang hexadecimal system ay gumagamit ng mga sumusunod na palatandaan: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Dito ang mga numero mula 10 hanggang 15 ay pinapalitan ng mga letrang Latin. Ang mga numerong higit sa 15 sa hexadecimal system ay kinakatawan sa pamamagitan ng pagsasama-sama ng dalawang character sa isang halaga. Halimbawa, ang pinakamataas na bilang na 255 sa decimal ay tumutugma sa pinakamataas na halaga ng FF sa hexadecimal. Hindi tulad ng decimal system, ang isang hexadecimal na numero ay pinangungunahan ng isang hash na simbolo. # , halimbawa, ang #FF0000 ay ipinapakita bilang pula dahil ang pula ay nakatakda sa pinakamataas na halaga nito (FF) at ang iba pang mga kulay ay nakatakda sa kanilang pinakamababang halaga (00). Mga palatandaan pagkatapos ng simbolo ng hash # Maaari kang mag-type sa parehong uppercase at lowercase. Binibigyang-daan ka ng hexadecimal system na gamitin ang pinaikling anyo na #rgb, kung saan ang bawat karakter ay katumbas ng doble. Kaya, ang entry na #f7O ay dapat ituring bilang #ff7700.

Halimbawa: Kulay ng HEX

• Subukan ito sa iyong sarili »

pula: #FF0000

berde: #00FF00

asul: #0000FF

pula: #FF0000

berde: #00FF00

asul: #0000FF

pula+berde=dilaw: #FFFF00

pula+asul=purple: #FF00FF

berde+asul=cyan: #00FFFF

Listahan ng mga karaniwang kulay (pangalan, HEX at RGB):

Mga code ng kulay (background) ayon sa saturation at hue.