Tärkein Web-suunnittelu ja kehittäjät Kuinka muuttaa sanan väriä Span-tunnisteella ja CSS: llä
Web-suunnittelu ja kehittäjät

Kuinka muuttaa sanan väriä Span-tunnisteella ja CSS: llä

Kuinka muuttaa sanan väriä Span-tunnisteella ja CSS: llä
Anonim
  • Perusasiat
  • HTML
  • kirjoittanutJennifer Kyrnin

    Julkaistu kirjailija, jolla on laaja verkkosivustojen luomisen ja hallinnan taito.

    CSS: n avulla asiakirjan tekstin väri on helppo asettaa. Jos haluat, että sivusi kappaleet renderoidaan tietyllä värillä, määritä vain, että ulkoisessa tyylitaulukossa ja selaimessa näytetään teksti valitulla värillä. Mitä sitten tapahtuu, kun haluat muuttaa vain yhden sanan (tai ehkä vain muutaman sanan) värin tekstin kappaleessa? Tätä varten sinun on käytettävä rivielementtiä, kuten tunnistetta.

    Viimeinkin yhden sanan tai pienen sanaryhmän värin vaihtaminen lauseessa on helppoa CSS: n avulla, ja tunnisteet ovat kelvollisia HTML-muotoja, joten älä huolehdi siitä, että kyseessä on jonkinlainen hakkerointi. Tällä lähestymistavalla vältetään myös vanhentuneiden tunnisteiden ja määritteiden, kuten "fontti", käyttö, joka on menneen HTML-aikakauden tuote.

    Tämä artikkeli on tarkoitettu aloittaville web-kehittäjille, jotka ovat todennäköisesti uusia HTML: n ja CSS: n kanssa. Se auttaa sinua oppimaan käyttämään HTML-tunnistetta ja CSS: ää tietyn sivun tekstin värin muuttamiseen. Tälle menetelmälle on kuitenkin joitain haittoja, joita käsittelemme tämän artikkelin lopussa. Lue toistaiseksi oppia vaiheet tämän tekstin värin muuttamiseksi. Se on erittäin helppoa ja kestää noin kaksi minuuttia.

    Vaihe vaiheelta

    1. Avaa päivitettävä verkkosivu suosikki-HTML-HTML-editorissa. Tämä voi olla Adobe Dreamweaver -tyyppinen ohjelma tai yksinkertainen tekstieditori, kuten Notepad, Notepad ++, TextEdit jne.
    2. Etsi asiakirjasta sanat, jotka haluat näyttää eri värillä sivulla. Käytämme tämän opetusohjelman vuoksi joitain sanoja, jotka ovat suuremmassa kappaleessa tekstiä. Tämä teksti sisältyy tunnistepariin. Etsi yksi kahdesta sanasta, jonka väriä haluat muokata.
    3. Sijoita kohdistin ennen ensimmäistä kirjainta sanassa tai sanaryhmässä, jonka väriä haluat muuttaa. Muista, että jos käytät WYSIWYG-editoria, kuten Dreamweaver, työskentelet "koodinäkymässä" juuri nyt.
    4. Kääri teksti, jonka väriä haluamme muuttaa, tunnisteella, mukaan lukien luokan attribuutti. Koko kappale voi näyttää tältä:

      Tämä on teksti, johon keskitytään lauseessa.

    5. Olemme juuri käyttäneet rivielementtiä, antaaksemme kyseiselle tekstille "koukun", jota voimme käyttää CSS: ssä. Seuraava askel on siirtyä ulkoiseen CSS-tiedostoon lisätäksesi uuden säännön.

    1. Lisäämme CSS-tiedostoomme:
    2. .focus-text {

    3. väri: # F00;

    4. }

    5. Tämä sääntö asettaa kyseisen rivielementin, the, näkyvän punaisena. Jos meillä olisi aikaisempi tyyli, joka asetti asiakirjan tekstin mustalle, tämä rivityylinen tyyli aiheuttaisi span-tekstin keskittymisen ja erottautumisen eri väreillä. Voisimme lisätä tähän sääntöyn myös muita tyylejä, esimerkiksi tekemällä tekstistä kursivoidun tai lihavoidun korostaaksesi sitä vielä enemmän?
    6. Tallenna sivu.
    7. Testaa suosikkiselaimesi sivu nähdäksesi voimassa olevat muutokset.
    8. Huomaa, että jotkut verkko-ammattilaiset haluavat käyttää lisäksi muita elementtejä, kuten tai tag-paria. Nämä tunnisteet olivat aikaisemmin lihavoituja ja kursivoituja, mutta olivat vanhentuneita ja korvattu painikkeilla ja. Tunnisteet toimivat edelleen nykyaikaisissa selaimissa, joten monet verkkokehittäjät käyttävät niitä sisäisissä tyylikoukoina. Tämä ei ole pahin lähestymistapa, mutta jos haluat välttää vanhentuneita elementtejä, suosittelemme, että kiinnität tunnisteen tällaisiin tyylin tarpeisiin.

    Vinkkejä ja asioita, joita kannattaa varoa

    Vaikka tämä lähestymistapa toimii hyvin pienissä muotoilutarpeissa, kuten jos sinun on muutettava vain yksi pieni teksti kappale asiakirjasta, se voi nopeasti poistua hallinnasta. Jos huomaat, että sivusi on täynnä inline-elementtejä, joilla kaikilla on ainutlaatuisia luokkia, joita käytät CSS-tiedostossasi, saatat tehdä sen väärin. Muista, että mitä enemmän näitä sivusi tunnisteita on, sitä vaikeampaa ylläpitää todennäköisesti sivua eteenpäin. Lisäksi hyvällä web-typografialla on harvoin niin monta värivaihtoehtoa jne. Koko sivulla.