Introducerea CSS in Codul HTML: B (Color:red )

CSS
CSS este un acronim provenind din Cascading Style Sheets, care nseamn "foi de stil n
cascad". In documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite
formatarea documentului HTML.
CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagin web folosind
numai CSS, care a fost proiectat astfel nct s conlucreze cu HTML-ul. Proiectanii CSS-ului au
urmrit ndeosebi separarea ntre:
coninutul paginii ( textul destinat vizitatorului si imaginile din pagin)
codul-surs
Folosind CSS, se ajunge la:
un control mai fin asupra paginii web
scderea dimensiunii n octei a paginii web, atunci cnd codul CSS e coninut ntrun fiier extern
mai mare comoditate: modificnd fiierul CSS extern, modificm simultan toate
paginile web n care acesta e inclus
efecte mai sofisticate dect cele produse de codul HTML: suprapunerea unei
imagini peste alt imagine, a unui text peste alt text, impresia de relief, efectul
hover, afiarea unor fonturi mai mari dect h1 etc.
Dezavantaj: Pagina coninnd cod CSS poate arata diferit in navigatoare diferite, deoarece
nu toate browserele interpreteaz codul CSS. Internet Explorer citete corect si complet codul CSS,
spre deosebire de Netscape Navigator.
Adugnd cod JavaScript, se obin efecte si mai sofisticate, chiar de animaie. CSS +
JavaScript = DHTML ( Dynamic HTML ). Aceste efecte spectaculoase justific titulatura de
"artiti CSS" sau "artizani CSS" acordat unor creatori de pagini web.
Dup parcurgerea acestui manual, vei dispune de arsenalul tehnic necesar realizrii unor
pagini web spectaculoase. Atunci, numai imaginaia dvs. va fi limita.
Introducerea CSS in codul HTML
In documentul HTML, codul CSS poate fi introdus n mai multe moduri:
1. Codul CSS e prezent n pagina web, iar efectul su se aplic asupra ntregului document.
Exemplul 1:
<html>
<head>
<style>
b {color:red;}
i {color:blue;}
</style>
</head>
<body>
<p align=center><b>Introducere n CSS</b></p>
<p><i>Aceast sectiune se adreseaz celor ce
cunosc deja HTML-ul. </i></p>.
</body>
</html>
Consecin: Orice text cuprins ntre <b> si </b> va fi afiat cu rou, oriunde s-ar afla n
document. Orice text afiat cu italice va fi de culoare albastr.
Se observ c introducerea codului CSS n head duce la mrirea dimensiunii n octei a
fiierului.
Exemplul 2:
<html>
<head>
<style>
a { text-decoration: none; }
</style>
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>
Eticheta <style> anun browserul c urmeaz codul CSS, iar </style> c a luat sfrit
codul CSS.
Efectul codului de mai sus: toate link-urile din acest document vor aprea nesubliniate
( text-decoration:none; ).
2. Codul e prezent n pagina web, iar efectul su se aplic elementelor izolate.
Exemplul 3:
<html>
<head>
</head>
<body>
<a href="Intro.htm" style="color:red;">Introducere</a>
<a href="A.htm" style="color:green;">Partea I</a>
<a href="B.htm" style="color:blue;">Partea a II-a</a>
</body>
</html>
Efectul acestei secvene de cod este scrierea cu culori diferite a link-urilor.

Se observ c nu mai avem, n acest caz, o etichet <style>, ci un atribut style al etichetei
<a>. Orice etichet HTML poate beneficia de acest atribut. Pentru formatarea unor poriuni mari
de text, putei folosi containerele div sau span. Totui, aceast abordare nu satisface principiul
separrii codului CSS de textul afiat n browser.
3 Codul CSS se afl ntr-un fiier extern, cu extensia css. Efectul su se aplic ntregului
document.
Exemplul 4:
<html>
<head>
<link rel=StyleSheet href="x.css" title="Setarea link-urilor" type="text/css"> </head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm"">Partea I</a>
<a href="B.htm"">Partea a II-a</a>
</body>
</html>
Fiierul extern poate fi scris n Notepad si salvat cu extensia css. Includerea sa n pagina
web se face folosind tag-ul <link>, care trebuie s se afle ntre <head> si </head>.
Fiierul x.css poate conine urmtorul cod:
body { color: blue;}
a {color: red; text-decoration: none;}
Consecina va fi afiarea cu fonturi albastre a ntregului text, exceptnd link-urile, care vor
fi colorate n rou.
Observaie: Intr-un fiier html, pot fi incluse astfel oricte alte fiiere cu extensia css, htm,
html sau pdf.
Aceast metod de includere a CSS-ului n pagina web e mai avantajoas ca primele dou
i este foarte folosit.
Codul CSS introdus astfel conlucreaz cu cel scris direct n pagin.
Cum si crui element al paginii i se aplic efectul codului CSS ?
Pentru discuie, s lum secvena de mai jos, inclus n header:
<style type="text/css">
b {color: red;}
</style>
b este un selector, iar paranteza conine o declaraie. Aadar, n cadrul codului CSS deosebim:
Selectorul, care apare n fata parantezei. Precizeaz ce elemente vor fi afectate de

