Formatarea textului CSS
CSS are multe proprietăți pentru stilizarea și formatarea textului, cum ar fi culoarea textului, alinierea, spațierea, decorarea și transformarea.
Culoarea textului CSS
Proprietatea color setează culoarea textului.
Culoarea poate fi un nume (precum red), o valoare HEX (precum #ff0000) sau o valoare RGB (precum rgb(255,0,0)).
Culoarea implicită a textului pentru o pagină este setată în selectorul body.
Exemplu
Textul corpului este albastru, <h1> este verde, iar <h2> este roșu.
<h1> verde și <h2> roșu. Adaugă un titlu de fiecare nivel și un paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
color: blue;
}
h1 {
color: green;
}
h2 {
color: red;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is an ordinary paragraph. The body text color is blue.</p>
</body>
</html>
Culoarea textului și culoarea de fundal
Poți seta atât background-color, cât și color ale unui element.
Important: Contrastul ridicat contează pentru persoanele cu probleme de vedere, așa că păstrează întotdeauna un contrast bun între culoarea textului și fundal.
Exemplu
Corpul, titlul și div-ul combină fiecare o culoare de fundal cu o culoare de text.
<style>, dă corpului (body) un fundal gri deschis și text albastru, elementului <h1> un fundal negru și text alb, iar unui <div> un fundal albastru și text alb. Adaugă un titlu, un div cu text și un paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<div>This is a div with a blue background and white text.</div>
<p>This is a paragraph. The body text is blue on a light grey background.</p>
</body>
</html>