10 teksta stila rekvizīti CSS

Cascading Style Sheets (CSS) apraksta, kā HTML parāda elementus ekrānā. CSS var kontrolēt vairāku tīmekļa lapu izkārtojumu, izmantojot dažas koda rindiņas.

CSS ir formatēšanas rekvizīti, kas ietekmē teksta atstarpi, izskatu un līdzinājumu. Tālāk ir norādīti daži rekvizīti, kurus varat izmantot teksta stila veidošanai lietotņu lapās.

1. Teksta krāsa

The krāsa rekvizīts norāda jūsu teksta galveno priekšplāna krāsu. Varat izmantot iepriekš definētu krāsas nosaukumu, piemēram, sarkans, balts, vai zaļš. Varat arī izmantot hex vērtību vai citas vienības, piemēram, RGB, HSL un RGBA.

CSS ietvari, piemēram Tailwind CSS ir iebūvēta krāsu funkcija, kas parāda dažādus toņus. Tādējādi jums ir vieglāk izvēlēties sev vēlamo toni. Mainīsim šādu virsrakstu krāsu, izmantojot dažus no šiem rekvizītiem:

<ķermeni>
<h1>Mainīt manu krāsuh1>
<h2>Mainīt manu krāsuh2>
<h3>Mainīt manu krāsuh3>
<h4>Mainīt manu krāsuh4>
ķermeni>

CSS izskatīsies šādi:

h1 {
krāsa: apelsīns;
}
h2 {
krāsa: #ff6600;
}
h3 {
krāsa: rgb(255, 102, 0);
}
h4 {
krāsa: hsl(24, 100%, 50%);
}

Un stilizētais teksts izskatīsies šādi:

2. Fona krāsa

Jūs varat izmantot fona krāsa īpašums, ko izveidot pievilcīgs fons. Izmantojiet to, lai iestatītu dažādus fonus šādiem virsrakstiem:

<ķermeni>
<h1>Mainīt manu fona krāsuh1>
<h2>Mainīt manu fona krāsuh2>
<h3>Mainīt manu fona krāsuh3>
<h4>Mainīt manu fona krāsuh4>
ķermeni>

Izmantojot šādu CSS:

h1 {
fona krāsa: apelsīns;
}
h2 {
fona krāsa: #009900;
}
h3 {
fona krāsa: rgb(204, 0, 0);
}
h4 {
fona krāsa: hsl(60, 100%, 50%);
}

Kad jūsu pārlūkprogramma atveido šo lapu, tā izskatīsies apmēram šādi:

3. Teksta līdzināšana

The teksta līdzināšana rekvizīts nosaka teksta horizontālo līdzinājumu. Šī vērtība var būt pa kreisi, pa labi, centrs, vai attaisnot.

Taisnošanas vērtība izstiepj katru teksta rindiņu, tāpēc tās visas aizņem vienādu platumu labajā un kreisajā malā. Izmantojiet šo koda paraugu, lai izpētītu šīs četras vērtības:

<ķermeni>
<h1>Izlīdziniet mani pa kreisih1>
<h2> Izlīdziniet mani pareizih2>
<h3>Izlīdziniet mani centrāh3>
<lppklasē="ex4"><stiprs>Izlīdziniet mani pamatotistiprs>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam un erat pulvinar, pie pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.lpp>
<lpp><stiprs>Nav izlīdzināšanas stiprs>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam un erat pulvinar, pie pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.lpp>
ķermeni>

Izmantojiet šādu CSS, lai lietotu dažādus līdzinājumus:

h1 {
teksta līdzināšana: pa kreisi;
}
h2 {
teksta līdzināšana: pa labi;
}
h3 {
teksta līdzināšana: centrs;
}
.ex4{
teksta līdzināšana: attaisnot;
}

Pārlūkprogrammā tas izskatīsies šādi:

4. Teksta virziens

The teksta virziens īpašība nosaka teksta virzienu. Definējiet virzienu, izmantojot īpašības rtl (no labās puses uz kreiso) vai ltr (no kreisās uz labo). Šie divi norāda, kurā virzienā vēlaties teksta plūsmu.

Piemēram, izmantojiet rtl strādājot ar valodām, kas rakstītas no labās uz kreiso, piemēram, ebreju vai arābu. Jūs lietojat ltr valodām, kas rakstītas no kreisās uz labo pusi, piemēram, angļu valodā.

Ilustrēsim to ar tālāk norādīto kodu:

<ķermeni>
<div>
<lppklasē='ex1'>Šī rindkopa iet no labās uz kreiso pusi. Kursors
 pārvietojas no labās puses uz kreiso, kad ierakstāt vairāk informācijas par
 lappuse.lpp>
<lppid="ex2">Šī rindkopa iet no kreisās puses uz labo. Kursors kustas
 no kreisās puses, lai rakstītu, kad ierakstāt vairāk informācijas lapā!lpp>
div>
ķermeni>

Ar šo pievienoto CSS:

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

Gala rezultāts izskatīsies apmēram šādi:

5. Teksta dekorēšana

The teksta dekorēšana Īpašums nosaka teksta dekoratīvo līniju izskatu. Tas ir saīsinājums vārdam teksta dekorācijas līnija,teksts-dekorācija-krāsa,teksts-dekorācijas stils, un teksts-dekorācija-biezums īpašums. Ja nevēlaties, lai rekvizīts būtu elementiem, kuriem ir saites, izmantojiet teksta noformējums: nav;

Jums nevajadzētu pasvītrot parastu tekstu, jo šis stils parasti norāda uz saiti. Šajā ilustrācijā ir parādīti daži koda piemēri:

<ķermeni>
<h1>Overline teksta dekorēšanah1>
<h2>Teksta dekorēšana ar rindiņāmh2>
<h3>Pasvītrot teksta dekorēšanuh3>
<lppklasē="bijušais">Teksta noformējums pārsvītrot un pasvītrot.lpp>
<lpp><ahref="default.asp">Šī ir saitea>lpp>
ķermeni>

Izmantojot šo CSS, varat izmantot dažādus dekorēšanas efektus:

h1 {
teksta dekorēšana: overline;
}
h2 {
teksta dekorēšana: līnijas cauri;
}
h3 {
teksta dekorēšana: pasvītrot;
}
lpp.piem {
teksta dekorēšana: overlinepasvītrot;
}
a {
teksta dekorēšana: neviens;
}

Un viņi parādīs kaut ko līdzīgu šim:

6. Teksta pārveidošana

The teksta pārveidošana rekvizīts norāda reģistra veidu, kurā burti parādās. Tas var būt ar lielajiem vai mazajiem burtiem. Varat arī izmantot katra vārda pirmo burtu ar lielo burtu:

Šis piemērs parāda, kā to izdarīt kodā:

<ķermeni>
<h1>Teksta pārveidošanas rekvizītu piemērih1>
<lppklasē="lielie burti">Šis teikums ir ar lielo burtu.lpp>
<lppklasē="mazie burti">Šis teikums ir ar mazajiem burtiem.lpp>
<lppklasē="lielo burtu">Rakstiet šo tekstu ar lielo burtu.lpp>
ķermeni>

CSS fails:

lpp.lielie burti {
teksta pārveidošana: lielie burti;
}
lpp.mazie burti {
teksta pārveidošana: mazie burti;
}
lpp.izmantojiet lielos burtus {
teksta pārveidošana: rakstīt ar lielo burtu;
}

Ar šādu rezultātu:

7. Burtu atstarpes

The burtu atstarpes rekvizīts norāda atstarpi starp burtiem tekstā. Šis piemērs ilustrē, kā norādīt dažādus atstarpju stilus.

<ķermeni>
<h1>Burtu atstarpju piemērih1>
<h2>Šī ir 1. virsrakstsh2>
<h3>Šī ir 2. virsrakstsh3>
ķermeni>

CSS failā izmantojiet pikseļus vai citas mērvienības:

h2 {
burtu atstarpes: 7px;
}
h3 {
burtu atstarpes: -2 pikseļi;
}

Un iegūtais teksts tiks izstiepts vai saspiests:

8. Vārdu atstarpes

The vārdu atstarpes rekvizīts norāda atstarpi starp vārdiem tekstā. Pārlūkprogrammām ir standarta garums atstarpei starp vārdiem, taču jūs varat iestatīt savu. Šis piemērs parāda, kā palielināt vai samazināt atstarpi starp vārdiem:

<ķermeni>
<h1>Vārdu atstarpes rekvizīta piemērih1>
<lpp>Parasta vārdu atstarpe.lpp>
<lppklasē="ex1">Lielas vārdu atstarpes.lpp>
<lppklasē="ex2">Maza vārdu atstarpe.lpp>
ķermeni>

Izmantojot šo CSS:

lpp.ex1 {
vārdu atstarpes: 1rem;
}
lpp.ex2 {
vārdu atstarpes: -0.3rem;
}

Jūs varat skaidri redzēt vārdu atstarpes efektu:

9. Līnijas augstums

The līnijas augstums rekvizīts norāda atstarpi starp rindām rindkopā. Standarta un noklusējuma līnijas augstums lielākajā daļā pārlūkprogrammu ir aptuveni 110% līdz 120%. Šis kods parāda, kā to mainīt:

<ķermeni>
<h1>Izmantojot līnijas augstumuh1>
<lpp>
 Standarta līnijas augstums.
 Standarta līnijas augstums.
lpp>
<lppklasē="mazs">
 Mazs mazs līnijas augstums.
 Mazs līnijas augstums
lpp>
<lppklasē="liels">
 Lielāks līnijas augstums.
 Lielāks līnijas augstums.
lpp>
ķermeni>

Izmantojot šādu CSS:

lpp.mazs {
līnijas augstums: 0.7;
}
lpp.liels {
līnijas augstums: 1.8;
}

Jūs varat redzēt rezultātus starp katru rindiņu katrā rindkopā:

10. Teksta ēna

The teksts-ēna rekvizīts tekstam piemēro ēnas. Ir jānorāda horizontālā ēna un vertikālā ēna. Teksts-ēna var ietvert krāsu un izplūšanas rādiusu. Ilustrēsim to ar šādu kodu:

<ķermeni>
 <h1>PiemērinoTeksts-ēnaefekts.h1>
 <h1klasē="ex1">Teksts-ēnaarkrāsah1>
 <h1klasē="ex2">Teksts-ēnaaraizmiglotefekts.h1>
ķermeni>

Izmantojot šo CSS:

h1 {
 teksta ēna: 2 pikseļi 2 pikseļi;
}
.ex1 {
 teksta ēna: 2 pikseļi 2 pikseļi oranžs;
}
.ex2 {
 teksta ēna: 2px 2px 10px sarkans;
}

Radīs dažus neparastus un interesantus efektus:

Kāpēc mācīties CSS teksta stila īpašības?

CSS ir mūsdienu tīmekļa dizaina mugurkauls. Neatkarīgi no tā, vai tas ir vaniļas formā vai ietvaros, CSS īpašību pamatfunkcija ir vienāda. Teksta formatēšanas rekvizītu apgūšana ļauj izveidot pievilcīgas un lasāmas lietotāja saskarnes.

Jaunākā CSS versija CSS3 ievieš jaunas koncepcijas, sākot no animācijas līdz vairāku kolonnu izkārtojumiem. Šīs koncepcijas atvieglo profesionālu lietojumprogrammu un dokumentu izveidi.