declaraie.
Declaraia, care stabilete cum vor fi afiate n browser acele elemente ale paginii ce intr
n categoria definit de selector. In exemplul de mai sus, orice text ngroat va fi afiat cu
rou.
Declaraia e alctuit din dou pri:
1. Proprietatea, care apare naintea celor dou puncte.
2. Valoarea, care e precizat dup cele dou puncte. In exemplul de mai sus,
proprietatea este color, iar valoarea este red. Desigur, aceast proprietate
poate lua si alte valori, cum ar fi black, silver, white etc. Acestea pot fi
precizate si folosind codul hexazecimal. Alte proprieti sunt: textdecoration, font-weight, position etc. In CSS, pot fi setate peste 50 de
proprieti.
Exemplul 2:
<html>
<head>
<style>
b { color:red;
text-decoration: underline;}
i { color:blue;
text-decoration: line-through;}
</style>
<head>
<body>
Bine ati venit n pagina <b>mea</b> !
<i>Sper sa va placa !</i>
</body>
</html>
Se observ existena a doi selectori, b si i. Prin secvena de cod:

b { color: red:
text-decoration: underline;}
se stabilete colorarea n rou si sublinierea oricrui text din body cuprins ntre <b> si </b>. Prin
secvena de cod:
i { color: blue:
text-decoration: line-through;}
se stabilete colorarea n albastru si tierea cu o linie orizontal a caracterelor cuprinse ntre <i> si
</i>, aa cum putei vedea mai jos. Evident, putem folosi orice numr de selectori.
Bine ati venit n pagina mea ! Sper sa va placa !
Exemplul 3:
<style>
b { color: red; }
b { text-decoration: underline; }
i { color: blue; }
i { text-decoration: strike; }
</style>
Secventa de cod CSS alturat e echivalent cu cea din exemplul precedent, care prezint avantajul de a fi mai
concis.
Selectorii pot fi:

1. Selectori de tip: coincid cu numele unui tip de element. Vezi exemplele dinainte, unde
selectorii sunt b, u, i, body.
2. Selectori de atribut: CLASS si ID.
Exemplul 4:
<html>
<head>
<style>
.x { color: red; }
.y { color: blue; }
.z { color: green; }
</style>
<body>
<div class=x align=center>AAAAAAAAAAAA</div>
<div class=y align=right>BBBBBB</div>
<div class=z>CCCCCCC</div>
<div class=x align=right>DDD</div>
<div class=y align=center>EEEEEEEEEEEEE</div>
</body>
</html>
Am definit n head clasele x, y si z si le-am folosit n body. Se observ prezenta selectorilor

CLASS. Numele acestora e precedat de un punct.
Iat efectul codului din stnga:
6
AAAAAAAAAAAA
BBBBBB
CCCCCCC
DDD
EEEEEEEEEEEEE
Exemplul 5:
<style>
#1 { color: red; }
#2 { color: deepskyblue; }
#c77 { color: #C0C0C0; }
</style>
<body>
<p id=1>Mere</p>
<p id=2>Pere</p>
<p id=c77>Caise</p>
</body>
</html>
Atributul ID produce un efect similar celui produs de atributul CLASS. Se observ c

fiecare nume de fruct apare ntre <p> si </p>, dar se deosebete de celelalte dou prin ID. Nu
trebuie s existe dou ID-uri egale n document. Numele selectorilor ID e precedat de caracterul
diez. Efectul secvenei alturate este:
Mere
Pere
Caise
Se observ c valoarea unui ID nu e neaprat un numr. Poate fi si o liter sau o combinaie
de litere si cifre.
Cnd folosim clase si cnd folosim ID-uri? E greu de formulat o regul. In ceea ce ne
privete, folosim clase atunci cnd n document se repet unele tag-uri. De exemplu, ntr-un
document n care 10 cuvinte sunt afiate cu rou, 15 cu albastru, 20 cu gri, vom defini 3 clase. E
mai comod dect s scriem 45 de ID-uri, nu ? Intr-un document n care un cuvnt e afiat cu rou,
altul cu albastru si al treilea e gri, ni se pare normal s recurgem la ID-uri, dei nici folosirea
claselor nu e incorect ( vom avea ns 3 clase cu cte un singur element ).
Corespondena HTML-CSS se face pentru urmtoarele tag-uri: body, text, font, img, a, div,
ul, i ol.
7
Pentru fiecare dintre acestea exist atribute care pot fi formatate folosind CSS. n
continuare am dat cteva exemple pentru acestea:
<style>
BODY {
background-color: blue;
background-image: url(../imag/cer.jpg);
background-attachment:fixed;
background-repeat: repeat-y;
}
</style>
<style>
text {
text-decoration: underline;
vertical-align: baseline;
text-transform: capitalize;
text-align: right;
text-indent: 10%;
}
</style>
<style>
p{
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: xx-large;
font-family: gill, helvetica, sans-serif;
}
</style>
<style>
A: link {color: fuchsia;}
A: visited {color: blue;}
A: active {color: yellow;}
A:hover {color:white;background-color:red;}
</style>
<html>
<head>
<style>
.D{background-color:#bdb76b;
BORDER-BOTTOM: #4682b4 6px double;
BORDER-TOP: #4682b4 6px double;
BORDER-RIGHT: #000000 2px double;
BORDER-LEFT: #000000 2px double;
}
</style>
<body text=blue> <div class=D>div in CSS div in css div in css div </div>
</body>
</html>
Comentarii in CSS
Comentariul folosit n CSS e asemntor celui din limbajul de programare C. E introdus
prin secvena /*, iar terminarea sa e anunat prin */. Este foarte util pentru explicarea sau
delimitarea codului CSS.
Poziionarea elementelor in CSS
Un element poate fi ncrcat n pagin web astfel:
In fluxul normal
Float: elementul e ncrcat iniial respectnd fluxul normal, apoi e scos din flux si dus n
extrema stng sau n extrema dreapt.
Intr-o poziie definit folosind coordonate absolute: elementul e scos din fluxul normal
si fixat ntr-o anumit poziie.
Proprietatea position poate lua una dintre valorile: static | relative | absolute | fixed |
inherit. Valoarea implicit este static. Spunem c un element e poziionat dac parametrul
position ia o valoare diferit de static.
Exemplul 1:
<div style="position: absolute; top: 150px; right: 10%; width: 10%; background-color: deepskyblue;">
Acest container e pozitionat folosind CSS.
</div>
Efectul acestei secvene de cod e apariia containerului bleu din dreapta-sus.

Acest container e pozitionat folosind CSS.
Exemplul 2:
<html>
<head>
<style>
#1 {position:static;}
#2 {position:relative;}
#3 {position:absolute;top:200px;left:0;}
</style>
<body>
<p id=1><img src="C.jpg"></p>
</body>
</html>
n acest fel, au fost introduse n pagin 3 imagini identice. Primele dou, fiind poziionate
static si relative, si-au ocupat locurile n fluxul normal, aflndu-se n celula curent a tabelului cu
margini invizibile n care apare si acest text.
Cea de-a treia, fiind poziionat absolut, la 200 pixeli de partea superioar a paginii si la 0
pixeli de marginea stng, a ieit din fluxul normal si, aa cum putei vedea, se afl n stnga-sus.
Se observ c poziia unui element poate fi precizat folosind top, right, bottom,left. Fiecare
dintre aceste proprieti poate lua o valoare care s fie:
O distant absolut
Un procent din limea blocului care conine elementul discutat ( pentru right sau left ) sau
din nlimea acestuia ( pentru top si bottom ). Blocul poate fi un tabel, pagina nsi etc.
Auto, care e valoarea implicit
Inherit
10

Introducerea CSS in Codul HTML: B (Color:red )

Încărcat de

Informații document

Titlu original

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

Introducerea CSS in Codul HTML: B (Color:red )

Încărcat de

Drepturi de autor:

Formate disponibile

CSS

coninutul paginii ( textul destinat vizitatorului si imaginile din pagin)

Folosind CSS, se ajunge la:

un control mai fin asupra paginii web

Efectul acestei secvene de cod este scrierea cu culori diferite a link-urilor.

Selectorul, care apare n fata parantezei. Precizeaz ce elemente vor fi afectate de

Se observ existena a doi selectori, b si i. Prin secvena de cod:

Selectorii pot fi:

Am definit n head clasele x, y si z si le-am folosit n body. Se observ prezenta selectorilor

Atributul ID produce un efect similar celui produs de atributul CLASS. Se observ c

Efectul acestei secvene de cod e apariia containerului bleu din dreapta-sus.

Auto, care e valoarea implicit

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