12

Curs 2

Unităti de măsură în CSS

În CSS pentru exprimarea dimensiunilor se folosesc diverse unităţi de măsură: px, pt, pc, %, em, ex, in,
mm, cm. Importanţă practică au însă doar următoarele:

1. px – pixeli (puncte ecran). Exemplu: 14px. Pentru majoritatea aplicaţiilor de navigare, mărimea
normală, implicită a fontului paragrafelor (p) este de 16px.

2. em – este o unitate adoptată din domeniul tipografiei şi reprezintă mărimea curentă a fontului.
De exemplu 2em înseamnă de două ori mărimea curentă. Raportarea se face permanent la
mărimea curentă a fontului din blocul în care dimensiunea 2em este folosită. Dacă de exemplu
pentru elementul html mărimea este lăsată cea implicită, (16px), pentru body (inclus în html)
este impusă de 0.75em (ar fi 12px) şi pentru paragrafe (p, evident incluse în body) este impusă
mărimea 0.875em, mărimea reală în pixeli a fontului paragrafelor va fi 0.75*0.875*16px=10.5px.

Această unitate este scalabilă. Ea permite modificarea proporţională a mărimii tuturor fonturilor
când cititorul paginii web modifică mărimea fontului de bază folosind facilităţile browser-ului (Ctrl +
pentru zoom+ respectiv Ctrl – pentru zoom -);

3. rem (root em) – permite raportarea mărimilor fonturilor folosite la o singură mărime de font,
respectiv cea impusă pentru elementul html. Unitatea este introdusă în CSS3.

4. % - procent din mărimea normală. Se poate folosi în loc de em (100% = 1em) dar se utilizează
mai ales la definirea dimensiunilor blocurilor în care este divizată pagina.

Observaţie: Mărimea normală, implicită a textului pentru majoritatea browser-elor este de 16px. Deci
1em = 16px. Evident, dacă nu se realizează o scalare (zoom+ sau -). Calculând în pixeli şi neglijând
efectul de moştenire, o variantă de exprimare a mărimii în em a fonturilor ar putea fi:

 h1: 1.25em (20 px);

 h2: 1.125em (18 px)

 h3 1em (16 px)

 textul normal (p): 0.875em (14px) sau 0.75em (12 px)

 textul scris mic (subtext, note de picior s.a.): 0.625em (10 px).

Pentru rem se poate gândi şi o variantă mai simplu de utilizat, astfel:

 html: mărimea de referinţă, 0.625rem (nescalat înseamnă 10px);

 13

 textul normal (p): 1.2rem sau 1.4rem (fără scalare dimensiunile sunt 12px sau 14px)

 h3: 1.6rem (16 px), etc.

Pentru definirea mărimii fontului se foloseşte proprietatea font-size. Exemple:

html {font-size: 0.625rem;} /* pt. elementul html s-a impus 10px */

h1 {font-size: 2rem;} /* 20 px */
p {font-size: 1.4rem;} /* 14 px */

Culori

În CSS culoarea se exprimă prin codul acesteia exprimat în hexazecimal sau folosind expresia RGB(r, v,
a).

Codul hexazecimal va fi precedat de '#'. Codul areformatul #rrggbb, valorile componentelor culorii fiind
definite în ordinea roşu (rr), verde (gg) şi albastru (bb). Exemple:

#ff0000 sau color:red sau color:RGB(255,0,0)

#00ff00 sau color: green sau color: RGB(0,255,0)

#0000ff sau color:blue sau color:RGB(0, 0, 255)

#ffff00 sau color: yellow sau color:RGB(255,255,0)

#00ffff sau color: aqua sau color:RGB(0,255,255)

#ff00ff sau color: magenta sau color:RGB(255,0,255)

#000000 sau color:black sau color:RGB(0,0,0)

#ffffff sau color:white sau color:RGB(255,255,255)

Notă: Folosind codificarea prezentată se pot crea 256x256x256 culori distincte.

Exemplu de stilizare a unui elemnt h1:

h1 {font-sixe:125em; color:RGB(192,0,0);}

Codul zecimal (RGB) al unei culori poate fi obţinut şi folosind fereastra standard din Windows.
 14

Observaţie: CSS permite şi creare de zone în care culoarea de umplere are un oarecare grad de
transparenţă. Astfel de culori se pot defini folosind espresia RGBA(rrr,ggg,bbb,a). Ultima valoare, a
(prescurtare de la alpha), indică transparenţa şi poate lua valori între 0 (perfect transparent) şi 1
(complet opac). Exemplu:

