CSS: llä on helppo asettaa tekstin väri dokumenttiin. 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 "fontin", 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, joita kattaisin tämän artikkelin lopussa. Tutustu nyt tutustuaksesi tämän tekstin värin muuttamiseen! Se on erittäin helppoa ja kestää noin 2 minuuttia.
Vaiheittainen ohje
- Avaa verkkosivusi, jonka haluat päivittää suosikkitekstin HTML-editoriin. Tämä voi olla ohjelma, kuten Adobe Dreamweaver tai yksinkertaisesti tekstieditori kuten Notepad, Notepad ++, TextEdit jne.
- Etsi asiakirjassa haluamasi sanat eri värillä sivulla. Tämän opetusohjelman vuoksi käytä joitain sanoja, jotka ovat suuremman tekstin sisällä. Tämä teksti sisällytetään jäsenpariin. Etsi jokin kahdesta sanasta, jonka värin haluat muokata.
- Aseta kohdistin ennen sanan tai sanaryhmän ensimmäistä kirjainta, jonka haluat vaihtaa. Muista, että käytät WYSIWYG- editoria, kuten Dreamweaveria, työskentelet nyt "code view": ssa.
- 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ä, suosittelen kiinnittämällä tunnisteen tällaisiin muotoiluvaatimuksiin.
Vinkkejä ja asioita, joihin kannattaa varoa
Vaikka tämä lähestymistapa sopii erinomaisesti pieniin muotoiluvaatimuksiin, kuten jos haluat vaihtaa vain yhden pienen tekstin dokumenttiin, 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ällä web-typografialla on harvoin monia värivaihtoehtoja, jne. Koko sivulle!