Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets - CSS). Acestea ajuta la afisarea grafica si incadrarea continutului in pagina.
Modelele de stiluri pot fi aplicate aproape oricarui element HTML, folosind proprietati si valori specifice codului CSS, unele din ele sunt prezentate in tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate in mai multe moduri:

1. Intern - direct in eticheta HTML

2. In antetul (header-ul) fisierului

3. Extern


Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de tipuri diferite. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor HTML la care vrem sa aplicam un anumit stil.
Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class" pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru un singur element HTML.
Exemplu pentru "class":
<!DOCTYPE html> 
<html>
<head>
<title>Titlul</title>
<style>
.cuvant {
color:#1111fe;
dext-decoration:underline;
}
</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>
- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adauga comanda class="cuvant", celelalte elemente nefiind afectate.
Exemplu pentru "id":
<!DOCTYPE html> 
<html>
<head>
<title>Titlul</title>
<style>
#idh {
color:#fe1111;
ext-decoration:overline;
text-align:center;
}
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
Am o viata fericita.
<h2>Alt text ...</h2>
</body>
</html>
- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care contine 'id="idh"'
Incercati singuri aceste exemple pentru a vedea rezultatul.

In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate cu STYLE
Atribut Descriere Valori
background imagini sau culori de fundal URL-ul (imaginii) sau culori date prin nume sau valoare RGB
Color culoarea textului nume sau valoare RGB
font-family tipul fontului Numele fontului sau al familiei de fonturi
font-size dimensiunea fontului data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
font-style text cursiv normal, italic
font-weight grosimea fontului extra-light, light, demi-light, medium, demi-bold, bold, extra-bold
line-height distanta dintre liniile de baza ale randurilor data in puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%)
margin-left distanta fata de marginea din stanga a paginii data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-right distanta fata de marginea din dreapta a paginii data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-top distanta fata de textul precedent sau fata de marginea de sus a paginii data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
text-align alinierea textului left(stanga), center(centru), right(dreapta), justify
text-decoration evidentierea textului none(nimic), underline(subliniat), italic(cursiv), line-through(taiat)
text-indent distanta primului rand fata de marginea din stanga data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-style tipul chenarului none, groove, dotted, dashed, solid, double, ridge, inset, outset
border-width grosimea chenarului data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-color culoarea chenarului nume sau valoare RGB
72 pt=1 inch = 25,4 mm;
un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea superioara a literei N sau h si partea inferioara a literei y sau j

- Pentru aplicarea unui stil css asupra unei portiuni dintr-un text, se foloseste eticheta <span> </span>, ca in exemplu urmator:
O fraza <span class="cls"> cu orice text</span> si voie buna.
- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar portiunea de text inclusa intre tag-ul "<span>".
 

Pentru mai multe informatii despre lucru cu stiluri CSS, studiati lectiile de la Curs CSS.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Lucrul cu stiluri CSS

Last accessed pages

  1. CSS3 - Background proprietati noi (256)
  2. Curs CSS Online Tutoriale CSS3 (1701)
  3. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (14886)
  4. Creare link-uri (2886)
  5. Cursuri Limba Italiana (913)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1939)
  2. Creare si editare pagini HTML (1110)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1033)
  4. Curs HTML gratuit Tutoriale HTML5 (949)
  5. Coduri pt culori (778)