h1 { font-sixe:125em; color:#00FF00; background-color:RGBA(255,255,255,0.35);}

Fonturi

Aspectul fontului se defineşte folosind proprietatea font-family. Valorile obişnuite sunt:

 font-family:"Times New Roman", Times, serif

 font-family:Tahoma, Verdana, Arial, sans-serif.

Browser-ul va încerca să aplice fonturile în ordinea dată. În lipsa fonturilor precizate se va folosi unul
dintre fonturile din familia indicată (serif sau sans-serif).

Diferenţa dintre familiile serif şi sans-serif rezultă din figura următoare.

 15

Notă: Setul de fonturi normale poate fi extins prin folosirea unor fonturi din Internet sau adăugate în
site. Se poate accesa colecţia de fonturi a companiei Google (http://www.google.com/fonts). Pentru a
folosi în site o familie de fonturi se parcurg paşii următori:

a) Se accesează http://www.google.com/fonts şi se alege fontul potrivit. Apoi se apasă butonul

Add to Collection din caseta de prezentare a fontului.

b) Se selectează opţiunea Use (în partea de jos a ferestrei):

c) În fereastra afişată se parcurg paşii propuşi:

 16

Exemplu: Pentru a folosi familia de fonturi Zeyda (prezentat în imagine) se va adăuga ansamblului de
reguli de stilizare regula suplimentară:

