Documentatie Css

Elemente de baz ale limbajului CSS
Cascading Style Sheets (CSS) este un limbaj de formatare a paginilor WEB, utilizat
pentru a descrie modul de prezentare a documentelor scrise ntr-un limbaj bazat pe
marcaje (HTML, XML etc.). Fiierele CSS permit separarea coninutului HTML propriu-
zis al unui document, de stilul de afiare/formatare n pagin al acestuia. Codul HTML
se utilizeaz, de obicei, doar pentru aranjarea coninutului n pagin, iar detaliile care
in de afiare (culori, fonturi, fundaluri, margini etc.) se realizeaz cu ajutorul
instructiunilor CSS, acestea aplicndu-se suplimentar peste codul HTML, n cadrul
unui site Web. Cu alte cuvinte, CSS realizeaz separarea prezentrii paginii de structura
sa efectiv.
Aplicarea foilor de stil asupra codului HTML se poate face n mai multe moduri,
putndu-se vorbi de:
- stiluri interne;
- stiluri externe;
- stiluri n linie (inline);
- clase CSS.
Stiluri interne
n cazul utilizrii stilurilor interne, codul CSS se plaseaz n interiorul fiecrei

pagini HTML pe care se dorete s se aplice stilurile respective, ntre tag-urile
<head> si </head>, dup cum se poate urmari n continuare:
<head>
<title>Un exemplu de utilizare stiluri interne</title>
<style type="text/css">Aici se definesc stilurile CSS</style>
</head>
Pentru exemplificare, se prezint un fisier HTML n care se utilizeaz stiluri

interne (fig. 1):
<html>
<head>
<title> Exemplu de utilizare a stilurilor interne!!! </title>
<style type="text/css">
table {
font-family: "Times New Roman";
font-size: 36px;
color: #FFFFFF;
background-color: #0099FF;
border: 4px double #0033FF;
text-align: center;
}
</style>
</head>
<body>
<br><br>
<table align="center">
<tr>
<td>
Exemplu de utilizare a stilurilor interne!!!
</td>
</tr>
</table>
</body>
</html>
Fig.1 Exemplu folosire stiluri interne
Utiliznd aceasta metod de aplicare a CSS-urilor asupra codului HTML, dac se dorete
o schimbare a stilului de afiare (mrimea fontului, culoare, etc) modificarea va trebui
realizat n toate paginile care conin acel stil. innd cont de aceste aspect, aceast
metoda este indicata a fi folosit doar n situaia n care se dorete stilizarea un numr
mic de pagini, fiind destul de neproductiv o realizare a acestor modificri pe zeci sau
chiar sute de pagini ale unui site WEB.
Stiluri externe
Un fiier CSS extern poate fi scris cu orice editor simplu de text (Notepad,
Wordpad, etc) sau cu editoare specializate (gen Dreamweaver). Fiierul CSS nu
conine cod HTML, ci doar cod CSS i trebuie salvat cu extensia .css.
Referirea fiierului extern CSS n paginile HTML se face prin plasarea unui
tag link (legatur), n seciunea <head> </head> a fiecrei pagini n cadrul creia se
dorete aplicarea stilul respectiv, avnd forma urmtoare:
<link rel="stylesheet" type="text/css" href="Calea catre fisierul.css" />
n continuare, se prezint un exemplu de referire a unui fiier extern .css

ntr-o pagin HTML:
<html>
<title> Exemplu de utilizare a stilurilor externe!!! </title>
<head>
<link href="external-css.css" rel="stylesheet"
type="text/css">
</head>
<body>
Exemplu de utilizare a stilurilor externe in body!!!
<table>
<tr>
<td>
Exemplu de utilizare a stilurilor externe in tabel!!!
</td>
</tr>
</table>
</body>
</html>
Fiierul CSS referit i utilizat n pagina HTML anterioar (external-css.css), se

consider a avea urmtorul coninut exemplificativ (efectul utilizrii lui putndu-se
observa n figura 2):
body
{
font-family: "Courier";
font-size: 26px;
color:#000000;
background-color:#B3B3B3;
text-align: center;
}
table
{
font-family: "Edwardian Script ITC";
font-size: 46px;
color: #FFFFFF;
background-color: #0090FF;
border: 4px double #0033FF;
text-align: center;
}
Aceasta metod de utilizare a unor fiiere de stil externe, este preferat n
momentul n care un site WEB conine un numr mare de pagini utiliznd aceleai reguli
de stil, motivul fiind evident: atunci cnd se dorete modificare aspectului ntregului
site, este suficient doar o modificare ntr-o singur locaie, i anume - fiierului CSS
(efectul resimindu-se asupra tuturor paginilor din site care folosesc foaia de stil
respectiv). Astfel, printr-o singur operaie, se poate schimba rapid aspectul ntregului
site, indiferent de dimensiunea lui (numr de pagini).
Fig. 2. Exemplificare stiluri extern

