Kako spremeniti barvo besedila spletnega mesta s CSS

Nadzor nad vašim spletnim mestom je pomemben element spletnega oblikovanja. V idealnem svetu bi morali spremeniti vse vidike oblikovanja svojega spletnega mesta, ne da bi morali pri tem narediti kompromise glede končnega izdelka.

Seveda pa so spletna mesta pogosto trmasta. Brez poglabljanja v svet CSS ni vedno mogoče doseči želenih rezultatov. Poglejmo, kako lahko spremenite barvo besedila s CSS -jem na svojem spletnem mestu, da dobite predstavo o tem, kako lahko z močjo CSS -ja dosežete več.

Spreminjanje barve besedila spletnega mesta s CSS

CSS je bil skrbno zasnovan, da bi oblikovalcem zagotovil moč nad projekti spletnih mest. Barvo besedila s CSS na vašem spletnem mestu je neverjetno enostavno; za to potrebujete samo eno pravilo.

barva: modra;

Seveda pa pravila CSS sama po sebi ne delujejo dobro. Seznaniti jih morate s razredi elementov, ID -ji in identifikatorji, da zagotovite, da spletni brskalniki vedo, za kaj slog velja. Ogledate si lahko primere tega pravila, ki se uporablja z naslovom H1, odstavkom P in spodnjim gumbom.

h1 {barva: modra; }
p {barva: rdeča; }
gumb {barva: rdeča; }

To bi vam moralo dati osnovno razumevanje, kaj je treba storiti, da spremenite barvo besedila vašega spletnega mesta s CSS. Običajno traja več kot to, še posebej, če želite različnim besedilom na svojem spletnem mestu dati različne barve.

Povezano: Model škatle CSS, razložen s primeri

Iskanje pravega razreda CSS

Preden lahko spremenite določeno besedilo na svojem spletnem mestu, morate vedeti, kako ga prepoznati v svojem CSS -ju. Večina spletnih brskalnikov ima nabor orodij, ki so namenjena razvijalcem in verjetno ima tisto, ki ga uporabljate, nekaj, kar se imenuje Inšpektor. To lahko uporabite za pokukanje v HTML in drugo kodo, ki gradi spletno mesto.

Odpiranje inšpektorja

Odpiranje inšpektorja je v vsakem brskalniku na trgu drugačno. Spodaj smo obravnavali peščico najbolj priljubljenih brskalnikov, da vam predstavimo:

• Google Chrome: CTRL + Shift + C ali Menijske pike > Več orodij > Orodja za razvijalce
• Microsoft Edge: CTRL + Shift + C ali Menijske pike > Več orodij > Orodja za razvijalce
• Mozilla Firefox: CTRL + Shift + C ali Menijske pike > Več orodij > Orodja za spletne razvijalce
• Apple Safari: Nastavitve > Napredno > Prikaz menija Razvoj v menijski vrstici in potem Razviti > Pokaži spletni inšpektor

Iskanje pravega sloga besedila CSS

Ko prvič odprete inšpektor v brskalniku, je lahko zmedeno. Morda bo veliko stvari, ki jih ne razumete, vendar vam zaenkrat zaradi tega ni treba skrbeti. Poiskati morate samo slog sloga besedila, ki ga poskušate spremeniti.

Kot primer bomo našli in spremenili slog besedila CSS, ki se uporablja za glavno glavo v razdelku Programiranje MakeUseOf. Ta postopek lahko začnete tako, da pregledate element, ki ga je treba spremeniti.

• Google Chrome: Desni klik > Preglejte
• Microsoft Edge: Desni klik > Preglejte
• Mozilla Firefox: Desni klik > Preglejte ali Vprašanje
• Apple Safari: Desni klik > Preglej element

S tem se bo okno vaše konzole/inšpektorja osredotočilo na element, ki ga poskušate spremeniti. V Chromu, Safariju, Edgeu in Firefoxu bi morali videti razdelek z oznako Slogi ki vsebuje vso kodo CSS za element, ki ga pregledujete.

V podoknu poleg tega bi morali videti tudi vaš element HTML. S tem lahko ugotovite razred ali ID elementa, ki ga spreminjate. V našem primeru gledamo glavni naslov H1 na naši strani in ta spada v razred, imenovan .listing-title.

