Stiluri CSS in HTML

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.
Pana la acea data, forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si cu atributele sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricarei etichete 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"
<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!--
.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"
<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!--
#idh {
    color:#fe1111;
    dext-decoration:overline;
    text-align:center;
}
-->
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<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 caractere.
- 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.

Elemente speciale meta embed ... <<-- Anterior --- Urmator -->> Tag-urile DIV si SPAN

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Lucrul cu stiluri CSS - Tutoriale HTML