Stiluri inline
Stilurile inline se definesc chiar n codul etichetei HTML aferente elementului care
se dorete a fi stilizat, dup cum se poate vedea n exemplul urmtor (fig.3):
<body>
<p style="color: #00defe; font-size: 24;">Titlul paginii</p>
<h2 style="font-size: 18;font-weight: bold; color: #ff5520;">Exemplu utilizare stiluri inline!!! </h2>
</body>
Fig.3. Exemplificare stiluri inline

Stilurile inline sunt mai puin utilizate, deoarece ele nu permit schimbri rapide
de stil pe mai multe fiiere n acelai timp, modificrile trebuind realizate pe fiecare
element n parte, i n fiecare pagin n parte.
Anterior au fost prezentate trei metode de aplicare a CSS-urilor asupra codului
HTML. n situaia n care, se folosesc dou sau chiar trei metode n acelai timp, se
pune ntrebarea: care este ordinea/prioritatea folosirii lor pentru o interpretare corect
de ctre browser? Rspunsul este: metodele se vor executa n cascad, n ordinea
urmtoare: prima oar -stilurile inline, urmate apoi de stilurile interne, iar n final -
stilurile externe, aceasta fiind i ordinea lor de prioritizare. Evident, un element deja
stilizat, spre exemplu, cu un stil linie, nu este restilizat de o regul de stil existent ntr-
un fiier CSS extern, acionnd imediat ulterior conform regulii de prioritizare anterior
enunate.
Clase CSS
Clasele CSS se utilizeaz pentru stilizarea n mod difereniat a unor mulimi de

tag-uri HTML (distribuite n una sau mai multe pagini WEB). Acest mod de lucru este
similar cu utilizarea stilurilor inline, avantajul major fiind acela c atunci cnd se dorete
efectuarea unei modificri de stil pe mai multe elemente/pagini, aceasta nu trebuie
efectuat individual la nivelul fiecrui element. Astfel, este suficient o modificare n
cadrul clasei CSS care definete stilurile respective, efectul acesteia rsfrngndu-se
asupra tuturor elementelor pe care acioneaz clasa respectiv.
Definirea unei clase CSS ncepe cu semnul punct (.), dup care urmeaz numele
clasei. Se recomand folosirea unor denumiri sugestive pentru numele clasei, care s
indice ce anume face stilul respectiv. O clas CSS poate fi folosit n cadrul unui fiier
HTML ori de cte ori este nevoie. Iat un exemplu de clas care stabilete dimensiunea
i culoarea unui text:
.text24albastru
{
font-size: 24px;
color: 00ddff;
}
Pornind de la exemplificarea din la paragraful Stiluri n linie, se prezint modul de de

definire i utilizare a unor clase CSS ntr-un document HTML, clasele fiind memorate ntr-un
fiier de stil extern:
- Fiierul HTML utiliznd stiluri externe bazate pe clase:

<head>
<title> Exemplu de utilizare a stilurilor in linie!!! </title>
<link href="claseCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="text24albastru">Titlu</p>
<h2 class="text18rosu">Exemplu utilizare stiluri in linie!!! </h2>
</body>
- Fiierul CSS (claseCSS.css) n care sunt definite cele dou clase (ambele
stiliznd texte, dar n mod diferit):
.text24albastru
{
font-size: 24px;
color:00ddff;
}
.text18rosu
{
font-size: 18px;
font-weight: bold;
color: ff3300;
}
Stilizarea obinut n cadrul fiierului HTML anterior prezentat este evident

identic cu cea obinut prin utilizarea stilurilor n linie (fig. 4 ).
Ca o concluzie, n contextul dezvoltrii unor aplicaii Web tot mai complexe,
coninnd un numr tot mai mare de pagini, i implicit de fiiere script, stilurile CSS
constituie la ora actual strategia consacrat, de maxim eficien, pentru formatarea
i designul primar al acestora.
Fig.4. Exemplificare clase
Meniuri create cu CSS
Una dintre aplicabilitile cele mai uzuale ale CSS-urilor const n crearea de
meniuri necesare navigrii ntr-o aplicaie, att foarte simple, ct i cu o complexitate
deosebit. Scheletul HTML (ca fundament al unui meniu) pe care sunt aplicate stilurile
CSS, consist n structuri de tip list (folosindu-se etichete pentru crearea unor liste
neordonate <ul>, mpreuna cu elementele lor constituente <li>), ncapsulate eventual ntr-
un DIV, respectiv hyperlink-urile aferente (ancore <a>). Din pcate dependena de
browser se face resimita i n cazul utilizrii de stiluri CSS, astfel nct (mai ales
pentru meniuri mai complexe), este foarte posibil ca un meniu care funcioneaz pe o
familie de browsere, s nu fie complet funcional pe o alta. ntr-un astfel de caz, soluia
de rezolvare const n apelarea suplimentar a unor scripturi JavaScript.
Exemplul urmtor, utiliznd doar CSS (fr elemente JavaScript), implementeaz un
meniu simplu (fr submeniuri vezi fig. 5), fiind funcional att pe Mozilla, ct i pe
Internet Explorer. Pentru crearea meniului s-a utilizat un fiier extern CSS, n care sunt
definite mai multe stiluri. Fiierul HTML (aferent unui meniu cu trei opiuni) are urmtorul
cod:
<html>
<head>
<link href="meniu-html.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav-menu">
<ul>
<li><a href="#">Optiune1</a></li>
<li><a href="#">Optiune 2</a></li>
<li><a href="#">Optiune 3</a></li>
</ul>
</div>
</body>
</html>
Fig.5. Meniu creat cu CSS
Fiierul implementnd stilurile externe CSS (meniu-html.css) conine urmtoarele

