10 tekstin tyyliominaisuutta CSS: ssä

CSS (Cascading Style Sheets) kuvaa, kuinka HTML näyttää elementtejä näytöllä. CSS voi ohjata useiden verkkosivujen asettelua muutamalla koodirivillä.

CSS: llä on muotoiluominaisuuksia, jotka vaikuttavat tekstin väliin, ulkoasuun ja tasaukseen. Tässä on joitain ominaisuuksia, joita voit käyttää sovellussivujesi tekstin tyyliin.

1. Tekstin väri

The väri ominaisuus määrittää tekstisi pääetualalla värin. Voit käyttää ennalta määritettyä värin nimeä, kuten punainen, valkoinen, tai vihreä. Voit myös käyttää heksadesimaaliarvoa tai muita yksiköitä, kuten RGB, HSL ja RGBA.

CSS-kehykset, kuten Tailwind CSS niissä on sisäänrakennettu väriominaisuus, joka näyttää useita sävyjä. Näin sinun on helpompi valita haluamasi sävy. Muutetaan seuraavien otsikoiden väriä käyttämällä joitain näistä ominaisuuksista:

<kehon>
<h1>Vaihda värinih1>
<h2>Vaihda värinih2>
<h3>Vaihda värinih3>
<h4>Vaihda värinih4>
kehon>

CSS näyttää tältä:

h1 {
väri: oranssi;
}
h2 {
väri: #ff6600;
}
h3 {
väri: rgb(255, 102, 0);
}
h4 {
väri: hsl(24, 100%, 50%);
}

Ja tyylitelty teksti näyttää tältä:

2. Taustaväri

Voit käyttää taustaväri luotava omaisuus houkuttelevat taustat. Käytä sitä asettaaksesi eri taustat seuraaville otsikoille:

<kehon>
<h1>Vaihda taustavärih1>
<h2>Vaihda taustavärih2>
<h3>Vaihda taustavärih3>
<h4>Vaihda taustavärih4>
kehon>

Seuraavalla CSS: llä:

h1 {
taustaväri: oranssi;
}
h2 {
taustaväri: #009900;
}
h3 {
taustaväri: rgb(204, 0, 0);
}
h4 {
taustaväri: hsl(60, 100%, 50%);
}

Kun selaimesi näyttää tämän sivun, se näyttää suunnilleen tältä:

3. Tekstin tasaus

The tekstin tasaus ominaisuus määrittää tekstin vaakasuuntaisen tasauksen. Tämä arvo voi olla vasemmalle, oikein, keskusta, tai perustella.

Tasausarvo venyttää jokaista tekstiriviä, joten ne kaikki ovat yhtä leveitä oikeasta ja vasemmasta marginaalista. Käytä seuraavaa esimerkkikoodia tutkiaksesi näitä neljää arvoa:

<kehon>
<h1>Tasaa minut vasemmalleh1>
<h2> Kohdista minut oikeinh2>
<h3>Kohdista minut keskelleh3>
<sluokkaa="ex4"><vahva>Kohdista minut perustellustivahva>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper halkaisija ja erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.s>
<s><vahva>Ei tasausta vahva>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper halkaisija ja erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.s>
kehon>

Käytä seuraavaa CSS: ää erilaisten tasausten soveltamiseen:

h1 {
tekstin tasaus: vasemmalle;
}
h2 {
tekstin tasaus: oikein;
}
h3 {
tekstin tasaus: keskusta;
}
.ex4{
tekstin tasaus: perustella;
}

Selaimessa tämä näyttää tältä:

4. Tekstin suunta

The teksti-suunta ominaisuus määrittää tekstin suunnan. Määritä suunta ominaisuuksien avulla rtl (oikealta vasemmalle) tai ltr (vasemmalta oikealle). Nämä kaksi määrittelevät, mihin suuntaan haluat tekstin virtaavan.

Esimerkiksi käyttää rtl kun työskentelet oikealta vasemmalle kirjoitetuilla kielillä, kuten heprea tai arabia. Sinä käytät ltr kielille, jotka on kirjoitettu vasemmalta oikealle, kuten englanti.

Havainnollistetaan tämä alla olevalla koodilla:

<kehon>
<div>
<sluokkaa='ex1'>Tämä kappale etenee oikealta vasemmalle. Kursori
 siirtyy oikealta vasemmalle, kun kirjoitat lisätietoja
 sivu.s>
<sid="ex2">Tämä kappale etenee vasemmalta oikealle. Kursori liikkuu
 vasemmalta kirjoittaa, kun kirjoitat sivulle lisätietoja!s>
div>
kehon>

Tällä mukana tulevalla CSS: llä:

.ex1 {
suunta: rtl;
}
#ex2 {
suunta: ltr;
}

Lopputulos näyttää suunnilleen tältä:

5. Tekstin koristelu

The teksti-sisustus ominaisuus määrittää tekstiin koristeellisten viivojen ulkonäön. Se on lyhenne sanasta teksti-koriste-viiva,teksti-koriste-väri,teksti-koriste-tyyli, ja teksti-koriste-paksuus omaisuutta. Jos et halua omaisuutta elementeissä, joissa on linkkejä, käytä tekstikoristelu: ei mitään;

Sinun tulee välttää normaalin tekstin alleviivaamista, koska tämä tyyli viittaa yleensä linkkiin. Seuraavassa kuvassa on esimerkkejä koodista:

<kehon>
<h1>Overline tekstin koristeluh1>
<h2>Tekstin läpiviivauskoristeluh2>
<h3>Alleviivaa tekstin koristeluh3>
<sluokkaa="ex">Yliviivaus ja alleviivaus tekstin koristelu.s>
<s><ahref="default.asp">Tämä on linkkia>s>
kehon>

Voit käyttää erilaisia ​​sisustustehosteita tällä CSS: llä:

h1 {
teksti-sisustus: yliviivaus;
}
h2 {
teksti-sisustus: linjan läpi;
}
h3 {
teksti-sisustus: korostaa;
}
s.esim {
teksti-sisustus: yliviivauskorostaa;
}
a {
teksti-sisustus: ei mitään;
}

Ja he näyttävät jotain tällaista:

6. Tekstin muunnos

The tekstin muunnos ominaisuus määrittää, minkä tyyppisessä tapauksessa kirjaimet näkyvät. Tämä voi olla isoilla tai pienillä kirjaimilla. Voit myös käyttää sitä jokaisen sanan ensimmäisen kirjaimen kirjoittamiseen:

Seuraava esimerkki näyttää, kuinka se tehdään koodissa:

<kehon>
<h1>Esimerkkejä tekstinmuunnosominaisuudestah1>
<sluokkaa="isot kirjaimet">Tämä lause on isoilla kirjaimilla.s>
<sluokkaa="pienet kirjaimet">Tämä lause on pienillä kirjaimilla.s>
<sluokkaa="kirjaimalla">Kirjoita tämä teksti isolla kirjaimella.s>
kehon>

CSS-tiedosto:

s.isot kirjaimet {
tekstin muunnos: isot kirjaimet;
}
s.pienet kirjaimet {
tekstin muunnos: pienet kirjaimet;
}
s.kirjaimella {
tekstin muunnos: isolla;
}

Seuraavalla tuloksella:

7. Kirjainväli

The kirjainväli ominaisuus määrittää kirjainten välisen tilan tekstissä. Seuraava esimerkki havainnollistaa eri välitystyylien määrittämistä.

<kehon>
<h1>Esimerkkejä kirjainvälistäh1>
<h2>Tämä on otsikko 1h2>
<h3>Tämä on otsikko 2h3>
kehon>

Käytä pikseleitä tai muita mittayksiköitä CSS-tiedostossasi:

h2 {
kirjainväli: 7px;
}
h3 {
kirjainväli: -2px;
}

Ja tuloksena olevaa tekstiä venytetään tai puristetaan:

8. Sanavälit

The sanavälit ominaisuus määrittää sanojen välisen tilan tekstissä. Selaimissa on vakiopituus sanojen välissä, mutta voit määrittää oman. Seuraava esimerkki havainnollistaa, kuinka sanaväliä lisätään tai pienennetään:

<kehon>
<h1>Esimerkkejä sanavälin ominaisuudestah1>
<s>Normaali sanaväli.s>
<sluokkaa="ex1">Suuri sanaväli.s>
<sluokkaa="ex2">Pieni sanaväli.s>
kehon>

Käyttämällä tätä CSS: ää:

s.ex1 {
sanavälit: 1rem;
}
s.ex2 {
sanavälit: -0.3rem;
}

Voit nähdä selvästi sanavälin vaikutuksen:

9. Viivankorkeus

The viivankorkeus ominaisuus määrittää rivien väliset rivit kappaleessa. Vakio- ja oletusrivin korkeus useimmissa selaimissa on noin 110–120 %. Seuraava koodi näyttää kuinka se vaihdetaan:

<kehon>
<h1>Viivan korkeuden käyttäminenh1>
<s>
 Vakiolinjan korkeus.
 Vakiolinjan korkeus.
s>
<sluokkaa="pieni">
 Pieni pieni rivinkorkeus.
 Pieni rivinkorkeus
s>
<sluokkaa="iso">
 Suurempi rivinkorkeus.
 Suurempi rivinkorkeus.
s>
kehon>

Käyttämällä seuraavaa CSS: ää:

s.pieni {
viivankorkeus: 0.7;
}
s.iso {
viivankorkeus: 1.8;
}

Näet tulokset kunkin kappaleen rivien välissä:

10. Teksti varjo

The teksti-varjo ominaisuus lisää varjoja tekstiin. Sinun on määritettävä vaakavarjo ja pystysuora varjo. Teksti-varjo voi sisältää värin ja sumennuksen säteen. Havainnollistetaan se seuraavalla koodilla:

<kehon>
 <h1>Esimerkkejä/Teksti-varjovaikutus.h1>
 <h1luokkaa="ex1">Teksti-varjokanssavärih1>
 <h1luokkaa="ex2">Teksti-varjokanssahämärtäävaikutus.h1>
kehon>

Tällä CSS: llä:

h1 {
 tekstivarjo: 2px 2px;
}
.ex1 {
 tekstivarjo: 2px 2px oranssi;
}
.ex2 {
 tekstivarjo: 2px 2px 10px punainen;
}

Tuottaa epätavallisia ja mielenkiintoisia tehosteita:

Miksi oppia CSS-tekstin tyyliominaisuuksia?

CSS on nykyaikaisen web-suunnittelun selkäranka. CSS-ominaisuuksien perustoiminto on sama, joko vaniljamuodossa tai kehyksissä. Tekstin muotoiluominaisuuksien hallitseminen mahdollistaa houkuttelevien ja luettavien käyttöliittymien luomisen.

CSS: n uusin versio, CSS3, esittelee uusia käsitteitä animaatioista monisarakkeisiin asetteluihin. Nämä konseptit helpottavat ammattimaisten sovellusten ja asiakirjojen luomista.