Na tej točki lahko preizkusite slog besedila CSS, ki ga boste dodali na svoje spletno mesto. Zgornji del razdelka o slogu CSS v konzoli spletnega mesta lahko uporabite za uporabo pravil za določen element, na katerega ste ciljali. Seveda pa to ni trajno.

Povezano: Kako zgraditi odzivno navigacijsko vrstico z uporabo HTML in CSS

Dodajanje novega CSS -ja

Zdaj je čas, da na spletno mesto dodate nov CSS. Način, kako to storite, je odvisen od vrste platforme spletnega mesta, ki jo uporabljate, pri čemer možnosti, kot je Shopify, zahtevajo razširitve, ki vam omogočajo dodajanje CSS brez spreminjanja datotek.

Kljub temu, da dodate kodo CSS, se morate prepričati, da je pravilna. Uporaba pravil CSS v besedilnem slogu ni pretežka, vendar je lahko frustrirajuće, če ne morete ugotoviti, kako spremeniti barvo besedila. V našem primeru je to koda, ki bi jo morali dodati na našo spletno stran.

.listing-title {
barva: modra;
}

Kaj, če se barva besedila ne spremeni?

Ko uredite datoteko CSS, bi morali videti spremembo, ki ste jo naredili, takoj ko osvežite stran. Vendar ni vedno tako preprosto. CSS je lahko bolj zapleten, kot ljudje pričakujejo, zato boste na tej stopnji morda morali storiti več.

• Izpraznite predpomnilnik: Spletna mesta pogosto uporabljajo predpomnjenje, da skrajšajo čas nalaganja. Predpomnilnik vam morda preprečuje, da bi videli spremembe spletnega mesta, zato ga morate izprazniti, ko spremenite CSS.
• Višje v slogovnem listu: CSS zaporedno nalaga sloge, kar pomeni, da bodo prva pravila v slogovni listi tista, ki bodo prikazana na vašem spletnem mestu. Premikanje slogov je lahko dober način, da jim damo prednost pred drugimi slogi.
• Uporaba pomembnih oznak: Ta naslednja možnost ne velja za najboljšo prakso in je najbolje rezervirana, kadar nimate druge izbire. V svoje besedilne sloge CSS lahko dodate pomembno oznako, ki jim daje prednost pred vsemi drugimi slogi, kar lahko vidite spodaj:

.listing-title {
barva: modra! pomembno;
}

Drugi slog besedila CSS Zabava

CSS je neverjetno močno orodje, ki vam omogoča dostop do številnih različnih možnosti, ko delate z besedilom in drugimi elementi na svojem spletnem mestu. To se ne konča samo z barvo besedila CSS, z besedilom pa se lahko obremenjujete, ko se odločite, da se malo naučite CSS. Spodaj najdete nekaj osnovnih pravil o slogu besedila CSS:

• Velikost pisave: To spremeni velikost besedila na vašem spletnem mestu, na primer velikost pisave: 12px;
• Teža pisave: Teža se nanaša na debelino pisave, pri čemer je krepko velika teža, tanko besedilo pa nizko, npr. Teža pisave: 400;
• Poravnava besedila: To spremeni poravnavo besedila, s katerim delate, na primer poravnava besedila: desno;
• Senca besedila: To vam omogoča, da v svoje besedilo dodate senco z vrsto atributov, na primer senco besedila: 2px 2px 3px črno;
• Pretvorba besedila: To spremeni velike in male črke besedila, s katerim delate, na primer besedilo pretvori: velika črka;
• Dekoracija besedila: To vam omogoča, da besedilu dodate podčrtaje, črtice in druge okraske, na primer okras za besedilo: podčrtaj;

To je samo praskanje površine tega, kar lahko storite s slogi besedila v CSS. Po spletu je veliko vodnikov, ki vam lahko pomagajo pri tem postopku, zato je vedno dobro, da na začetku raziščete.

Povezano: Kako spremeniti besedilo svojega spletnega mesta z lastnostjo družine pisav CSS

Naučite se več kot barva besedila CSS

Vadba, eksperimentiranje in poskusi in napake so najboljši način za učenje orodja, kot je CSS. Slog slogov se lahko zdi zastrašujoč, ko začnete z njimi delati, vendar je z njimi neverjetno enostavno delati, ko z njimi preživite nekaj časa.

10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

Potrebujete pomoč pri CSS? Za začetek preizkusite te osnovne primere kode CSS, nato pa jih uporabite na svojih spletnih straneh.

Preberite Naprej

O avtorju