Cum să schimbați culoarea textului site-ului dvs. web cu CSS

Controlul asupra site-ului dvs. web este un element important al designului web. Într-o lume ideală, ar trebui să puteți schimba fiecare aspect al designului site-ului dvs. fără a fi nevoie să faceți compromisuri cu privire la produsul finit.

Desigur, totuși, site-urile web pot fi adesea încăpățânate. Nu este întotdeauna posibil să obțineți rezultatele dorite fără a vă adânci în lumea CSS. Să aruncăm o privire asupra modului în care puteți schimba culoarea textului cu CSS pe site-ul dvs. pentru a vă oferi o idee despre cum puteți obține mai mult cu puterea CSS.

Schimbarea culorii textului site-ului web cu CSS

CSS a fost atent conceput pentru a se asigura că oferă proiectanților putere asupra proiectelor lor de site-uri web. Este incredibil de ușor să schimbi culoarea textului cu CSS pe site-ul tău; ai nevoie doar de o regulă pentru ao face.

Culoarea albastra;

Desigur, însă, regulile CSS nu funcționează foarte bine singure. Trebuie să le asociați cu clase de elemente, ID-uri și identificatori pentru a vă asigura că browserele web știu la ce se aplică stilul. Puteți vedea exemple de utilizare a acestei reguli cu un titlu H1, paragraful P și un buton de mai jos.

h1 {culoare: albastru; }
p {culoare: roșu; }
buton {culoare: roșu; }

Acest lucru ar trebui să vă ofere o înțelegere de bază a ceea ce trebuie făcut pentru a schimba culoarea textului site-ului dvs. web cu CSS. De obicei, este nevoie de mai mult decât atât, mai ales dacă doriți să dați diferite culori textului diferit de pe site-ul dvs. web.

Legate de: Modelul CSS Box explicat cu exemple

Găsirea clasei CSS potrivite

Înainte de a putea modifica textul specific de pe site-ul dvs. web, trebuie să știți cum să îl identificați în CSS. Majoritatea browserelor web au un set de instrumente concepute pentru a ajuta dezvoltatorii și este probabil ca cel pe care îl utilizați să aibă ceva numit an Inspector. Aceasta poate fi utilizată pentru a arunca o privire asupra codului HTML și a altui cod care creează un site web.

Deschiderea inspectorului

Deschiderea inspectorului este diferită în fiecare dintre browserele de pe piață. Am acoperit câteva dintre cele mai populare browsere de mai jos pentru a vă oferi un început:

• Google Chrome: CTRL + Shift + C sau Puncte de meniu > Mai multe unelte > Instrumente de dezvoltare
• Microsoft Edge: CTRL + Shift + C sau Puncte de meniu > Mai multe unelte > Instrumente de dezvoltare
• Mozilla Firefox: CTRL + Shift + C sau Puncte de meniu > Mai multe unelte > Instrumente pentru dezvoltatori web
• Apple Safari: Preferințe > Avansat > Afișați meniul Dezvoltare în bara de meniu și apoi Dezvolta > Afișați inspectorul web

Găsirea stilului de text CSS potrivit

Poate fi confuz atunci când deschideți inspectorul pentru prima dată în browser. Vor exista o mulțime de lucruri pe care este posibil să nu le înțelegeți, dar nu trebuie să vă faceți griji pentru acest moment. Trebuie doar să găsiți numele stilului textului pe care încercați să îl modificați.

De exemplu, vom găsi și vom schimba stilul de text CSS utilizat pentru antetul principal din secțiunea MakeUseOf Programming. Puteți începe acest proces inspectând elementul care trebuie schimbat.

• Google Chrome: Click dreapta > Inspecta
• Microsoft Edge: Click dreapta > Inspecta
• Mozilla Firefox: Click dreapta > Inspecta sau Î
• Apple Safari: Click dreapta > Inspectează elementul

Dacă faceți acest lucru, consola site-ului / fereastra inspectorului se va concentra pe elementul pe care încercați să îl modificați. În Chrome, Safari, Edge și Firefox, ar trebui să vedeți o secțiune etichetată Stiluri care conține tot codul CSS pentru elementul pe care îl inspectați.

De asemenea, ar trebui să vedeți elementul HTML evidențiat într-un panou de lângă acesta. Aceasta poate fi utilizată pentru a afla clasa sau ID-ul elementului pe care îl schimbați. În cazul nostru, ne uităm la titlul principal H1 de pe pagina noastră și acesta aparține unei clase numite .listing-title.