elemente de stilizare:
#nav-menu ul
{
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left; margin: 0 0.4;
background:#B3B3B3;
}
#nav-menu li a
{
background: url(background.jpg) #fff bottom left repeat-x; height: 2em;
line-height: 2em;
float: left; width: 9em; display: block;

border: 0.1em solid #dcdce9; color: #FFFFFF;
text-decoration: none; text-align: center;
}
n cadrul fiierului CSS se poate remarca referirea #nav-menu specificnd id-ul

elementului DIV (nglobnd ntreaga construcie a meniului). Cele trei stiluri #nav-
menu ul, #nav-menu li, #nav-menu li a, se refer la formatarea listelor (ul) avnd
ca printe DIV-ul (#nav-menu), a elementelor listelor (li), respectiv a coninutului
ancorelor (a) , avnd ca printe elemente ale listei (li), care la rndul lor au ca printe
DIV-ul (#nav-menu).
Dei rulnd codul anterior pe Mozilla, unele stiluri ar putea prea inutile, o simpl
rulare pe Internet Explorer este relevant pentru a dovedi necesitatea lor! Spre
exemplificare, eliminarea stilului aferent elementelor din lista (#nav-menu li) conduce
pe Internet Explorer la un meniu de genul celui din fig. 6.
Fig. 6 Efect fr #nav-menu li rulare cu Internet Explorer
Un exemplu de meniu mai complex, avnd i sub-meniuri (drop-down menu),

este prezentat n cele ce urmeaz. ntregul cod, att lista HTML, ct i stilurile CSS (ca
stiluri interne), sunt integrate ntr-un acelai fiier HTML. Efectul fiecrui nou element
CSS succesiv adugat este prezentat n figurile 7-14. (fiecare figur fiind alturat
secvenei de cod CSS nou adugat).
<html>
<head>
<link href="meniu-drop-down-html.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li><a href="#">Unu</a></li>
<li><a href="#">Doi</a>
<ul>
<li><a href="#">Doi-1</a></li>
</ul>
</li>
<li><a href="#">Trei</a>
<ul>
<li><a href="#">Trei-1</a></li>
<li><a href="#">Trei-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
<style type="text/css">
ul
{
font-family: Arial, Verdana; font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
Fig.7 Stilizare liste <ul>
ul li
{
display: block; position: relative; float: left;
}
Fig.8 Stilizare elemente liste <li>

(avnd ca printe liste <ul>)
li ul
{
display: none;
}
Fig.9. Stilizare liste <ul> (doar cele

avnd ca printe elemente <li>) n
cazul de fa ascunderea lor
ul li a
{
display: block;
text-decoration: none; color: #ffffff;
border-top: 1px solid #ffffff; padding:
5px 15px 5px 15px;
background: #1e7c9a; margin-left: 1px;
white-space: nowrap;
}
Fig.10 Stilizare ancore <a> avnd ca
printe elemente list <li>, care la
rndul lor au ca printe liste <ul>
(practic toate ancorele meniului,
inclusiv cele ascunse)
ul li a:hover
{
background: #3b3b3b;
}
// hover element selector ataat unei
etichete HTML, genernd, n
momentul n care mouse-ul se
deplaseaz deasupra acesteia, o
stilizare fie a acesteia, fie a altei etichete.
// ul li a:hover - cnd mouse-ul se
Fig.11. Stilizare elemente <li> (cele
deplaseaz deasupra unei ancore <a>
vizibile) avnd ca printe liste <ul> -
(etichet selectat), modific fundalul
(setare culoare background/ fundal la
ancorei avnd ca printe un element
deplasare mouse deasupra ancorelor
<li>, care la rndul face parte dintr-o
<a>)
list <ul>
li:hover ul
{
display: block; position: absolute;
}
// li:hover ul - cnd mouse-ul se

deplaseaz deasupra unui element <li>,
afieaz elementul <ul> (avnd ca
printe acel <li>)
Fig.12 Afiare submeniu la o
deplasare mouse deasupra unui element
<li> avnd ca printe o list <ul>
(practic anuleaz ascunderea)
li:hover li { float: none;

font-size: 20px;
}
// li:hover li - cnd mouse-ul se

deplaseaz deasupra unui element <li>,
stilizeaz acel <li> (avnd ca printe alt
<li>)
//aici s-ar putea opri dezvoltarea
meniului Fig.1.13 La o deplasare deasupra
unui element list < li> - setare scris mai
mare
li:hover a { background: #00ff00;
color: #ff00ff;
}
//simple schimbri de culori (nu sunt

absolut necesare)
</style>
Fig. 14 Schimbarea culorilor
Fig.1.14.h La o deplasare deasupra

unui <li> - setare culoare scris i fundal
ancor <a>
Primul exemplu din acest paragraf fcea referire la o etichet DIV, definind o
diviziune (seciune) a unui document HTML, des utilizat mpreun cu elemente CSS.
Oarecum echivalent cu DIV, eticheta SPAN permite i ea o ncapsulare a unor elemente
ntr-o seciune a unei pagini HTML. Deosebirile majore ntre cele dou etichete sunt
urmtoarele:
- DIV - permite formatarea ntregii seciuni delimitate (folosind stiluri CSS);
- SPAN - nu permite o formatare a seciunii delimitate de el, ci doar a
elementelor (de regul, a textului) incluse n el. n plus, un SPAN este precedat
implicit de un paragraf nou, ncepnd pe o linie nou (mai puin cazul n care este inclus
ntr-un DIV ).
Codul urmtor (vezi i figura 15), este relevant pentru evidenierea
caracteristicilor celor doua etichete (DIV i SPAN):
<html>
<div id="mydiv" style="color: blue; background: yellow">Ceva text in Div 1
<span style="color: red; background: white"> Ceva text in Span 1 (integrat intr-un DIV -
fara paragraf nou) </span>
Tot text in Div 1.
</div>
<span style="color: white; background: red">Span extern 2 (se observa ca incepe cu

paragraf nou)</span>
<h3>Inainte de Span 3 <span style="color: red;background: yellow">Continut Span 3

</span> Dupa Span 3</h3>
<span style="color: red; background: yellow; line-height: 10em">Continut Span 4 -

stilizare doar continut efectiv </span>
</html>
Fig.15 Exemplificare DIV i SPAN

Documentatie Css

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Documentatie Css

Încărcat de

Drepturi de autor:

Formate disponibile

Elemente de baz ale limbajului CSS

n cazul utilizrii stilurilor interne, codul CSS se plaseaz n interiorul fiecrei

Pentru exemplificare, se prezint un fisier HTML n care se utilizeaz stiluri

Fig.1 Exemplu folosire stiluri interne

<link rel="stylesheet" type="text/css" href="Calea catre fisierul.css" />

n continuare, se prezint un exemplu de referire a unui fiier extern .css

Fiierul CSS referit i utilizat n pagina HTML anterioar (external-css.css), se

Fig. 2. Exemplificare stiluri extern

Fig.3. Exemplificare stiluri inline

Clasele CSS se utilizeaz pentru stilizarea n mod difereniat a unor mulimi de

Pornind de la exemplificarea din la paragraful Stiluri n linie, se prezint modul de de

- Fiierul HTML utiliznd stiluri externe bazate pe clase:

Stilizarea obinut n cadrul fiierului HTML anterior prezentat este evident

Fig.4. Exemplificare clase

Meniuri create cu CSS

Fig.5. Meniu creat cu CSS

Fiierul implementnd stilurile externe CSS (meniu-html.css) conine urmtoarele

float: left; width: 9em; display: block;

n cadrul fiierului CSS se poate remarca referirea #nav-menu specificnd id-ul

Fig. 6 Efect fr #nav-menu li rulare cu Internet Explorer

Un exemplu de meniu mai complex, avnd i sub-meniuri (drop-down menu),

Fig.7 Stilizare liste <ul>

Fig.8 Stilizare elemente liste <li>

Fig.9. Stilizare liste <ul> (doar cele

// li:hover ul - cnd mouse-ul se

li:hover li { float: none;

// li:hover li - cnd mouse-ul se

//simple schimbri de culori (nu sunt

Fig.1.14.h La o deplasare deasupra

<span style="color: white; background: red">Span extern 2 (se observa ca incepe cu

<h3>Inainte de Span 3 <span style="color: red;background: yellow">Continut Span 3

<span style="color: red; background: yellow; line-height: 10em">Continut Span 4 -

Fig.15 Exemplificare DIV i SPAN

S-ar putea să vă placă și