Home » Articole » Articole » Calculatoare » Dezvoltarea web » Web design » Cascading Style Sheets » Stiluri de text în web design cu CSS

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

Ghid WordPress pentru dezvoltatori
Ghid WordPress pentru dezvoltatori

Resursa esențială care te va ghida pas cu pas în lumea complexă a platformei WordPress.

Nu a fost votat 3.52 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Ghid WordPress pentru începători
Ghid WordPress pentru începători

Descoperă arta gestionării site-urilor web cu WordPress!

Nu a fost votat 2.644.83 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Proiectarea, dezvoltarea şi întreţinerea siturilor web

Ghidul complet pentru proiectarea, dezvoltarea și întreținerea siturilor web, o resursă indispensabilă

Nu a fost votat 2.6410.55 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *