Kako spremeniti barve pisave spletnega mesta s CSS

CSS vam omogoča nadzor nad videzom besedila na spletnih straneh, ki jih gradite in upravljate. V tem priročniku vam pokažemo, kako spremenite barve pisave v CSS z uporabo barvnih ključnih besed, šestnajstiških barvnih kod ali barvnih številk RGB.

Kako uporabiti sloge CSS za spreminjanje barve pisave

Barvne vrednosti so lahko izražene kot barvne ključne besede, šestnajstiške barvne številke ali barvne številke RGB. Za to lekcijo boste morali imeti dokument HTML, da boste videli spremembe CSS in a ločena datoteka CSS, ki je priložena temu dokumentu. Še posebej si bomo ogledali element odstavka.

Uporabite barvne ključne besede za spreminjanje barv pisave

Če želite spremeniti barvo besedila za vsak odstavek v datoteki HTML, pojdite na zunanji slog in vnesite slog p {}. Postavite barva lastnost v slogu, čemur sledi dvopičje, na primer p {barva:}. Nato dodajte lastnost barve za lastnostjo in jo zaključite s podpičjem. V tem primeru se besedilo odstavka spremeni v črno barvo:

p {
barva: črna;
}

Za spreminjanje barv pisave uporabite šestnajstiške vrednosti

Uporaba barvnih ključnih besed za spreminjanje besedila v rdečo, zeleno, modro ali drugo osnovno barvo vam ne bo dala natančnosti, ki jo morda iščete pri ustvarjanju različnih odtenkov teh barv. Temu so namenjene šestnajstiške vrednosti.

Ta slog CSS lahko uporabite za barvanje odstavkov v črno, ker šestnajstiška koda # 000000 prevede v črno. Lahko uporabite celo stenografijo s to šestnajstiško vrednostjo in jo z enakimi rezultati zapišete kot # 000.

p {
barva: # 000000;
}

Šestnajstiške vrednosti dobro delujejo, če potrebujete barvo, ki ni preprosto črna ali bela. Na primer, ta šestnajstiška koda vam omogoča, da nastavite zelo specifičen odtenek modre - modro, kot skrilavec, srednjega razreda:

p {
barva: # 2f5687;
}

Hex deluje tako, da ločeno nastavi vrednosti RGB (rdeča, zelena, modra) barve z osnovnimi šestnajstimi vrednostmi. Zato vsebujejo črke A skozi F poleg števk 0 skozi 9.

Vsaka barva, rdeča, zelena in modra, dobi svojo dvomestno vrednost. 00 je najnižja možna vrednost, medtem ko FF je najvišja. Barve so v šestnajstiškem vrstnem redu navedene v vrstnem redu RGB, zato prvi dve števki predstavljata rdečo vrednost itd.

Za spreminjanje barv pisav uporabite vrednosti barv RGBA

Končno lahko za urejanje barv pisave uporabite vrednosti barv RGBA. RGCA je podprt v vseh sodobnih brskalnikih, zato lahko te vrednosti uporabljate z zaupanjem, da bo delovalo za večino gledalcev, lahko pa nastavite tudi enostaven nadomestni način.

Ta vrednost RGBA je enaka zgoraj navedeni barvi skrilavca:

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

Prve tri vrednosti določajo vrednosti rdeče, zelene in modre, končna številka pa je nastavitev alfa za preglednost. Nastavitev alfa je nastavljena na 1, kar pomeni 100 odstotkov, zato ta barva nima preglednosti. Če to vrednost nastavite na decimalno število, na primer .85, to pomeni 85-odstotno motnost in barva bi bila rahlo prozorna.

Če želite neprekinjeno zaščititi svoje barvne vrednosti, kopirajte to kodo CSS:

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

Ta sintaksa najprej nastavi šestnajstiško kodo, nato pa to vrednost prepiše s številko RGBA. To pomeni, da bo vsak starejši brskalnik, ki ne podpira RGBA, dobil prvo vrednost in prezrl drugo.

Pomembno je vedeti, da lastnost barve deluje na kateri koli element besedila HTML v CSS. Lahko na primer spremenite vse barve povezav. Ta primer bo naredil vaše povezave svetlo zelene:

a {
barva: # 16c616;
}

To deluje tudi z več elementi hkrati. Hkrati lahko nastavite vsako stopnjo naslova. Tako bodo na primer vsi elementi naslova nastavljeni na polnočno modro barvo:

h1, h2, h3, h4, h5, h6 {
barva: # 020833;
}

Pridobivanje šestnajstiških ali RGBA vrednosti za vaše barve ni vedno enostavno. Večina spletnih oblikovalcev bo za ustvarjanje natančnih kod uporabljala program za urejanje slik, kot sta Photoshop ali GIMP. V spletu lahko najdete tudi priročna orodja za izbiro barv, na primer ta od w3schools.

Drugi načini oblikovanja strani HTML

Barve pisav je mogoče spremeniti z zunanjim slogom, notranjim slogom ali vstavljenim slogom v dokumentu HTML. Vendar najboljše prakse narekujejo, da za sloge CSS uporabite zunanji tabel s slogi.

Notranji slogi, ki so slogi, napisani neposredno v "glavi" dokumenta, se običajno uporabljajo samo za majhna spletna mesta z eno stranjo. Izogibati se je treba vstavljenim slogom, saj so podobni starim oznakam "font", s katerimi smo se ukvarjali pred mnogimi leti. Ti vstavljeni slogi zelo otežujejo upravljanje sloga pisave, saj jih morate spremeniti na vsakem primerku vdelanega sloga.