Kako promijeniti boju reči pomoću oznake Span i CSS-a

Sa CSS-om , lako je postaviti boju teksta u dokument. Ako želite da stavovi na vašoj stranici budu prikazani u određenoj boji, jednostavno ćete navesti da će u spoljnom listu stilova i pregledač prikazati tekst u izabranoj boji. Šta se onda dešava kada želite da promenite boju samo jedne reči (ili možda samo nekoliko reči) u pasusu teksta? Za to ćete morati koristiti inline element poput oznake.

Na kraju, promena boje jedne reči ili male grupe riječi u okviru rečenice je jednostavno korištenje CSS-a, a oznake važe za HTML, pa ne brinite da je ovo neka vrsta hack-a. Ovim pristupom izbegavate i korišćenje zastarele oznake i atributa poput "fonta", koji je proizvod prošle HTML ere.

Ovaj članak je za početak web programera koji su verovatno novi u HTML i CSS. To će vam pomoći da naučite kako koristiti HTML tag i CSS da biste promijenili boju određenog teksta na vašim stranicama. Naime, postoje neki nedostaci za ovaj metod, koji ću pokriti na kraju ovog članka. Za sada, pročitajte dalje da biste saznali korake za promjenu ove boje teksta! To je vrlo lako i trebalo bi da traje oko 2 minuta.

Korak po korak instrukcija

  1. Otvorite web stranicu koju želite ažurirati u vašem omiljenom HTML editor-u teksta. Ovo bi mogao biti program kao što je Adobe Dreamweaver ili jednostavno uređivač teksta kao što su Notepad, Notepad ++, TextEdit itd.
  2. U dokumentu pronađite reči koje želite da se prikazuju u drugoj boji na stranici. Radi ovog tutoriala, koristimo neke reči koje se nalaze u većem pasusu teksta. Taj tekst će biti sadržan u tebi. Pronađite jedan od dva reči čija boja želite da uredite.
  3. Stavite kursor prije prvog slova u riječi ili grupi riječi koje želite promijeniti u boji. Zapamtite, ako koristite WYSIWYG uređivač poput Dreamweaver-a, sada radite u pravu za "code view".
  4. Ostavimo tekst čija boja želimo da promenimo sa oznakom, uključujući atribut klase. Cijeli paragraf može izgledati ovako: Ovo je tekst koji se fokusira na rečenicu.
  5. Upravo smo koristili inline element, da navedem taj tekst "kukica" koju možemo koristiti u CSS-u. Sledeći korak je da pređemo na našu spoljašnju CSS datoteku kako bismo dodali novo pravilo.
  1. U našoj CSS datoteci, dodajte:
    1. .focus-text {
    2. boja: # F00;
    3. }
    4. -
  2. Ovo pravilo bi postavilo taj inline element, da bi se prikazao u crvenoj boji. Ako smo imali prethodni stil koji je tekst našeg dokumenta postavio u crno, ovaj inline stil će dovesti do toga da tekst raspona bude fokusiran i izdvojen sa drugom bojom. Takođe smo mogli dodati i druge stilove, možda da napravimo tekst kurziv ili bold da ga još više istaknemo?
  3. Spremite svoju stranicu.
  4. Testirajte stranicu u omiljenom veb pregledaču da biste videli promjene u učinku.
  5. Imajte na umu da, pored toga, neki web profesionalci odaberu da koriste druge elemente poput parova ili oznaka. Ove oznake su bile posebno "bold" i "italics", ali su bile zastarjele i zamenjene sa i. Oznake još uvek rade u modernim pretraživačima, međutim, toliko ih web programera koriste kao inline kuke za stajling. Ovo nije najgori pristup, ali ako želite izbjeći sve zastarjelih elemenata, predlažem da držite oznaku za ovakve vrste stajlinga.

Saveti i stvari za čuvanje

Iako ovaj pristup dobro funkcioniše za male potrebe za stajanjem, kao da je potrebno da promenite samo jedan mali deo teksta u dokumentu, on može brzo da se izvuče iz kontrole. Ako utvrdite da je vaša stranica opterećena inlinelnim elementima, koji imaju jedinstvene klase koje koristite u svojoj CSS datoteki, možda to radite pogrešno, zapamtite, što više ovih tagova nalazi na vašoj stranici, to je teže verovatno će biti da zadržite tu stranicu. Pored toga, dobra web tipografija retko ima toliko varijanti boje, itd.