Lucrul cu stiluri CSS

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.

<<-Creare formulare -- Tag-urile DIV si SPAN->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?

href src rel

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Care din aceste coduri CSS ascunde elementul in pagina?

display: none; display: inline; position: relative;

#id {
  display: none;
}

Ce instructiune opreste executia lui while() sau for() ?

continue prompt() break

for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}

Indicati functia utilizata pentru a crea constante.

define() include() defined()

define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;

Care este forma de plural a substativului "class" (clasa)?

classes clases clasis

This school has three classes.
- Scoala asta are trei clase.

Care este pluralul substativului "voz" (voce)?

vose voze voces

Escuché dos voces.
- Am auzit doua voci.