Atributul HTML Style
Atributul style adaugă stiluri unui element, precum culoare, font și dimensiune. Îl setezi pe tag-ul de deschidere al elementului, dându-i o proprietate CSS și o valoare CSS (vezi sintaxa de mai jos). Vei afla mai multe despre CSS mai târziu în acest tutorial.
Exemplu
Paragrafe stilizate cu culoare și dimensiune folosind atributul style.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro Styles</title>
</head>
<body>
<p style="color:red;">Sunt Roșu</p>
<p style="color:blue;">Sunt Albastru</p>
<p style="font-size:50px;">Sunt Mare</p>
</body>
</html>
Sintaxa style
Forma atributului style.
<tagname style="property:value;">
Culoarea de Fundal
Proprietatea CSS background-color setează culoarea de fundal a unui element. Pune-o pe <body> pentru a colora întreaga pagină, sau pe un singur element pentru a colora doar acel element.
Pagina întreagă
Setarea fundalului paginii la powderblue.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Page</title>
</head>
<body>
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>
</body>
</html>
Elemente individuale
Culori de fundal diferite pe un titlu și un paragraf.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Elements</title>
</head>
<body>
<h1 style="background-color:powderblue;">Acesta este un titlu</h1>
<p style="background-color:tomato;">Acesta este un paragraf.</p>
</body>
</html>
Culoarea Textului
Proprietatea CSS color setează culoarea textului unui element.
Exemplu
Un titlu albastru și un paragraf roșu.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Color</title>
</head>
<body>
<h1 style="color:blue;">Acesta este un titlu</h1>
<p style="color:red;">Acesta este un paragraf.</p>
</body>
</html>
Fonturi
Proprietatea CSS font-family setează fontul folosit pentru un element.
Exemplu
Un titlu în verdana și un paragraf în courier.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts</title>
</head>
<body>
<h1 style="font-family:verdana;">Acesta este un titlu</h1>
<p style="font-family:courier;">Acesta este un paragraf.</p>
</body>
</html>
Dimensiunea Textului
Proprietatea CSS font-size setează dimensiunea textului unui element.
Exemplu
Un titlu mare și un paragraf ușor mărit.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Size</title>
</head>
<body>
<h1 style="font-size:300%;">Acesta este un titlu</h1>
<p style="font-size:160%;">Acesta este un paragraf.</p>
</body>
</html>
Alinierea Textului
Proprietatea CSS text-align setează alinierea orizontală a textului unui element.
Exemplu
Un titlu și un paragraf centrate.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Align</title>
</head>
<body>
<h1 style="text-align:center;">Titlu Centrat</h1>
<p style="text-align:center;">Paragraf centrat.</p>
</body>
</html>
Rezumatul Capitolului
Pe scurt: folosește atributul style pentru a stiliza elementele, background-color pentru culoarea de fundal, color pentru culoarea textului, font-family pentru fonturi, font-size pentru dimensiunea textului, și text-align pentru alinierea textului.