10 proprietăți de stilare a textului în CSS

Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Foile de stil în cascadă (CSS) descriu modul în care HTML afișează elementele pe ecran. CSS poate controla aspectul mai multor pagini web cu câteva linii de cod.

cum se reinstalează Windows 10 din bios

CSS are proprietăți de formatare care afectează spațierea, aspectul și alinierea textului. Iată câteva proprietăți pe care le puteți folosi pentru a stila textul în paginile aplicației.

REALIZAREA VIDEOCLIPULUI ZILEI

1. Culoarea textului

The culoare proprietate specifică culoarea principală de prim plan a textului. Puteți utiliza un nume de culoare predefinit, cum ar fi roșu , alb , sau verde . De asemenea, puteți utiliza o valoare hex sau alte unități precum RGB, HSL și RGBA.

cadre CSS cum ar fi Tailwind CSS au o caracteristică de culoare încorporată care afișează o varietate de nuanțe. Acest lucru vă ajută să alegeți o nuanță pe care o preferați. Să schimbăm culoarea următoarelor titluri folosind unele dintre aceste proprietăți:

 <body> 
    <h1>Change My Color</h1> 
 
    <h2>Change My Color</h2> 
 
    <h3>Change My Color</h3> 
 
    <h4>Change My Color</h4> 
</body>

CSS-ul va arăta astfel:

 h1 { 
    color: orange; 
} 
 
h2 { 
    color: #ff6600; 
} 
 
h3 { 
    color: rgb(255, 102, 0); 
} 
 
h4 { 
    color: hsl(24, 100%, 50%); 
}

Și textul stilizat va apărea astfel:

Proprietățile CSS schimbă culoarea textului

2. Culoare de fundal

Puteți folosi culoare de fundal proprietate de creat fundaluri atrăgătoare . Folosiți-l pentru a seta fundaluri diferite pentru următoarele titluri:

 <body> 
    <h1>Change My Background Color</h1> 
 
    <h2>Change My Background Color</h2> 
 
    <h3>Change My Background Color</h3> 
 
    <h4>Change My Background Color</h4> 
</body>

Cu următorul CSS:

BA13C1DC5271EE6A4BE05CBBCD389AB8A79FA390

Când browserul dvs. redă această pagină, va arăta cam așa:

CSS stabilește culoarea de fundal a textelor

3. Alinierea textului

The aliniere text proprietatea setează alinierea orizontală a textului. Această valoare poate fi stânga , dreapta , centru , sau justifica .

Valoarea justify extinde fiecare linie de text, astfel încât toate ocupă aceeași lățime pe marginile din dreapta și din stânga. Utilizați următorul exemplu de cod pentru a explora aceste patru valori:

 <body> 
    <h1>Align Me Left</h1> 
 
    <h2> Align Me Right</h2> 
 
    <h3>Align Me center</h3> 
 
    <p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>  
 
    <p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p> 
 
</body>

Utilizați următorul CSS pentru a aplica diferite aliniamente:

 h1 { 
   text-align: left; 
} 
 
h2 { 
   text-align: right; 
} 
 
h3 { 
   text-align: center; 
} 
 
.ex4{ 
   text-align: justify; 
}

În browser, acesta va apărea astfel:

proprietăți de aliniere a textului pe text

4. Direcția textului

The direcția textului proprietatea definește direcția textului. Definiți direcția folosind proprietăți rtl (de la dreapta la stânga) sau ltr (de la stânga la dreapta). Acestea două specifică direcția în care doriți să curgă textul.

De exemplu, folosiți rtl atunci când lucrați cu limbi scrise de la dreapta la stânga, cum ar fi ebraica sau arabă. Să utilizați ltr pentru limbi scrise de la stânga la dreapta precum engleza.

Să ilustrăm acest lucru cu codul de mai jos:

 <body> 
    <div> 
         <p class='ex1'>This paragraph goes from right to left. The cursor 
        moves from right to left when you type more information on the 
        page.</p> 
 
         <p id="ex2">This paragraph goes from left to right. The cursor moves 
         from left to write when you type more information on the page!</p> 
    </div> 
</body>

Cu acest CSS însoțitor:

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

Rezultatul final va arăta cam așa:

text-direction aliniază textul în direcții diferite

5. Decorarea textului

The text-decor proprietatea stabilește aspectul liniilor decorative pe text. Este prescurtarea pentru text-decor-line, text-decor-culoare, text-decor-stil , și text-decor-grosime proprietate. Dacă nu doriți să aveți proprietatea asupra elementelor care au linkuri, utilizați text-decor: niciuna ;

Ar trebui să evitați sublinierea textului normal, deoarece stilul respectiv indică de obicei un link. Următoarea ilustrație prezintă câteva exemple în cod:

 <body> 
    <h1>Overline text decoration</h1> 
 
    <h2>Line-through text decoration</h2> 
 
    <h3>Underline text decoration</h3> 
 
    <p class="ex">Overline and underline text decoration.</p> 
 
    <p><a href="default.asp">This is a link</a></p> 
</body>

