Johdanto CSS-tekstin muotoiluun
Aiempina päivinä sinua pakotettiin edustamaan tekstiä CSS: n vanhalla versiolla. Sinulla oli tagi muuttaaksesi sisällön varjostusta ja kirjasintyyppiä, mutta mittaaminen estettiin kuitenkin käyttämällä ennalta karakterisoituja tekstin mittoja. Erilaiset vaikutukset, kuten intensiteetti ja läpilyönti, olivat ajateltavissa vain perusrakenteissa HTML-tarrojen avulla. Tällä hetkellä käyttäjä voi käyttää erilaisia CSS-tekstin muotoiluominaisuuksia järjestääkseen verkkosivuilla olevan tekstin omalla tavallaan.
Tässä luvussa näet lukuisia CSS-tekstin muotoiluominaisuuksia. CSS-tekstin muotoiluominaisuuksia hyödynnetään tekstin suunnittelussa, tekstin muotoilussa, muutaman muotoilutyylin kuvaamisessa jne. Ominaisuudet tarjoavat sinulle merkit, välilyönnit, sanat, kappaleet ja paljon muuta visuaalisesti.
Luettelo CSS-tekstin muotoiluominaisuuksista:
Tiedot tekstin muotoilutavoista CSS: ssä: -
1) Tekstin väri
Tätä ominaisuutta voidaan käyttää tekstin värin muuttamiseen. Se voidaan määritellä käyttämällä väriominaisuutta.
Esimerkki : Tekstin värin kuvaus
CSS Text Color Property
Hei maailma….
Tervetuloa EDUCBA: lle
Se näyttää seuraavan tuloksen:
2) Tekstin kohdistus
Tätä ominaisuutta voidaan käyttää muuttamaan tekstin vaakatasoa. Se voidaan määritellä käyttämällä vasenta, oikeaa, keskimmäistä, perustele ominaisuuksia.
Esimerkki : Kuva tekstin kohdistamisesta
Text Alignment Property
Hei maailma…
Tervetuloa EDUCBA: iin …
Koulutuskonsultti …
Se näyttää seuraavan tuloksen:
3) Tekstin sisustus
Tätä ominaisuutta voidaan käyttää tekstin sisustamiseen. Se voidaan määritellä käyttämällä alleviivaus, yläviiva, suoraviivaominaisuuksia.
Esimerkki : Teksti-koristelu
Text DecorationProperty
Hei maailma…
Tervetuloa EDUCBA: iin …
Koulutuskonsultti …
Se näyttää seuraavan tuloksen:
4) Tekstin muuntaminen
Tätä ominaisuutta voidaan käyttää muuttamaan tekstin tapauksia. Se voidaan määritellä käyttämällä isoja, isoja ja pieniä ominaisuuksia.
Esimerkki : Kuva tekstin muuntamisesta
Text Transformation Property
Hei maailma…
Tervetuloa koulutukseen …
Koulutuskonsultti …
Se näyttää seuraavan tuloksen:
5) Tekstin sisennys
Tätä ominaisuutta voidaan käyttää tekstin ensimmäisen rivin sisennämiseen. Se voidaan määritellä käyttämällä px, cm, pt ominaisuuksia.
Esimerkki : Tekstin sisennyksen kuvaus
Text Indentation Property
Hei maailma…
Tervetuloa Educba …
Koulutuskonsultti …
Se näyttää seuraavan tuloksen:
6) Sanaväli
Tätä ominaisuutta voidaan käyttää antamaan tilaa sanojen välillä. Se voidaan määritellä käyttämällä sanaväli-ominaisuutta.
Esimerkki : Kuva sanan välistä
Word Spacing Property
Hei maailma…
Tervetuloa Educba …
Koulutuskonsultti …
Se näyttää seuraavan tuloksen:
7) Kirjeväli
Tätä ominaisuutta voidaan käyttää antamaan tilaa merkkien välillä. Se voidaan määritellä käyttämällä kirjainvälin ominaisuutta.
Esimerkki : Kuva kirjainten välistä
Letter Spacing Property
Hei maailma…
Tervetuloa Educba …
Koulutuskonsultti …
Se näyttää seuraavan tuloksen:
8) Linjan korkeus
Tätä ominaisuutta voidaan käyttää antamaan tilaa rivien välillä. Se voidaan määritellä käyttämällä viivankorkeutta.
Esimerkki : Kuva viivan korkeudesta
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) on a
johtava taitoihin perustuvan koulutuksen tarjoaja
EduCBA: lla on meille ylpeys asia siitä, että meistä tehdään työpaikka
antaa kursseja kenelle tahansa, milloin ja missä tahansa.
Se näyttää seuraavan tuloksen:
9) Teksti-suunnassa
Tätä ominaisuutta voidaan käyttää tekstin suunnan muuttamiseen. Se voidaan määritellä käyttämällä rtl-ominaisuutta. Se asettaa suunnan oikealta vasemmalle.
Esimerkki : Kuva tekstin suunnasta
Text Direction Property
Hei maailma … Tervetuloa Educbaan …
Se näyttää seuraavan tuloksen:
10) Teksti-shadow
Tätä ominaisuutta voidaan käyttää antamaan varjo tekstille. Se voidaan määritellä käyttämällä text-shadow ominaisuutta. Se käyttää komponentteja, kuten vasen sijainti, yläasento, sumeuden koko, värinimi.
Esimerkki : Tekstivarjon kuva
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Hei maailma … Tervetuloa EDUCBA: iin …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) on taitoihin perustuva koulutus
Se näyttää seuraavan tuloksen:
11) Ems
Tämä on skaalautuva yksikkö mitoitukseen. Tätä ominaisuutta voidaan käyttää määrittelemään tekstin koko ympäröivän tekstin mukaan. Tekstin oletuskoko on 1em, joka on yhtä suuri kuin 12 pt. 2em on yhtä suuri kuin 24pt ja niin edelleen.
Esimerkki : Kuva ems-ominaisuudesta
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Hei maailma … Tervetuloa EDUCBA: iin …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) on taitoihin perustuva koulutus
Se näyttää seuraavan tuloksen:
12) Kirjasinperhe
Tätä ominaisuutta käytetään tarjoamaan erityyppisiä kirjasinperheen nimiä valitulle tekstille. Esimerkiksi Helvetica, Calibri, Arial, Sans-serif, Times, Courier New jne.
Esimerkki : Kuva fonttiperheen ominaisuudesta
Font Family Property
Hei maailma…
Tervetuloa Educba …
Koulutuskonsultti …
Se näyttää seuraavan tuloksen:
johtopäätös
Toistaiseksi olemme tutkineet CSS: n tekstin muotoilutapoja. Voisit nähdä, että teksti esitetään erityyppisillä tekstin muotoiluominaisuuksilla. Nämä ominaisuudet ovat erittäin tärkeitä CSS: n näkökohtia tekstin näyttämiseksi verkkosivulla, jotta käyttäjät tai lukijat voivat houkutella näkemällä tekstin verkkosivustolla. Hyödynnä näitä tekstiominaisuuksia erittäin helposti ja tehokkaasti verkkosivuilla.
Suositellut artikkelit
Tämä on opas CSS-tekstin muotoiluun. Tässä olemme keskustelleet CSS-tekstin muotoiluominaisuuksien johdannosta ja luettelosta yksityiskohtaisesti esimerkkikoodiesimerkkien ja oikean tulosteen kanssa. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -
- Mikä on CSS?
- SASS vs CSS
- CSS-komennot
- CSS3-haastattelukysymykset