Asiakirjan tai tekstin alleviivaus katsotaan aina helpoksi. Mutta jos tarkastelemme verkkosivustojen tapausta, onko se vielä helppoa? Suurin osa meistä sanoisi kyllä, mutta tekemällä vaakasuora viiva, mukaan lukien joitain mukautettuja malleja, tämä yksinkertainen tehtävä on väsyttävä. Aloita tekstinsisustusmatka CSS: llä seuraavalla tavalla:
- Mikä on tekstin koristelu?
- CSS: n tekstikoristustyypit
- Tekstin koristelu CSS: llä: koodi
- Tekstin koristelu Ohita
Mikä on tekstin koristelu?
Se asettaa koristeellisten viivojen ulkonäön tekstille. Se on lyhyt ominaisuus:
- teksti-koristelu-rivi
- teksti-sisustus-väri
- tekstikoristelu-tyyli
Se on määritelty yhdeksi tai useammaksi välilyönnillä erotetuksi arvoksi, joka edustaa pitkää kättäxt-koristeluominaisuudet.
Syntaksi:
tekstikoristelu: || ||
Missä,
teksti-koristelu-rivi: Sitä käytetään asettamaan käytetty koristelu, kutenalleviivaus, yliviiva ja läpivienti.
teksti-sisustus-väri:Sitä käytetään koristeen värin asettamiseen.
tekstikoristelu-tyyli: Sitä käytetään asettamaan viivan tyyli, kutenkiinteä, aaltoileva, pisteviiva, katkoviiva, kaksinkertainen
CSS: n tekstikoristustyypit
- Yliviiva:
#decoration {text-decoration: overline} 
- Linjan läpi:
#decoration {text-decoration: line-through}sillä on skanneriluokan menetelmät
- Korostaa:
#decoration {text-decoration: alleviivattu}- Yhdistelmä:
#decoration {text-decoration: alleviivattu yliviiva}Tuotos:
Tekstin koristelu CSS: llä: koodi
Koodi:
CSS-koodi:
#overline {text-decoration: aaltoileva overline lime} #underover {text-decoration: katkoviivainen alleviivaus} #dotted {text-decoration: alleviivaus overline dotted red} # aaltoileva {text-decoration: line-through aaltoileva}Tuotos:
Tekstin koristelu Ohita
Ominaisuutta, joka tunnetaan nimellä text-decoration-skip, voidaan käyttää myös silloin, kun teksti yliviivataan, viivoitetaan ja alleviivataan. Se auttaa sisustamaan tekstiä. Siinä yksinkertaisesti määritetään, kuinka yliviivat ja alleviivat piirretään, kun ne kulkevat nousijoiden ja laskeutuvien yli.
#decoration {text-decoration-skip: ink}Arvoja, joita voidaan käyttää tekstikoristeluhyppyjen kanssa, ovat:
esineitä : (oletus) rivi ohittaa sisäiset objektit, kuten kuvat tai inline-block-elementit.
ei mitään : linja ylittää kaiken.
välilyöntejä : koristelista ohittaa välilyönnit, sanan erotinmerkit ja kaikki välit, jotka on asetettu kirjainten väliin tai sanaväliin.
muste : koristelista ohittaa kuviot, jälkeläiset tai nousijat.
reunat : koristelista alkaa hieman sisällön alkureunan jälkeen ja päättyy hieman ennen sisällön loppureunaa.
laatikkokoristelu : koristelista ohittaa perityn marginaalin, reunuksen ja pehmusteen.
Koska mikään selain ei tue tätä ominaisuutta, ei ole demoa, mutta tässä on esimerkki alla olevasta kuvasta, kuinka kukin arvo voisi näyttää, kun teksti-koristelu-ohitus on toteutettu.
Tämän myötä olemme päässeet tämän tekstin koristeluun CSS-blogin avulla. Jos sinulla on kysyttävää tästä aiheesta, jätä kommentti alle ja palaamme sinuun.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.
Onko sinulla kysymys meille? Mainitse se 'Tekstin koristelu CSS: n avulla' -blogin kommenttiosassa ja palaamme sinuun.