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
- - Pentru adaugarea unui STYLE intern la un element se foloseste atributul style urmat de proprietati si valori, folosind urmatoarea sintaxa:
- <element style="proprietate:valoare; proprietate:valoare;"></element>
- - Exemplu:
<h4 style="color:#ff1111;">Exemplu h4</h4>
2. In antetul (header-ul) fisierului
- - In acest caz se adauga in sectiunea HEAD a documentului HTML urmatoarea sintaxa <style type="text/css"> ... </style>. Aceasta spune browser-ului ca sunt adaugate elemente de stil CSS.
- - Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri pentru mai multe elemente din pagina astfel sunt scrise o singura data si nu la fiecare element.
- - Proprietatile si valorile de sti CSS se introdul in acest element STYLE, dupa cum puteti vedea in exemplul urmator:
<!DOCTYPE html>
<html>
<head>
<title>titlu</title>
<style>
h2 {
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h2>Sunt o persoana buna</h2>
- Fericire.
<h2>Toata lumea e la fel</h2>
</body>
</html>
- - Conform acestui cod, toate textele "h2" din pagina vor avea culoarea albastra si vor fi subliniate.
3. Extern
- - Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un fisier extern special, de obicei cu extensia "css" (pe care il putem construi cu un editor de simplu texte gen Notepad).
- - Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singura data. In plus ajuta la micsorarea ca marime (in bytes) a documentului HTML care astfel se incarca mai repede.
- - In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile dorite, NU se mai adauga eticheta "style".
- Exemplu de model pentru creare unui fisier ".css" :
- Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si se salveaza fisierul cu extensia ".css"
a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}
a:visited {
color:#008080;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
}
p {
font-size: 16pt;
line-height: 120%;
text-indent: 20px;
font-family: Calibry;
}
- Pentru a adauga acest stil CSS intr-o pagina web, adaugati in sectiunea HEAD a documentului HTML care va folosi acel fisier cu stiluri, (intre <head> ... </head>) urmatoarea comanda:
<link href="fisier.css" rel="stylesheet" type="text/css">
- - unde la "href" se scrie calea si numele fisierului css folosit.
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.
- Important: selectorul pt. "class" (aici "cuvant") in STYLE trebuie sa inceapa cu punct (.)
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"'
- Important: Pentru stilurile definite de ID, selectorul (aici "idh") trebuie sa inceapa cu #.
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
Ce tag adauga imagine in pagina web?
<div> <img> <span><img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS afiseaza textul inclinat?
font-style: italic; text-decoration: underline; font-weight: 500;#id {
font-style: italic;
}Clic pe functia jQuery care ascunde animat un element HTML.
click() hide() show()$(document).ready(function() {
$(".a_class").click(function(){ $(this).hide("slow"); });
});Clic pe functia definita corect in PHP.
fname function() {} function fname() {} function $fname() {};function fname($a, $b) {
echo $a * $b;
}Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).
have walked have been walking be walkingI have been walking for 5 hours.
- Merg pe jos de 5 ore.
Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.
será sería fuiYo fui entrenador.
- Am fost antrenor.