10 CSS-i tekstistiili atribuuti

Cascading Style Sheets (CSS) kirjeldab, kuidas HTML kuvab ekraanil elemente. CSS suudab mõne koodirea abil juhtida mitme veebilehe paigutust.

CSS-il on vormindamisomadused, mis mõjutavad teksti vahesid, välimust ja joondamist. Siin on mõned atribuudid, mida saate kasutada oma rakenduse lehtede teksti laadimiseks.

1. Teksti värv

The värvi atribuut määrab teie teksti peamise esiplaani värvi. Võite kasutada eelmääratletud värvinime, näiteks punane, valge, või roheline. Võite kasutada ka kuueteistkümnendväärtust või muid ühikuid, nagu RGB, HSL ja RGBA.

CSS-i raamistikud nagu Tailtuule CSS on sisseehitatud värvifunktsioon, mis kuvab erinevaid toone. See muudab teile eelistatava tooni valimise lihtsamaks. Muudame järgmiste pealkirjade värvi, kasutades mõnda neist omadustest:

<keha>
<h1>Muuda minu värvih1>
<h2>Muuda minu värvih2>
<h3>Muuda minu värvih3>
<h4>Muuda minu värvih4>
keha>

CSS näeb välja selline:

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

Ja stiilitud tekst näeb välja selline:

2. Taustavärv

Võite kasutada taustavärv vara, mida luua ahvatlevad taustad. Kasutage seda erinevate taustade määramiseks järgmistele pealkirjadele:

<keha>
<h1>Muuda minu taustavärvih1>
<h2>Muuda minu taustavärvih2>
<h3>Muuda minu taustavärvih3>
<h4>Muuda minu taustavärvih4>
keha>

Järgmise CSS-iga:

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

Kui teie brauser selle lehe renderdab, näeb see välja umbes selline:

3. Teksti joondamine

The teksti joondamine atribuut määrab teksti horisontaalse joonduse. See väärtus võib olla vasakule, õige, Keskus, või õigustada.

Põhjendusväärtus venitab iga tekstirida, nii et need kõik võtavad paremal ja vasakul veeris sama laiuse. Nende nelja väärtuse uurimiseks kasutage järgmist näidiskoodi.

<keha>
<h1>Joonda mind vasakuleh1>
<h2> Joondage mind õigestih2>
<h3>Joonda mind keskeleh3>
<lkklass="ex4"><tugev>Joonda mind õigustatulttugev>: Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Etiam semper diam ja erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.lk>
<lk><tugev>Joondus puudub tugev>: Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Etiam semper diam ja erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.lk>
keha>

Erinevate joonduste rakendamiseks kasutage järgmist CSS-i:

h1 {
teksti joondamine: vasakule;
}
h2 {
teksti joondamine: õige;
}
h3 {
teksti joondamine: Keskus;
}
.ex4{
teksti joondamine: õigustada;
}

Brauseris näeb see välja järgmiselt:

4. Teksti suund

The teksti suund atribuut määrab teksti suuna. Määratle suund omaduste abil rtl (paremalt vasakule) või ltr (vasakult paremale). Need kaks määravad, millises suunas soovite teksti voolata.

Näiteks kasutada rtl kui töötate paremalt vasakule kirjutatud keeltega nagu heebrea või araabia keel. Sa kasutad ltr vasakult paremale kirjutatud keelte jaoks nagu inglise keel.

Illustreerime seda alloleva koodiga:

<keha>
<div>
<lkklass='ex1'>See lõik liigub paremalt vasakule. Kursor
 liigub paremalt vasakule, kui sisestate kohta rohkem teavet
 lehel.lk>
<lkid="ex2">See lõik liigub vasakult paremale. Kursor liigub
 vasakult kirjutada, kui sisestate lehele lisateavet!lk>
div>
keha>

Selle kaasasoleva CSS-iga:

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

Lõpptulemus näeb välja umbes selline:

5. Teksti kaunistamine

The tekst-kaunistus atribuut määrab tekstile dekoratiivsete joonte välimuse. See on stenogramm tekst-dekoratsioonijoon,tekst-dekoratsioon-värv,tekst-kaunistus-stiilja tekst-kaunistus-paksus vara. Kui te ei soovi linke sisaldavate elementide atribuuti, kasutage seda tekst-kaunistus: puudub;

Vältige tavalise teksti allajoonimist, kuna see stiil viitab tavaliselt lingile. Järgmisel joonisel on mõned näited koodis:

<keha>
<h1>Ülejoonitud teksti kaunistamineh1>
<h2>Läbijooneline tekstide kaunistamineh2>
<h3>Teksti kaunistus joon allah3>
<lkklass="endine">Üle- ja allajoonitud teksti kaunistamine.lk>
<lk><ahref="default.asp">See on linka>lk>
keha>

