Muuta sanan väriä SPAN-tagilla CSS: ssä

Voit määrittää fontin värit, koot ja muut parametrit ulkoisessa CSS-tyylitaulukossa. Jos kuitenkin haluat muuttaa vain yhden sanan tai lauseen väriä, helpoin ja yksinkertaisin tapa on käyttää tunnistetta sisäisesti. Sisäinen CSS on vain tapa, jolla se kuulostaa: Se lisätään sivun HTML: ään ulkoisen tyylitaulukon sijaan.

Vältä vanhentuneen tunnisteen käyttöä.

Näin muutetaan sanan väriä tagin avulla:

  1. Käytä kohdistinta haluamallasi tekstillä tai HTML-editorilla koodinäkymätilassa ja siirrä kohdistin väritettävän sanan tai sanaryhmän ensimmäisen kirjaimen eteen.

  2. Anna kääriä teksti, jonka väriä haluamme muuttaa, tagilla, mukaan lukien luokan attribuutti. Koko kappale voi näyttää tältä: Tämä on teksti, johon keskitytään lauseessa.

  3. Anna kyseiselle tekstille "koukku", jota voimme käyttää CSS: ssä. Seuraava askel on siirtyä ulkoiseen CSS-tiedostoon uuden säännön lisäämiseksi.

    Lisätään CSS-tiedostoon:

    .focus-text {

     väri: # F00;

    }

    Tämä sääntö asettaa kyseisen rivin elementin näyttämään punaisella värillä. Jos meillä olisi aikaisempi tyyli, joka asetti asiakirjan tekstin mustaksi, tämä upotettu tyyli johtaisi span-tekstiin keskittymään ja erottumaan eri väreillä. Voisimme lisätä tähän sääntöön myös muita tyylejä, ehkä tehdä tekstistä kursivoitu tai rohkea korostamaan sitä vielä enemmän?

    instagram viewer

  4. Tallenna sivu.

    Testaa sivu suosikkiselaimellasi nähdäksesi muutokset.

    Huomaa, että jotkut verkkoammattilaiset käyttävät sen lisäksi muita elementtejä, kuten - tai tag-pareja. Nämä tunnisteet olivat aiemmin erityisesti lihavoituja ja kursivoituja, mutta ne olivat vanhentuneet ja korvattu merkillä ja. Tunnisteet toimivat edelleen nykyaikaisissa selaimissa, mutta niin monet web-kehittäjät käyttävät niitä inline-muotoilukoukkuina. Tämä ei ole pahin tapa, mutta jos haluat välttää vanhentuneita elementtejä, suosittelemme, että pidät kiinni tagista tämäntyyppisiin muotoilutarpeisiin.

Vinkkejä ja asioita, joita kannattaa varoa

Vaikka tämä lähestymistapa toimii hyvin pienissä muotoilutarpeissa, kuten jos haluat muuttaa vain yhden pienen tekstinpalan asiakirjassa, se voi nopeasti poistua hallinnasta. Jos huomaat, että sivusi on täynnä sisäisiä elementtejä, joilla kaikilla on ainutlaatuisia luokkia, joita käytät CSS-tiedostossasi, voit tee väärin eteenpäin. Lisäksi hyvällä verkkotyypillä on harvoin niin monta värivaihtoehtoa jne. koko sivulla.