Kako promijeniti boju teksta svoje web stranice pomoću CSS -a

Kontrola nad vašim web mjestom važan je element web dizajna. U idealnom svijetu trebali biste moći promijeniti svaki aspekt dizajna svoje web lokacije bez kompromisa oko gotovog proizvoda.

Naravno, web stranice često mogu biti tvrdoglave. Nije uvijek moguće postići željene rezultate bez uranjanja u svijet CSS -a. Pogledajmo kako možete promijeniti boju teksta pomoću CSS -a na svojoj web stranici kako bismo vam dali ideju o tome kako pomoću CSS -a možete postići više.

Promjena boje teksta web stranice pomoću CSS -a

CSS je pažljivo osmišljen kako bi dizajnerima dao moć nad projektima web stranica. Nevjerojatno je jednostavno promijeniti boju teksta pomoću CSS -a na svojoj web stranici; za to vam je potrebno samo jedno pravilo.

boja: plava;

Naravno, CSS pravila sama po sebi ne funkcioniraju dobro. Morate ih upariti s klasama elemenata, ID -ovima i identifikatorima kako biste bili sigurni da web preglednici znaju na što se stil odnosi. Možete vidjeti primjere kako se ovo pravilo koristi s naslovom H1, odlomkom P i gumbom ispod.

h1 {boja: plava; }
p {boja: crvena; }
gumb {boja: crvena; }

To bi vam trebalo dati osnovno razumijevanje o tome što je potrebno učiniti kako biste promijenili boju teksta svoje web stranice pomoću CSS -a. Obično je potrebno više od toga, pogotovo ako različitom tekstu na svojoj web stranici želite dati različite boje.

Povezano: Model CSS kutije objašnjen primjerima

Pronalaženje prave CSS klase

Prije nego što možete promijeniti određeni tekst na svojoj web stranici, morate znati kako ga identificirati unutar CSS -a. Većina web preglednika ima skup alata koji su osmišljeni kako bi pomogli programerima, a vjerojatno je da onaj koji koristite ima nešto što se zove Inspektor. Ovo se može koristiti za zavirivanje u HTML i drugi kôd koji gradi web stranicu.

Otvaranje inspektora

Otvaranje inspektora razlikuje se u svakom od preglednika na tržištu. U nastavku smo pokrili nekoliko najpopularnijih preglednika kako bismo vam dali početak:

• Google Chrome: CTRL + Shift + C ili Točke izbornika > Više alata > Razvojni alati
• Microsoft Edge: CTRL + Shift + C ili Točke izbornika > Više alata > Razvojni alati
• Mozilla Firefox: CTRL + Shift + C ili Točke izbornika > Više alata > Alati za web razvojne programere
• Apple Safari: Postavke > Napredna > Prikaz izbornika Razvoj na traci izbornika i onda Razviti > Prikaži web inspektor

Pronalaženje pravog stila CSS teksta

Može vas zbuniti kada prvi put otvorite Inspector u svom pregledniku. Bit će puno stvari koje možda ne razumijete, ali zasad se ne trebate brinuti zbog ovoga. Vi samo trebate pronaći naziv stila teksta koji pokušavate promijeniti.

Na primjer, mi ćemo pronaći i promijeniti stil CSS teksta koji se koristi za glavno zaglavlje u odjeljku Programiranje MakeUseOf. Ovaj proces možete započeti pregledom elementa koji je potrebno promijeniti.

• Google Chrome: Desni klik > Pregledati
• Microsoft Edge: Desni klik > Pregledati
• Mozilla Firefox: Desni klik > Pregledati ili P
• Apple Safari: Desni klik > Pregledajte element

Na taj način će se prozor vaše konzole/inspektora fokusirati na element koji pokušavate promijeniti. U Chromeu, Safariju, Edgeu i Firefoxu trebali biste vidjeti odjeljak s oznakom Stilovi koji sadrži sav CSS kôd za element koji pregledavate.

Također biste trebali vidjeti svoj HTML element istaknut u oknu pored ovoga. Ovo se može koristiti za utvrđivanje klase ili ID -a elementa koji mijenjate. U našem slučaju, gledamo glavni naslov H1 na našoj stranici, a to pripada klasi koja se naziva .listing-title.

U ovom trenutku možete testirati CSS stil teksta koji ćete dodati na svoju web stranicu. Gornji dio odjeljka o stilu CSS -a na konzoli web stranice može se koristiti za primjenu pravila na određeni element koji ste ciljali. Naravno, to nije trajno.

