Culoarea textului poate fi setată folosind color. Se așteaptă să fie specificată o valoare de culoare.
p {
color: red;
}Ca valoare, puteți specifica cuvinte de culoare sau o valoare de culoare hexadecimală.
Setarea direcției de scriere
Prin proprietatea direction se poate forța direcția de scriere a elementelor. Este interesantă direcția de scriere inversă în contextul limbilor în care se scrie de la dreapta la stânga.
De asemenea, poate determina de ce parte conținutul mare este tăiat în caz de depășire.
• ltr – de la stânga la dreapta
• rtl – de la dreapta la stânga
Exemplul următor arată cum se poate utiliza proprietatea.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Aici au fost definite două clase.
<p class="normal">Text scris de la stânga la dreapta. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Text scris de la dreapta la stânga. 1 2 3 4 5 6 7 8 9 0</p>
Rezultatul arată astfel în browser:
Alinierea horizontală a textului
Prin proprietatea text-align se stabilește alinierea orizontală a paragrafelor și altor texte flotante sau elemente inline conținute în elemente bloc. Setarea implicită este alinierea la stânga.
• left – aliniere la stânga
• right – aliniere la dreapta
• center – centrat
• justify – aliniere ca bloc justificat
Un exemplu:
<p style="text-align:right;">
Bine ai venit
</p>
Rezultatul arată astfel:
Alinierea verticală
Prin proprietatea vertical-align se stabilește alinierea verticală a textului în cadrul unei linii raportată la înălțimea liniilor. Specificarea se referă întotdeauna la elementul părinte, care trebuie să fie un element inline. De asemenea, se poate alinia textul în cadrul tabelului.
Următoarele valori sunt disponibile:
• sub – subscript
• super – superscript
• baseline – aliniere pe linia de bază
• top – aliniere la marginea superioară a elementului părinte
• bottom – aliniere la marginea inferioară a elementului părinte
• middle – aliniere la mijloc între marginea superioară și cea inferioară a elementului părinte
• text-top – la marginea superioară a textului
• text-bottom – la marginea inferioară a textului
• Specificare în lungimi – o valoare pozitivă sau negativă deplasează elementul deasupra sau sub linia de bază
• Specificare în procente – o valoare pozitivă sau negativă deplasează elementul deasupra sau sub linia de bază
Un exemplu:
.baseline {
vertical-align: baseline;
}
Rețineți că valorile de la vertical-align sunt interpretate în mod foarte inegal de către diferitele browsere. Deci, ar trebui să testați rezultatele înainte de a publica paginile online.
Stabilirea decorațiunii textului
text-decoration este folosit pentru a atribui proprietăți suplimentare textelor sau linkurilor.
• none – fără decorații textuale
• underline – subliniat
• overline – supraliniat
• line-through – tăiat prin mijloc
• blink – clipitor
De asemenea, un exemplu:
a:link {
text-decoration: none;
}
Prin aceasta, linkurile paginii nu mai au subliniere.
De asemenea, se poate stabili explicit distanța între cuvintele individuale.
<span style="word-spacing:0.5em">Bine ați venit la PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Bine ați venit la PSD-Tutorials.de!</span>
Se așteaptă o valoare numerică. Specificările procentuale nu sunt posibile.
Asemănător cu word-spacing este și letter-spacing. Totuși, prin letter-spacing se stabilește distanța dintre literele individuale ale unui text. De asemenea, se permit valori numerice, dar nu se permit specificări procentuale.
<span style="letter-spacing:0.1em">Text exemplu cu distanță între caractere 0.1em</span><br> <span style="letter-spacing:0.3em">Text exemplu cu distanță între caractere 0.3em</span><br>
Prin proprietatea text-transform puteți stabili dacă textul va fi scris cu litere mari sau mici. Și asta independent de notația reală din sursă. De asemenea, se pot forța majuscule.
.klein {
text-transform: lowercase;
}În browser, rezultatul arată în felul următor:
Spații și întreruperi de linie
Proprietatea white-space stabilește modul în care spațiile și întreruperile de linie existente în codul sursă vor fi afișate în browser.
• normal - se introduce o întrerupere de linie automată. În plus, mai multe spații sunt unite într-una singură.
• pre - întreruperile de linie sunt afișate așa cum sunt în codul sursă.
• nowrap - nu se aplică o întrerupere de linie automată.
• pre-line - mai multe spații sunt unite într-una singură. În plus, se face o întrerupere dacă caseta de afișare nu este suficient de mare.
• pre-wrap - se face o întrerupere dacă caseta de afișare nu este suficient de mare.
Un exemplu pentru acestea:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>În browser, rezultatul arată astfel:
Implementarea umbrelor
Prin proprietatea text-shadow puteți implementa aruncarea unei umbre pentru text. Rețineți că această proprietate este acceptată doar de browsere relativ moderne. Browserele care nu pot interpreta text-shadow afișează textul fără umbră.text-shadow este folosit în felul următor:
text-shadow: hV vV blur #xxxxxx;
Și semnificația valorilor este următoarea:
• hV - Deplasare orizontală
• vV - Deplasare verticală
• blur - Claritate
• #xxxxxx - Culoarea umbrei
Exemplul următor arată o utilizare tipică pentru text-shadow.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Clasa definită este aplicată în continuare pe un titlu de prim ordin.
<h1 class="schatten">PSD-Tutorials.de</h1>
Și aici o privire asupra rezultatului:
După cum s-a descris deja, puteți folosi text-shadow fără probleme, deoarece lipsa interpretării din partea browserelor nu are efecte negative. Textul va fi pur și simplu afișat fără umbră.
