Tekstin korostaminen verkkosivulla auttaa tuomaan tärkeät tiedot välittömästi lukijan tietoon. Esimerkiksi, tämä teksti on korostettu keltaisella ja luultavasti kiinnitti silmäsi ensimmäisenä. Tekstin korostamiseen on useita tapoja. Jatka valitsemalla menetelmä alla olevasta luettelosta ja seuraamalla ohjeita.
Korosta käyttämällä HTML5 -tagia
Jos työskentelet HTML5-sivulla, -tunniste voi nopeasti korostaa tekstiä. Alla on esimerkki merkkitunnisteen käytöstä ja sen tuloksesta. Jos selaimesi tukee -tunnistetta, “korostetun tekstin” tulee olla keltaisella taustalla.
Esimerkkikoodi
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Esimerkkitulos
Tässä on esimerkki korostettu teksti -tunnisteen avulla.
Korosta tekstiä vain HTML-koodilla
Voit korostaa tekstiä HTML-koodilla ja tukea kaikkia selaimia asettamalla taustavärityylin alla olevan esimerkin mukaisesti HTML-tunnisteen avulla.
Esimerkkikoodi
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Esimerkkitulos
Tämä teksti on korostettu teksti keltaisella.
Yllä olevassa esimerkissä HTML-tunnisteen taustavärikoodi on #FFFF00, joka on keltainen. Tässä tapauksessa sanaa “keltainen” voitaisiin käyttää värikoodin tai minkä tahansa muun värinimen sijasta.
Samalla koodilla voit myös korostaa yhden tai useamman sanan kappaleessa kiinnittää huomiota tiettyyn tekstiosaan.
Korosta tekstiä CSS:llä ja HTML:llä
Voit myös luoda CSS-luokan ja asettaa “background-color”-attribuutin alla olevan esimerkin mukaisesti.
Esimerkkikoodi
<style>
body { background-color:blue; }
.highlightme { background-color:#FFFF00; }
p { background-color:#FFFFFF; }
</style>
Yllä olevassa CSS-koodissa määritellään kolme elementtiä. Ensinnäkin rungon taustaväri on asetettu siniseksi, toiseksi uusi luokka nimeltä “highlightme” keltaisella taustalla, ja lopuksi kappaletunnisteessa on valkoinen tausta.
Jos haluat käyttää “highlightme”-luokkaa korostaaksesi tekstiäsi, voit luoda HTML-koodiisi -tunnisteen, joka viittaa CSS-luokkaan.
Esimerkkikoodi
<span class="highlightme">test</span>
Kuinka korostaa kokonaista kappaletta
Yllä mainittua CSS-luokkaa tai tyyliluokkaa voidaan soveltaa myös kappaletunnisteeseen, jos haluat korostaa kokonaisen kappaleen alla olevan kuvan mukaisesti.
Esimerkkikoodi
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Esimerkkitulos
Tämä koko tekstikappale on korostettu keltaisella.