Povezano: Kako izgraditi prilagodljivu navigacijsku traku pomoću HTML -a i CSS -a

Dodavanje vašeg novog CSS -a

Vrijeme je da svom web mjestu dodate novi CSS. Način na koji ćete to učiniti ovisit će o vrsti platforme web stranice koju koristite, a opcije poput Shopify zahtijevaju proširenja koja vam omogućuju dodavanje CSS -a bez mijenjanja datoteka.

Kako god dodali svoj CSS kôd, morate se uvjeriti da je točan. Korištenje CSS pravila u stilu teksta nije previše teško, ali može biti frustrirajuće kada ne možete shvatiti kako promijeniti boju teksta. Za naš primjer, ovo je kôd koji bismo trebali dodati našoj web stranici.

.listing-title {
boja: plava;
}

Što ako se vaša boja teksta ne promijeni?

Nakon što uredite svoju CSS datoteku, trebali biste vidjeti promjenu koju ste izvršili čim osvježite stranicu. Ipak, nije uvijek sve tako jednostavno. CSS može biti složeniji nego što ljudi očekuju, pa ćete u ovoj fazi možda morati učiniti više.

• Pražnjenje predmemorije: Web stranice često koriste predmemoriranje kako bi skratile vrijeme učitavanja. Predmemorija vam može spriječiti da vidite promjene web stranice, pa je morate isprazniti kada unosite izmjene u CSS.
• Viša lista stilova: CSS učitava stilove uzastopno, a to znači da će prva pravila u vašoj tablici stilova biti ona koja se prikazuju na vašoj web stranici. Premještanje stilova može biti dobar način da im se da prednost nad ostalim stilovima.
• Korištenje važnih oznaka: Ova sljedeća opcija ne smatra se najboljom praksom i najbolje je rezervirana za vrijeme kada nemate drugog izbora. Svojim CSS stilovima teksta možete dodati važnu oznaku kako biste im dali prednost nad svim ostalim stilovima, a to se može vidjeti u nastavku:

.listing-title {
boja: plava! važno;
}

Ostali stil teksta CSS Zabava

CSS je nevjerojatno moćan alat koji vam daje pristup mnoštvu različitih opcija kada radite s tekstom i drugim elementima na svojoj web stranici. Ovo ne prestaje samo s bojom teksta CSS -a, a možete i učitavati tekst kad odlučite naučiti malo CSS -a. U nastavku možete pronaći još nekoliko osnovnih pravila stila CSS teksta:

• Veličina fonta: Time se mijenja veličina teksta na vašoj web stranici, npr. Veličina slova: 12px;
• Težina fonta: Težina se odnosi na debljinu fonta, s podebljanom masom velike težine i tankim tekstom niskim, npr. Težina fonta: 400;
• Poravnaj tekst: Ovo mijenja poravnanje teksta s kojim radite, npr. Poravnavanje teksta: desno;
• Sjena teksta: To vam omogućuje dodavanje sjene u tekst s nizom atributa, npr. Tekstualna sjena: 2px 2px 3px crna;
• Pretvorba teksta: Ovo mijenja velika i mala slova teksta s kojim radite, npr. Tekstualna transformacija: velika slova;
• Dekoracija teksta: To vam omogućuje dodavanje podcrtavanja, crtica i drugih ukrasa u tekst, npr. Ukrašavanje teksta: podcrtavanje;

Ovo je samo grebanje po površini onoga što možete učiniti sa stilovima teksta u CSS -u. Na webu postoji mnogo vodiča koji vam mogu pomoći u ovom procesu, a uvijek je dobra ideja da malo istražite na početku.

Povezano: Kako promijeniti tekst svoje web stranice pomoću svojstva porodice fontova CSS

Saznajte više od boje teksta CSS -a

Vježba, eksperimentiranje i pokušaj i pogreška najbolji su načini za učenje alata poput CSS -a. Stilovi se mogu činiti zastrašujućima kad prvi put počnete raditi s njima, ali s njima je nevjerojatno lako raditi nakon što provedete neko vrijeme s njima.

10 jednostavnih primjera CSS koda koje možete naučiti za 10 minuta

Trebate pomoć s CSS -om? Isprobajte ove osnovne primjere CSS koda za početak, a zatim ih primijenite na svoje web stranice.

Pročitajte Dalje

O autoru