Kako spremeniti barvo besede z oznako Span in CSS

Z CSS je preprosto nastaviti barvo besedila v dokumentu. Če želite, da so odstavki na vaši strani prikazani v določeni barvi, preprosto določite, da bo v vašem zunanjem slognem listu in brskalniku prikazano vaše besedilo v izbrani barvi. Kaj se zgodi potem, ko želite v odstavku besedila spremeniti barvo samo ene besede (ali morda le nekaj besed)? Za to boste morali uporabiti element, kot je oznaka.

Končno, spreminjanje barve ene besede ali majhne skupine besed v okviru stavka je enostavno z uporabo CSS-a in oznake so veljavni HTML, zato ne skrbite, da je to nekakšen kramp. S tem pristopom se izogibate tudi uporabi opuščenih oznak in atributov, kot je "pisava", ki je produkt pretekle HTML ere.

Ta članek je za začetek spletnih razvijalcev, ki so verjetno novi v HTML in CSS. Pomagala vam bo, da se naučite uporabljati oznako HTML in CSS, da spremenite barvo določenega besedila na vaših straneh. To je rečeno, obstaja nekaj pomanjkljivosti za to metodo, ki jo bom pokril na koncu tega članka. Za zdaj preberite, kako se naučite korakov za spreminjanje te barve besedila! Zelo je preprosto in traja približno 2 minuti.

Korak po korak navodil

1. Odprite spletno stran, ki jo želite posodobiti v svojem priljubljenem besedilnem urejevalniku HTML. To bi lahko bil program Adobe Dreamweaver ali preprost urejevalnik besedil, kot so Notepad, Notepad ++, TextEdit itd.
2. V dokumentu poiščite besede, ki jih želite prikazati v drugi barvi na strani. Zaradi tega tutoriala lahko uporabimo nekaj besed, ki so znotraj večjega odstavka besedila. To besedilo bo vsebovano v desnem paru. Poiščite enega od dveh besed, katerih barvo želite urediti.
3. Kursor postavite pred prvo črko v besedi ali skupini besed, ki jih želite spremeniti. Ne pozabite, če uporabljate urejevalnik WYSIWYG, na primer Dreamweaver, zdaj delate v "kodnem pogledu".
4. Spustite besedilo, katerega barvo želimo spremeniti z oznako, vključno z atributom razreda. Celoten odstavek lahko izgleda takole: to je besedilo, ki se osredotoča na stavek.
5. Pravkar smo uporabili element v vrstici, da navedemo to besedilo v "kavelj", ki ga lahko uporabimo v CSS. Naslednji korak je, da skočimo v zunanjo datoteko CSS, da dodamo novo pravilo.

1. V naši datoteki CSS dodajmo:
   1. .focus-text {
   2. barva: # F00;
   3. }
   4. -
2. To pravilo bi nastavilo ta element, ki ga želite prikazati v rdeči barvi. Če smo imeli prejšnji slog, ki je besedilo našega dokumenta nastavil v črno, bi ta stalni slog povzročil osredotočenje razpona besedila in izstopa z drugačno barvo. Lahko dodamo tudi druge sloge v to pravilo, morda kurzivno besedilo ali krepko poudarjamo še več?
3. Shranite svojo stran.
4. Preizkusite stran v svojem priljubljenem spletnem brskalniku, da boste videli spremembe.
5. Upoštevajte, da se nekateri spletni strokovnjaki odločijo za uporabo drugih elementov, kot so pari ali oznake. Te oznake so bile posebej označene kot "krepko" in "poševno", vendar so bile zastarele in zamenjane z in. Oznake še vedno delujejo v sodobnih brskalnikih, vendar jih mnogi spletni razvijalci uporabljajo kot ročne klešče. To ni najslabši pristop, vendar če se želite izogniti kakršnim koli opuščenim elementom, priporočam, da se z oznako za te vrste potreb po stylingu.

Nasveti in stvari za paziti

Čeprav ta pristop deluje dobro za potrebe majhnih stilov, kot če bi morali v dokumentu spremeniti le en majhen del besedila, se lahko hitro izogne ​​kontroli. Če ugotovite, da je vaša stran zložena z elementi v vrstici, ki imajo vse edinstvene razrede, ki jih uporabljate v svoji datoteki CSS, lahko to storite narobe, upoštevajte, več teh oznak, ki so na vaši strani, težje je je verjetno, da bo ta stran nadaljevala. Poleg tega dober spletni tipografija redko vsebuje toliko različnih barv itd.