@import url(http://fonts.googleapis.com/css?family=Zeyada);

Pentru a folosi noul font la scrierea paragrafelor documentului HTML, elementul p va fi stilizat folosind
regula următoare:

p {font-family: 'Zeyada', cursive;}

Alte proprietăţi legate de fonturi

 font-style poate fi normal, italic sau oblique:

p {font-style:italic;}

 font-weight poate fi normal sau bold.

Ca prim exerciţiu de stilizare a unui document hipertext se propune realizarea unei pagini web
conţinând poezia Numai una, de George Coşbuc.

Rezolvare:

Poezia poate fi descărcată din Internet. Primele două strofe sunt următoarele:

Pe umeri pletele-i curg râu

Mlădie, ca un spic de grâu,
Cu șorțul negru prins în brâu,
O pierd din ochi de dragă.
Și când o văd, îngălbenesc;
Și când n-o văd, mă-mbolnăvesc,
Iar când merg alții de-o pețesc,
Vin popi de mă dezleagă.

La vorbă-n drum, trei ceasuri trec

Ea pleacă, eu mă fac că plec,
Dar stau acolo și-o petrec
Cu ochii cât e zarea.
Așa cum e săracă ea,
Aș vrea s-o știu nevasta mea,
Dar oameni răi din lume rea
Îmi tot închid cărarea.
 17

Pentru codificare se va deschide Notepad++ şi se va tasta conţinutul paginii:

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Numai una!</title>
</head>
<body>
<h1>Numai una!</h1>
<p>De George Coșbuc</p>
<p>Pe umeri pletele-i curg râu
Mlădie, ca un spic de grâu,
 18

Cu șorțul negru prins în brâu,

O pierd din ochi de dragă.
Și când o văd, îngălbenesc;
Și când n-o văd, mă-mbolnăvesc,
Iar când merg alții de-o pețesc,
Vin popi de mă dezleagă.</p>
<p>La vorbă-n drum, trei ceasuri trec
Ea pleacă, eu mă fac că plec,
Dar stau acolo și-o petrec
Cu ochii cât e zarea.
Așa cum e săracă ea,
Aș vrea s-o știu nevasta mea,
Dar oameni răi din lume rea
Îmi tot închid cărarea.</p>
</body>
</html>

După salvare pe disc şi afişare în fereastra browser-ului favorit (se selectează în meniul Run opţiunea
Launch in IE sau alta, în funcţie de browser-ul dorit) se obţine o primă versiune a paginii:
 19

Rezultatul nu este tocmai satisfăcător deoarece browser-ul nu ia în considerare apăsarea tastei Enter.
Apăsarea acesteia pentru a trece la linie nouă este deci inutilă.

Totuşi strofele apar în blocuri de text diferite deoarece sunt conţinute în elemente p separate.

Pentru a remedia modul de afişare a versurilor se va introduce după fiecare vers un element br (eng.
break).

Notă: Marcarea unui element br nu necesită o pereche de marcaje. Limbajul HTML de codificare a
documentelor hipertext a fost la un anumit moment modificat astfel încât să fie compatibil cu
standardul XML de înregistrare a informaţiilor structurate, rezultatul fiind standardul de codificare
XHTML. În XML, deci şi în XHTML nu se acceptă marcaje fără pereche. Pentru marcarea elementelor
care nu necesită folosirea unei perechi de marcaje (ca br, img, meta, link şi multe altele), în XHTML se
foloseşte sintaxa <marcaj />. Deoarece HTML5 a apărut după XHTML, acesta permite folosirea
marcajelor XHTML (din considerente de compatibilitate). Deci elementul break (br) se poate marca
scriind fie <br>, fie <br />.

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Numai una!</title>
</head>
<body>
<h1>Numai una!</h1><p>De George Coșbuc</p>
<p>Pe umeri pletele-i curg râu <br>Mlădie, ca un spic de grâu, <br>
Cu șorțul negru prins în brâu,<br>O pierd din ochi de dragă.<br>
Și când o văd, îngălbenesc;<br>Și când n-o văd, mă-mbolnăvesc,<br>
Iar când merg alții de-o pețesc,<br>Vin popi de mă dezleagă.</p>
<p>La vorbă-n drum, trei ceasuri trec<br>Ea pleacă, eu mă fac că
plec,<br>
Dar stau acolo și-o petrec<br>Cu ochii cât e zarea.<br>
Așa cum e săracă ea,<br>Aș vrea s-o știu nevasta mea,<br>
Dar oameni răi din lume rea<br>Îmi tot închid cărarea.</p>
</body>
</html>

Rezultat:
 20

Observaţie: Pe lângă ignorarea apăsării tastei Enter, browser-ul ignoră şi spaţiile consecutive (reţine
doar unul) şi apăsările tastei Tab. Ca urmare, în fereastra aplicaţiei de editare conţinutul unei pagini
poate fi structurat prin indentarea blocurilor de text, ca şi în cazul programelor de calculator. Medii de
dezvoltare avansate (a fost menţionat deja NetBeans) pot realiza structurarea paginii automat, ca efect
al executării unei comenzi de formatare. Exemplu, în NetBeans:

Limitările specifice limbajului de codificare HTML5 opresc la acest nivel dezvoltarea paginii.

Observaţie: Pagina web afişată este denumită şi pagină nestilizată, deoarece este afişată folosind reguli
de afişare integrate în browser. De fapt ea este stilizată şi anularea stilului implicit înaintea impunerii
propriilor reguli va face obiectul unei activităţi aparte. Aspectul paginii nestilizate poate diferi de la un
browser la altul.

În continuare va trebui să impunem prin stiluri modul de afişare a informaţiei. Fiind vorba de o pagină
izolată, stilurile vor fi inserate la începutul paginii, în head :

<head>
<meta charset="UTF-8">
<title>Numai una!</title>
<style>
html {font-size: 0.625rem;} /* pt. elementul html s-a impus 10px */
h1 {
font-size: 2rem; /* 20 px */
color:RGB(192,0,0);
font-style: italic;
font-family:Tahoma, Verdana, sans-serif;
}

p {font-size: 1.4rem;} /* 14 px */
p {
font-size: 1.4rem;
font-style: italic;
 21

font-family:Tahoma, Verdana, sans-serif ;

}
</style>
</head>

Rezultat:

Dacă stilurile sunt mutate într-un fişier separat denumit stil.css plasat în acelaşi director cu pagina
poezie.html, elementul head va conţine un element link, astfel:

<head>
<meta charset="UTF-8">
<title>Numai una!</title>
<link href="stil.css" rel="stylesheet">
</head>

Observaţie: Scrierea regulilor în fişierul de stiluri se realizează de obicei pe mai multe linii, ca în
exemplul anterior. Această scriere permite vizualizarea mai uşoară a diferitelor proprietăţi.

Crearea în NetBeans a site-urilor Web

Pentru a crea în NetBeans (versiunea 7.4 sau superioară) un site trebuie selectată opţiunea File / New
Project...
 22

În fereastra afişată se va selecta HTML5 / HTML5 Application şi apoi Next>

În fereastra afişată în continuare se va preciza numele site-ului (Project Name) şi directorul în care se va
crea site-ul (D:\Proiecte). Apoi se va selecta Finish.
 23

Rezultat:

Pentru a vedea în browser-ul implicit pagina elementară generată se va selecta butonul .

În continuare se poate corecta codul paginii (se insererează varianta finală a codului creat deja în
Notepad++) şi se adăugă site-ului fişierul stil.css. Pentru aceasta se selectează File / New File... şi apoi, în
fereastra următoare se selectează HTML5 / Cascading Style Sheet.