CSS: llä on helppo asettaa tekstin väri asiakirjaan. Jos haluat, että sivusi kohdat tehdään tietyllä värillä, voit yksinkertaisesti määrittää, että ulkoisessa tyylissasi ja selain näyttää tekstin valitussa värissä. Mitä sitten tapahtuu, kun haluat vaihtaa vain yhden sanan (tai ehkä vain muutaman sanan) väriä tekstin kohdan sisällä? Tästä syystä sinun on käytettävä inline-elementtiä kuten tunniste.
Lopulta yksittäisen sanan tai pienen sanaryhmän värin muuttaminen lauseen sisällä on helppoa käyttämällä CSS: ää, ja tunnisteet ovat kelvollisia HTML-muotoja, joten älä välitä siitä, että tämä olisi jonkinlainen hakata. Tämän lähestymistavan avulla vältät myös vanhentuneiden tunnisteiden ja ominaisuuksien käyttämisen, kuten "kirjasin", joka on vanhan HTML-aikakauden tuote.
Tämä artikkeli on tarkoitettu web-kehittäjille, jotka ovat todennäköisesti uusia HTML- ja CSS-versioissa. Se auttaa sinua oppimaan HTML-tunnisteen ja CSS: n avulla muuttamaan sivujesi tekstin väriä. Sanotaan, että tällä menetelmällä on joitain haittapuolia, jotka katetaan tämän artikkelin lopussa. Tutustu nyt tutustuaksesi tämän tekstin värin muuttamiseen. Se on erittäin helppoa ja kestää noin kaksi minuuttia.
Vaiheittainen ohje
- Avaa verkkosivusi, jonka haluat päivittää suosikkitekstin HTML-editoriin. Tämä voi olla esimerkiksi Adobe Dreamweaver tai yksinkertainen tekstieditori kuten Notepad, Notepad ++, TextEdit jne.
- Etsi asiakirjassa haluamasi sanat eri värillä sivulla. Tämän opetusohjelman vuoksi käytämme joitain sanoja, jotka ovat suuremman tekstikohdan sisällä. Tämä teksti sisältyy merkkipariin. Etsi jokin kahdesta sanasta, jonka värin haluat muokata.
- Aseta kohdistin ennen sanan tai sanaryhmän ensimmäistä kirjainta, jonka haluat vaihtaa. Muista, että jos käytät WYSIWYG-editoria, kuten Dreamweaveria, työskentelet nyt "koodinäkymässä".
- Kääri teksti, jonka väri haluamme muuttaa tagilla, mukaan lukien luokan attribuutti. Koko kappale voi näyttää tältä:
Tämä on teksti, joka keskittyy lauseeseen.
- Olemme juuri käyttäneet inline-elementtiä, joka antaa kyseiselle tekstille koukun, jota voimme käyttää CSS: ssä. Seuraava askel on siirtyä ulkoiseen CSS-tiedostoon lisäämällä uusi sääntö.
- Lisää CSS-tiedostoamme seuraavasti:
-
.focus-text {
-
väri: # F00;
-
}
- Tämä sääntö määrää, että inline-elementti näytetään punaisena punaisena. Jos meillä oli edellinen tyyli, joka asetti asiakirjan tekstin mustaksi, tämä inline-tyyli aiheuttaisi span-tekstin keskittymään ja erottumaan eri värillä. Voisimme myös lisätä muita tyylejä tähän sääntöön, ehkä tekstin kursiivilla tai rohkealla tavalla korostaa sitä vieläkin enemmän?
- Tallenna sivu.
- Testaa sivu suosikkiselaimellasi nähdäksesi muutokset voimassa.
- Huomaa, että lisäksi jotkut web-ammattilaiset käyttävät muita elementtejä, kuten tai tagipareja. Nämä tunnisteet olivat ennen kaikkea rohkeita ja kursiivisia, mutta ne olivat vanhentuneita ja korvattuja. Tunnisteet toimivat edelleen nykyaikaisissa selaimissa, mutta niin monet web-kehittäjät käyttävät niitä inline-muotoisina koukkuina. Tämä ei ole pahinta lähestymistapaa, mutta jos haluat välttää vanhentuneita elementtejä, suosittelemme, että kiinnität tunnisteen tällaisiin muotoiluvaatimuksiin.
Vinkkejä ja asioita, joihin kannattaa varoa
Vaikka tämä lähestymistapa sopii erinomaisesti pieniin muotoiluihin, kuten jos sinun tarvitsee muuttaa vain yksi pieni teksti asiakirjaan, se voi nopeasti ohittaa. Jos huomaat, että sivusi on täynnä inline-elementtejä, joilla kaikilla on ainutlaatuisia luokkia, joita käytät CSS-tiedostossa, saatat olla tekemättä sitä väärin. Muista, että useampi näistä sivusi tunnisteista on sitä vaikeampaa. on todennäköisesti ylläpitää kyseistä sivua eteenpäin. Lisäksi hyvään web-typografiaan liittyy harvoin monia värivaihtoehtoja, jne. Koko sivulle.
