Stiluri de text în web design cu CSS

Deși următorul nostru exemplu pare că se aplică mai mult fontului decât textului, o modalitate bună de a vă aminti ce anume doriți să utilizați în regulă este dacă afectul schimbă sau nu modul în care apar literele. Dacă o fac, probabil că doriți font. Dacă nu, atunci probabil că doriți text ca în următoarele exemple.

În primul rând, ați putea dori să adăugăm spațiile de referință înapoi în definiția paragrafului nostru pentru a le face să pară mai mult ca un document scris. De asemenea, ne putem muta textul în elementul conținător, setându-l la stânga (implicit), la dreapta, la centru sau lărgit pentru a se potrivi cu așlinierea stânga-dreapta:

<style>
p {
text-indent:15px;
text-align:justify;
}
</style>
<p>Acesta este paragraful nostru pentru a demonstra unele dintre lucrurile pe care le putem face textului și fontului prin utilizarea CSS. Acesta este paragraful nostru pentru a demonstra unele dintre lucrurile pe care le putem face textului și fontului prin utilizarea CSS. Acesta este paragraful nostru pentru a demonstra unele dintre lucrurile pe care le putem face textului și fontului prin utilizarea CSS.</p>

Acesta este paragraful nostru pentru a demonstra unele dintre lucrurile pe care le putem face textului și fontului prin utilizarea CSS. Acesta este paragraful nostru pentru a demonstra unele dintre lucrurile pe care le putem face textului și fontului prin utilizarea CSS. Acesta este paragraful nostru pentru a demonstra unele dintre lucrurile pe care le putem face textului și fontului prin utilizarea CSS.

Pe lângă ajustarea fontului în sine, îl putem decora cu mai multe efecte, cum ar fi tăierea lui, sublinierea sau specificarea că nu ar trebui să fie decorat, ceea ce este util în special în eliminarea liniilor implicite de sub linkuri:

NOTE SUPLIMENTARE: Ordinea este importantă! Regulile de stil activ trebuie să vină după regulile de trecere cu mouse-ul, iar hoverul trebuie să vină după link și vizitat! Deoarece un link peste care trece cu mouse-ul poate să fi fost deja vizitat, iar linkul activ poate fi cel cu trecerea cursorului pe el, acest lucru asigură ordinea corectă de aplicare a stilului.

<style>
.strikeOut{text-decoration:line-through;}
.titles{text-decoration:underline;}
a {text-decoration:none;}
</style>
<span class="strikeOut">Textul pe care vrem să îl tăiem</span><br/>
<span class="titles">Hitchiker's Guide to the Galaxy</span><br/>
<span><a href="">Un text fără nicio decorare</span>

Textul pe care vrem să îl taiăm

Hitchiker’s Guide to the Galaxy

Un text fără nicio decorare

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu