Culorile sunt foarte importante pentru a oferi un aspect și o imagine bună site-ului dumneavoastra. Puteți specifica culorile la nivel de pagină folosind eticheta <body> sau puteți seta culori pentru etichete individuale folosind atributul bgcolor
Eticheta <body> are următoarele atribute care pot fi utilizate pentru a seta diferite culori -
bgcolor - setează o culoare pentru fundalul paginii.
text - stabilește o culoare pentru textul corpului.
alink - setează o culoare pentru legăturile active sau legăturile selectate.
link - stabilește o culoare pentru textul legat.
vlink - setează o culoare pentru legăturile vizitate - adică pentru textul legat pe care ați făcut deja clic.
Puteți seta culoarea de fundal pentru elementele HTML:
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Cum sa adaugati background-color? exemplu</title>
</head>
<body>
<h1 style="background-color:yellow;">Buna Romania</h1>
<p style="background-color:tomato;"><strong>Programare Web.<br />
Curs programare webdesign online gratuite - designer pagini web.</strong><br />
<strong>Invata de la zero</strong> fundamentele programarii web PHP+MySQL<br />
si dezvoltarea temelor WordPress pentru cariera ta de web developer (Curs pentru incepatori).<br />
<strong>Invata inca de la prima linie de cod</strong> cum sa realizezi site-uri web eficient,<br />
cum sa construiesti siteuri web pentru telefoane mobile, cum sa scrii cod si sa oferi performanta<br />
prin ceea ce faceti: HTML5, CSS6, PHP, Baze de date, Elemente jQuery si optimizare SEO de baza.<br />
In cadrul acestui curs vei incepe de la zero pentru a intelege fundamentele programarii web.<br />
Pe tot parcursul cursului vei lucra practic la dezvoltarea unui site dinamic.</p>
</body>
</html>
Culoarea textului (Text Color)
Puteți seta culoarea textului:
Exemplu 2:
<!DOCTYPE html>
<html>
<head>
<title>Culoarea textului (Text Color)</title>
</head>
<body>
<h1 style="color:Tomato;">Cursuri web design online</h1>
<p style="color:DodgerBlue;">Curs de introducere in programare cu specializarea Web Development. Acest curs are rolul de a va introduce pas cu pas in Web Design (CSS).</p>
<p style="color:MediumSeaGreen;">Cursuri web profesionale atât pentru începători cât și pentru cei cu experiență.</p>
</body>
</html>
Border Color
Puteți seta culoarea marginilor: (You can set the color of borders:)
Exemplu 3:
<!DOCTYPE html>
<html>
<head>
<title>Culoarea marginilor, chenarului</title>
</head>
<body>
<h1 style="border:2px solid Tomato;">CURS PROGRAMARE WEB - HTML, CSS, PHP SI MYSQL</h1>
<h2 style="border:2px solid DodgerBlue;">Beneficiile studierii cursului de Design Web</h2>
<h3 style="border:2px solid Violet;">Curs de creare site-uri web în Dreamweaver</h3>
</body>
</html>
W3C Standard 16 Colors
Iată lista celor 16 numelor de culori standard W3C și este recomandat să le utilizați.
| Black | Gray | Silver | White | ||||
| Yellow | Lime | Aqua | Fuchsia | ||||
| Red | Green | Blue | Purple | ||||
| Maroon | Olive | Navy | Teal |
HTML Colours - Hex Codes
Un hexadecimal este o reprezentare de 6 cifre a unei culori. Primele două cifre (RR) reprezintă culoarea roșie, următoarele două sunt de culoare verde (GG), iar ultimele sunt de culoare albastră (BB).
O valoare hexadecimală poate fi preluată de pe orice software grafic precum Adobe Photoshop, Paintshop Pro sau MS Paint.
Fiecare cod hexadecimal va fi precedat de un semn de lire sau hash #. Urmează o listă cu câteva culori folosind notație hexadecimală.
| Color | Color HEX |
|---|---|
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #C0C0C0 | |
| #FFFFFF |
Culori HTML - Valori RGB
Această valoare de culoare este specificată folosind proprietatea rgb (). Această proprietate are trei valori, una pentru roșu, verde și albastru. Valoarea poate fi un număr întreg între 0 și 255 sau un procent.
Notă - Nu Toate browserele acceptă proprietatea de culoare rgb (), de aceea este recomandat să nu o folosești.
| Color | Color RGB |
|---|---|
| rgb(0,0,0) | |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,255,0) | |
| rgb(0,255,255) | |
| rgb(255,0,255) | |
| rgb(192,192,192) | |
| rgb(255,255,255) |
Exemplu 4:
<!DOCTYPE html>
<html>
<head>
<title>Hex Codes and Valori RGB pentru culori</title>
</head>
<body>
<h2 style="background-color:rgb(255, 99, 71);">background-color:rgb(255, 99, 71)</h2>
<h2 style="background-color:#ff6347;">background-color:#ff6347</h2>
<h2 style="background-color:hsl(9, 100%, 64%);">background-color:hsl(9, 100%, 64%)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.5);">background-color:rgba(255, 99, 71, 0.5)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.5);">background-color:hsla(9, 100%, 64%, 0.5)</h2>
</body>
</html>
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.