logo

Kuinka alleviivata tekstiä CSS:ssä?

CSS-tekstin koristeluominaisuus: -

Alleviivauksia voidaan käyttää korostamaan tärkeää tekstiä. U-elementti ja CSS-tekstin koristeluominaisuus ovat kaksi eniten käytettyä tekniikkaa tekstin alleviivaamiseen verkkosivuilla.

Molempia on helppo käyttää, mutta U-elementti tarjoaa merkitykselle semanttisen arvon. Toinen voidaan näyttää pyynnöstä, jolloin alleviivauksen tilan muuttaminen on helppoa lisäämällä tekstiin CSS-luokkia.

Siitä, ovatko alleviivaukset hyödyllisiä merkityksen tai saavutettavuuden ilmaisemisessa, on keskustelua. Alleviivaukset ovat luonnollinen tapa tarjota paremman käyttökokemuksen arvoa, kun pelkkä väri ei riitä ilmaisemaan merkitystä.

Text-decoration -määrite tarjoaa vaihtoehtoisen tavan alleviivata tekstiä. Hyperlinkkitekstiä voidaan käyttää myös korvaamaan alleviivaukset yliviivoilla.

Yliviivaus on alleviivauksen vastakohta. Tekstin yläosaan lisätään rivi.

Voimme käyttää kaikkia alle- ja yliviivausarvoja samaan luokkamääritykseen. Tekstin koristelu-ominaisuus hallitsee tekstin esittämistä useilla tavoilla. Kun tekstin koristelu on alleviivattu, komponentin sisällä oleva teksti alleviivataan.

Tekstin koristelu CSS-ominaisuudet ovat fantastisia tekstille, mutta niitä voidaan rajoittaa suunnittelun suhteen, eivätkä ne sovellu muihin kuin tekstisisältötyyppeihin. Alleviivauksia voidaan luoda myös CSS-reunusmääritteillä.

poista ensimmäinen merkki excel

Text-decoration -määrite on yksinkertaisin tapa alleviivata tekstiä. Tekstin koristelun merkittävin haittapuoli on, että se ei ole konfiguroitavissa.

Tekstin koristelu -ominaisuus käyttää alleviivausta, yliviivausta, läpiviivausta tai rivien yhdistelmää valitun tekstin korostamiseen.

Sisältö alleviivataan text-decoration-line -attribuutilla. Yliviivaus, alleviivaus ja läpiviivaus ovat kolme vaihtoehtoa tälle määritteelle. CSS:ssä alleviivausta käytetään korostamaan tekstiä. Alleviivaus piirretään tekstin alle tällä arvolla.

Jälkeläisten tekstielementtien päälle piirretään tekstikoristeita. Tämä tarkoittaa, että kun elementti määrittelee tekstikoristeen, lapsielementti ei voi poistaa koristetta.

java avoin tiedosto

Viivaa ei ole piirretty, ja kaikki olemassa olevat koristeet poistetaan.

Korostaa: 1 kuvapisteen viiva piirretään tekstin perusviivan poikki.

Line-through: lisää tekstin 'keskikohtaan' 1px:n rivin sen yli.

Yliviivaus: lisää 1px rivin suoraan tekstin yläkohdan yläpuolelle tekstiin.

Inherit: perii vanhemman koristelun.

Tekstin koristelu määritetään tekstin koristelu-ominaisuuden kautta, joka on lyhenne ominaisuus seuraaville:

  • teksti-koriste-rivi (pakollinen)
  • teksti-koriste-väri
  • teksti-koriste-tyyli
  • teksti-koriste-paksuus

overline, underline, underline-overline, line-through tulee teksti-koriste-rivi alle.

Kiinteä, katkoviiva, katkoviiva, aaltoileva, kaksinkertainen kuuluu teksti-koriste-tyyliin.

merkkijonojen joukko c

Väri desimaaliarvona, heksadesimaaliarvona tai periytyminen kuuluu tekstin koristeluväriin.

Bord-bottom -ominaisuus on vaihtoehto tekstikoristeelle. Voimme käyttää myös reunuspohjaa pehmusteeksi.

Syntaksi: -

 text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness 

Etsitään nyt esimerkkiä ja ymmärretään tekstinkoristeominaisuuden käyttö.

Tekstin koristelu: alleviivaus yliviivaus

Esimerkki: -

 h1 { text-decoration: underline overline dotted purple; } h3 { text-decoration: underline wavy cyan 10px;} <h2>This is an example of text decoration property color using underline overline. </h2> <h3>This is an example of text decoration property color using line-through. </h3> 

Lähtö:

Kuinka alleviivata tekstiä CSS:ssä?