Puteți aplica diverse efecte de decor cu acest CSS:

 h1 { 
    text-decoration: overline; 
} 
 
h2 { 
    text-decoration: line-through; 
} 
 
h3 { 
    text-decoration: underline; 
} 
 
p.ex { 
    text-decoration: overline underline; 
} 
 
a { 
    text-decoration: none; 
}

Și vor afișa ceva de genul acesta:

efect de decorare a textului asupra textului

6. Transformarea textului

The text-transformare proprietate specifică tipul de caz în care apar literele. Acesta poate fi cu litere mari sau mici. De asemenea, îl puteți folosi pentru a scrie cu majuscule prima literă a fiecărui cuvânt:

jocuri pe care le puteți juca peste text

Următorul exemplu arată cum se face acest lucru în cod:

 <body> 
    <h1>Examples of text-transform property</h1> 
 
    <p class="uppercase">This sentence is in uppercase.</p> 
 
    <p class="lowercase">This sentence is in lower case.</p> 
 
    <p class="capitalize">Capitalize this text.</p> 
</body>

Fișierul CSS:

 p.uppercase { 
    text-transform: uppercase; 
} 
 
p.lowercase { 
    text-transform: lowercase; 
} 
 
p.capitalize { 
    text-transform: capitalize; 
}

Cu urmatorul rezultat:

text transform modifică textul în cazuri diferite

7. Spațiere între litere

The spațiul dintre litere proprietate specifică spațiul dintre litere din text. Următorul exemplu ilustrează cum să specificați diferite stiluri de spațiere.

Amazon a spus că pachetul a fost livrat, dar nu a fost

 <body> 
    <h1>Examples of Letter-spacing</h1> 
 
    <h2>This is heading 1</h2> 
 
    <h3>This is heading 2</h3> 
</body>

Utilizați pixeli sau alte unități de măsură în fișierul dvs. CSS:

 h2 { 
    letter-spacing: 7px; 
} 
 
h3 { 
    letter-spacing: -2px; 
}

Și textul rezultat va fi întins sau stors:

spațierea dintre litere permite spațiere diferită în text

8. Spațierea cuvintelor

The spațierea cuvintelor proprietate specifică spațiul dintre cuvintele dintr-un text. Browserele au o lungime standard pentru spațiul dintre cuvinte, dar puteți seta propria dvs. Următorul exemplu ilustrează cum să măriți sau să micșorați spațiul dintre cuvinte:

 <body> 
    <h1>Examples of the Word-spacing Property</h1> 
 
    <p>Normal word spacing.</p> 
 
    <p class="ex1">Large word spacing.</p> 
 
    <p class="ex2">Small word spacing.</p> 
</body>

Folosind acest CSS:

 p.ex1 { 
    word-spacing: 1rem; 
} 
 
p.ex2 { 
    word-spacing: -0.3rem; 
}

Puteți vedea clar efectul spațierii cuvintelor:

9. Înălțimea liniei

The inaltimea liniei proprietatea specifică distanța dintre linii dintr-un paragraf. Înălțimea liniei standard și implicită în majoritatea browserelor este de aproximativ 110% până la 120%. Următorul cod ilustrează cum să îl schimbați:

 <body> 
    <h1>Using line-height</h1> 
 
    <p> 
        Standard line-height. 
 
        Standard line-height. 
 
    </p> 
 
    <p class="small"> 
        Small small line-height. 
 
        Small line-height 
 
    </p> 
 
    <p class="big"> 
        Bigger line-height. 
 
        Bigger line-height. 
 
    </p> 
</body>

Folosind următorul CSS:

 p.small { 
    line-height: 0.7; 
} 
 
p.big { 
    line-height: 1.8; 
}

Puteți vedea rezultatele între fiecare rând din fiecare paragraf:

10. Text Shadow

The text-umbră proprietatea aplică umbre textului. Trebuie să specificați umbra orizontală și umbra verticală. Text-umbră poate include culoarea și raza de estompare. Să ilustrăm asta cu următorul cod:

 <body> 
    <h1>Examples of Text-shadow effect.</h1> 
 
    <h1 class="ex1">Text-shadow with color</h1> 
 
    <h1 class="ex2">Text-shadow with blur effect.</h1> 
</body>

Cu acest CSS:

 h1 { 
    text-shadow: 2px 2px; 
} 
 
.ex1 { 
    text-shadow: 2px 2px orange; 
} 
 
.ex2 { 
    text-shadow: 2px 2px 10px red; 
}

Va produce câteva efecte neobișnuite și interesante:

efect de umbră a textului asupra textului

De ce să învățați proprietățile de stilare a textului CSS?

CSS este coloana vertebrală a designului web modern. Fie în forma sa vanilie, fie în cadre, funcția de bază a proprietăților CSS este aceeași. Stăpânirea proprietăților de formatare a textului vă permite să creați interfețe de utilizator atractive și lizibile.

Cea mai recentă versiune de CSS, CSS3, introduce concepte noi, de la animații la aspecte cu mai multe coloane. Aceste concepte facilitează crearea de aplicații și documente profesionale.