În acest moment, puteți testa stilul de text CSS pe care îl veți adăuga pe site-ul dvs. web. Partea superioară a secțiunii stil CSS din consola site-ului web poate fi utilizată pentru a aplica reguli elementului specific pe care l-ați vizat. Desigur, însă, acest lucru nu este permanent.

Legate de: Cum să construiți o bară de navigare receptivă folosind HTML și CSS

Adăugarea noului dvs. CSS

Este timpul să adăugați noul dvs. CSS pe site-ul dvs. web. Modul în care faceți acest lucru va depinde de tipul de platformă de site web pe care o utilizați, cu opțiuni precum Shopify care necesită extensii pentru a vă permite să adăugați CSS fără a vă schimba fișierele.

Cu toate acestea, adăugați codul CSS, trebuie să vă asigurați că este corect. Utilizarea regulilor CSS în stil text nu este prea grea, dar poate fi frustrant atunci când nu vă dați seama cum să vă schimbați culoarea textului. Pentru exemplul nostru, acesta este codul pe care ar trebui să îl adăugăm pe site-ul nostru web.

.listing-title {
Culoarea albastra;
}

Ce se întâmplă dacă culoarea textului dvs. nu se schimbă?

După ce v-ați editat fișierul CSS, ar trebui să puteți vedea modificările pe care le-ați făcut imediat ce vă actualizați pagina. Totuși, nu este întotdeauna la fel de simplu ca acesta. CSS poate fi mai complex decât se așteaptă oamenii și poate fi necesar să faceți mai multe în această etapă.

• Golirea cache-ului: Site-urile web folosesc adesea cache pentru a reduce timpul de încărcare. Cache-ul dvs. vă poate împiedica să vedeți modificări ale site-ului web și trebuie să îl goliți când efectuați modificări la CSS.
• Mai mare în foaia de stil: CSS încarcă stiluri secvențial și acest lucru înseamnă că primele reguli din foaia de stil vor fi cele care se afișează pe site-ul dvs. web. Stilurile de mișcare pot fi o modalitate bună de a le acorda prioritate față de alte stiluri.
• Folosind etichete importante: Această următoare opțiune nu este considerată cea mai bună practică și este rezervată cel mai bine atunci când nu aveți altă opțiune. Puteți adăuga o etichetă importantă stilurilor dvs. de text CSS pentru a le acorda prioritate față de toate celelalte stiluri, iar acest lucru poate fi văzut mai jos:

.listing-title {
culoare: albastru! important;
}

Alt stil de text CSS Fun

CSS este un instrument incredibil de puternic, care vă oferă acces la o serie de opțiuni diferite atunci când lucrați cu text și alte elemente de pe site-ul dvs. web. Acest lucru nu se oprește doar cu culoarea textului CSS și puteți face încărcături cu textul dvs. atunci când alegeți să învățați puțin din CSS. Mai jos puteți găsi câteva reguli de bază pentru stilul textului CSS:

• Marimea fontului: Aceasta modifică dimensiunea textului de pe site-ul dvs. web, de exemplu, dimensiunea fontului: 12 px;
• Grosimea fontului: Greutatea se referă la grosimea unui font, boldul având o greutate mare, iar textul subțire este redus, de exemplu, greutatea fontului: 400;
• Aliniere text: Aceasta modifică alinierea textului cu care lucrați, de exemplu, text-align: right;
• Text-umbră: Aceasta vă permite să adăugați o umbră textului dvs. cu o serie de atribute, de exemplu, text-umbră: 2px 2px 3px negru;
• Transformare text: Aceasta modifică cazul textului cu care lucrați, de exemplu, text-transform: majuscule;
• Decorare text: Aceasta vă permite să adăugați sublinieri, liniuțe și alte decorațiuni la text, de exemplu, text-decor: subliniere;

Aceasta este doar zgârierea suprafeței a ceea ce puteți face cu stilurile de text din CSS. Există o mulțime de ghiduri pe web care vă pot ajuta cu acest proces și este întotdeauna o idee bună să faceți câteva cercetări pe măsură ce începeți.

Legate de: Cum să schimbați textul site-ului dvs. web cu proprietatea familiei de fonturi CSS

Aflați mai multe decât culoarea textului CSS

Practica, experimentarea și încercarea și eroarea sunt cele mai bune modalități de a învăța un instrument precum CSS. Foile de stil pot părea descurajante atunci când începeți să lucrați cu ele, dar sunt incredibil de ușor de lucrat odată ce ați petrecut ceva timp cu ele.

10 exemple de cod CSS simple pe care le puteți învăța în 10 minute

Aveți nevoie de ajutor cu CSS? Încercați aceste exemple de cod CSS de bază pentru a începe, apoi aplicați-le propriilor pagini web.

Citiți în continuare

Despre autor