Selle CSS-iga saate rakendada erinevaid dekoratsiooniefekte:

h1 {
tekst-kaunistus: ülejoon;
}
h2 {
tekst-kaunistus: line-through;
}
h3 {
tekst-kaunistus: joon alla;
}
lk.nt {
tekst-kaunistus: ülejoonjoon alla;
}
a {
tekst-kaunistus: mitte ühtegi;
}

Ja nad kuvavad midagi sellist:

6. Teksti teisendus

The teksti teisendus atribuut määrab, millist tüüpi tähti kuvatakse. See võib olla suur- või väiketähtedega. Saate seda kasutada ka iga sõna esimese tähe suureks kirjutamiseks:

Järgmine näide näitab, kuidas seda koodis teha:

<keha>
<h1>Näited teksti teisendamise omadusesth1>
<lkklass="suurtähed">See lause on suurtähtedega.lk>
<lkklass="väikesed tähed">See lause on väikese tähega.lk>
<lkklass="suurtähte tegema">Kirjutage see tekst suurtähtedega.lk>
keha>

CSS-fail:

lk.suurtähega {
teksti teisendus: suurtähtedega;
}
lk.väikesed tähed {
teksti teisendus: väiketähtedega;
}
lk.suurtähtedega {
teksti teisendus: suurtähtedega kirjutama;
}

Järgmise tulemusega:

7. Tähtede vahe

The tähevahed atribuut määrab tekstis tähtedevahelise tühiku. Järgmine näide illustreerib, kuidas määrata erinevaid vahestiile.

<keha>
<h1>Tähevahede näitedh1>
<h2>See on pealkiri 1h2>
<h3>See on rubriik 2h3>
keha>

Kasutage oma CSS-failis piksleid või muid mõõtühikuid.

h2 {
tähevahed: 7px;
}
h3 {
tähevahed: -2 pikslit;
}

Ja saadud tekst venitatakse või pigistatakse:

8. Sõnavahe

The sõnavahe atribuut määrab sõnade vahelise tühiku tekstis. Brauseritel on sõnade vahel standardpikkus, kuid saate ise määrata. Järgmine näide illustreerib, kuidas sõnadevahelist tühikut suurendada või vähendada.

<keha>
<h1>Sõnavahe atribuudi näitedh1>
<lk>Tavaline sõnavahe.lk>
<lkklass="ex1">Suur sõnavahe.lk>
<lkklass="ex2">Väike sõnavahe.lk>
keha>

Selle CSS-i kasutamine:

lk.ex1 {
sõnavahe: 1rem;
}
lk.ex2 {
sõnavahe: -0.3rem;
}

Näete selgelt sõnavahe mõju:

9. Reakõrgus

The reakõrgus atribuut määrab lõigu ridade vahe. Standardne ja vaikerea kõrgus enamikus brauserites on umbes 110% kuni 120%. Järgmine kood illustreerib, kuidas seda muuta:

<keha>
<h1>Joonekõrguse kasutamineh1>
<lk>
 Standardne joonekõrgus.
 Standardne joonekõrgus.
lk>
<lkklass="väike">
 Väike väike joonekõrgus.
 Väike joone kõrgus
lk>
<lkklass="suur">
 Suurem joone kõrgus.
 Suurem joone kõrgus.
lk>
keha>

Kasutades järgmist CSS-i:

lk.väike {
reakõrgus: 0.7;
}
lk.suur {
reakõrgus: 1.8;
}

Tulemusi näete iga lõigu iga rea ​​vahel:

10. Teksti vari

The tekst-vari atribuut rakendab tekstile varje. Peate määrama horisontaalse ja vertikaalse varju. Tekst-vari võib sisaldada värvi ja hägususe raadiust. Illustreerime seda järgmise koodiga:

<keha>
 <h1>NäitedkohtaTekst-varimõju.h1>
 <h1klass="ex1">Tekst-varikoosvärvih1>
 <h1klass="ex2">Tekst-varikooshägususmõju.h1>
keha>

Selle CSS-iga:

h1 {
 tekst-vari: 2px 2px;
}
.ex1 {
 tekst-vari: 2px 2px oranž;
}
.ex2 {
 tekst-vari: 2px 2px 10px punane;
}

Toodab ebatavalisi ja huvitavaid efekte:

Miks õppida CSS-i tekstistiili omadusi?

CSS on kaasaegse veebidisaini alustala. Kas vanilje kujul või raamistikus, on CSS-i omaduste põhifunktsioon sama. Tekstivormingu omaduste valdamine võimaldab luua atraktiivseid ja loetavaid kasutajaliideseid.

CSS-i uusim versioon CSS3 tutvustab uusi kontseptsioone animatsioonidest mitme veeru paigutusteni. Need kontseptsioonid muudavad professionaalsete rakenduste ja dokumentide loomise lihtsamaks.