Tutorial CSS

Tutorial CSS - Introducere in CSS
CSS in relatie cu HTML
Inainte de a continua si in cazul in care nu stapaniti HTML si XHTML va sfatuiesc sa

cititi cele doua tutoriale.
Ce veti invata in acest Tutorial CSS:
- cum sa scrieti corect cod CSS

- unde si cum trebuie plasat codul CSS
- sa faceti un layout, un meniu folosind CSS
- sa personalizezi campuri cu ajutorul CSS, si implicit formulare
- imagini transparente, galerie de imagini folosind CSS
- s.a.m.d.
Acestea fiind spuse va invit sa cititi in continuare tutorialul CSS
Introducere - De ce folosim CSS
Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte
diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem
crea un layout (un suoport pentru elementele HTML) personalizat adaugand margine
culoare sau imagine de fond si multe altele. In concluzie CSS te poate scapa de multe
batai de cap, ajutandute in a mentine codul html cat mai simplu si mai ordonat.
Introducere - Ce este CSS - Generalitati
Cascading Style Sheets pe numele lui mic CSS se foloseste pentru a personaliza
tagurile HTML..
In principiu HTML a fost conceput pentru a marca elementele unei pagini:
<html>
<head>
<title>......</title>
</head>
<body>
<h1>......</h1>
<p>........</p>
</body>
</html>
Odata cu introducerea HTML 3.2 au fost introduse si atributele de personalizare a tag-

urilor precum "font", "color" etc. A fost atunci cand limbajul de programare HTML a
devenit greoi. Fiecare pagina a websitului trebuia luata separat si modificate
proprietatile elementelor principale.
1
Aceasta problema a fost rezolvata in versiunea 4.0 a HTML-ului. Toate atributele de
personalizare au fost scoase si salvate intr-un fisier extern cu extensia ".css".
In felul acesta modificand un singur fisier putem schimba forma in care sunt afisate
toate paginile unui website. Putem schimba culoarea textului, fontul, marimea, putem
personaliza div-uri, formulare si multe altele.
Si cam atat despre ce face si ce este CSS-ul. In capitolul urmator vom trece la lucruri
mai practice si vom invata cum anume sa facem tot ce am spus ca se poate face folosind
CSS.
Tutorial CSS - Sintaxa CSS

Sintaxa CSS - Sau cum formulam codul
Sa luam un exemplu practic pe care il vom studia putin.
h1 { color: green }
Ce inseamna mai exact? Ca "Titlul de marimea 1 are culoarea verde". Atat de simplu.
Sa mai aruncam o privire:
body { color: black }
In traducere libera: "Culoarea de fond a continutului este negru"
Incearca si tu:
p { text-align: right;color: green}
Exact la ce te gandeai si tu. Inseamna "Cai verzi pe peretele din dreapta".
Lasand gluma la o parte am putea sa spunem ca sintaxa CSS este urmatoarea
tag { atribut: valuare }
sau
element { proprietate: valuare}
Oricare dintre cele doua expresii este adevarata.
Observatii Si reguli de scriere a codului CSS
In cazul in care valoarea elementului se compune din doua cuvinte le vom pune intre
ghilimele
2
p { font-family: "times new roman"}
Daca vom scrie mai mult decat o proprietate le vom separa una de cealalta prin punct si
virgula (;).
p { text-align: right;color: green; }
Recomandare:
Va recomand sa scrieti toate aceste propietati una sub alta pentru o mai buna citire
ulterioara a codului. Deasemenea va recomand sa puneti punct si virgula dupa toate
proprietatile elementului chiar daca este ultima dintr-un sir sau daca elementul are o
singura proprietate. Luand in calcul acestea codul CSS ar deveni urmatorul
p{
text-align:right;
color:green;
font-family:"times new roman";
}
O alta regula CSS spune ca mai multe elemente cu aceleasi proprietati se pot grupa
dupa cum urmeaza
h1, h2, h3, p {
font-family:arial;
color:green;
Comentarii CSS
Comentariile in CSS au aceasi functie ca si comentariile HTML, de a specifica ce am

facut intr-o anumita expresie, sau daca lipseste ceva sau orice altceva iti trece prin cap.
/*Un comentariu se marcheaza asa*/

p{
text-align:right;
color:green;
/*Un comentariu se marcheaza asa*/
font-family:"times new roman";
}
In capitolul urmator vom aborda clase si id-urui ale CSS-ului in html.
3
Tutorial CSS - Class si Id
CSS - Class si Id
Pentru a stabili in CSS o clasa de elemente cu aceleasi proprietati vom folosii atributul
class sau id.
CSS - Atributul class
Clasele de elemnte in CSS pot fi stabilite pentru un singur tag HTML sau pentru orice
alt tag care are la atributul class valoarea stabilita anterior. Desi suna putin cam
complicat este chiar simplu. Sa ne uitam la urmatorul exemplu care stabileste o clasa in
CSS.
p.center {text-align:center}
p.right {text-align:right}
Cu aceasta bucata de cod CSS am stabilit doua clase de paragrafuri, unul centrat si altul
aliniat la dreapta. Acum le vom aplica in HTML.
<p class="center">Paragraf centrat.</p>

<p class="right">Paragraf aliniat la dreapta.</p>
In cazul in care vrem sa folosim aceasi clasa pentru mai multe elemente vom elimina
tagul <p> din numele clasei.
Sa zicem ca vrem sa centram mai multe elemente. De exemplu un div, un titlu, un
paragraf si o imagine. Putem folosi aceasi clasa.
.center {text-align:center}
Ar trebuii mentionat ca numele clasei ".center", este un nume generic si nu are nimic
de-a face cu actiunea asupra unui tag. Se putea numi la fel de bine si ".clatitecugem".
.clatitecugem {text-align:center}
<div class="clatitecugem">
<h1 class="clatitecugem">Un titlu centrat</h1>
<p class="clatitecugem">Clatitele cu gem sunt foarte bune,
ele se fac de cate ori are chef nevasta-mea. Ma duc sa o intreb
daca vrea (Tot acest paragraf va fi centrat in mijlocul div-
ului).</p>
</div>
Cu toate acestea, va sfatuiesc sa folositi nume descriptive si intuitive. Sunt mult mai
simple si servesc mai bine la intelegerea ulterioara a codului CSS
4
Nota:
Inceperea numelui cu un numar NU este recomandata. Clasele denumite gen: ".165464"
sau ".6ceva" sunt interpretate doar de IE
CSS - Id
Id-ul se foloseste la fel ca si class. De fapt singura diferenta intre class si id este sintaxa
de definire. Vom folosi un diez (#) in loc de punct pentru a defini id-ul in CSS
#center {
text-align:center;
color:blue
font-family:"sans serif"
}
Tutorial CSS - Extern, intern sau inline

CSS - Extern intern sau inline
In momentul de fata codul CSS se poate stoca sau pune in trei locuri si anume:
- fisier extern (.css)

- in head
- in tagul care se vrea personalizat (inline)
CSS - Fisier .css extern
In general fisierele externe de CSS sunt cele mai folosite. Este de recomandat sa
folositi aceasta metoda pentru o mai simpla modificare a intregului website. In acest fel
se poate modicica un site intreg schimband continutul unui singur fisier .css. Singura
conditie este ca toate paginile sitului sa contina in sectiunea head tag-ul <link>.
<head>
<link rel="stylesheet" type="text/css"
href="fisier_extern.css" />
</head>
Un fisier CSS se poate scrie in orice editor de text, notepad, notepad++, word,
macromedia, etc dar trebuiesc salvate cu extensia ".css"
Un exemplu simplu de cod CSS ar fi urmatorul
body { background-image: url("img/imagine.png"); }

hr { color: #efefef;}
p { margin-left: 15px;}
5
Observatie: NU lasa spatiu intre numarul specificat si unitatea de masura. Folosind
"margin-left:15 px;" in loc de "margin-left:15px;" va genera erori in Firefox si Opera.
CSS intern
Codul CSS in head, nu ar trebuii folosit prea mult cu exceptia faptului ca ai o pagina
care are nevoie de un stil propriu si nu il imparte cu nici o alta pagina.
Codul CSS intern este acelasi ca si la cel introdus intr-un CSS extern., cu exceptia unor
taguri speciale care il incapsuleaza. Dar sa aruncam o privire la exemplul urmator.
<head>
<style type="text/css">

hr { color: #efefef; }
p { margin-left:15px;}
</style>
</head>
Dupa cum am mentionat anterior, pentru a plasa CSS in HTML vom folosi tagul
<style> impreuna cu atributul type="text/css", pe care le vom pune in sectiunea head a
documentului HTML.
CSS inline
CSS inline nu inseamna nici mai mult nici mai putin decat CSS in interiorul tagului
HTML.. Folosind CSS-ul sub aceasta forma vom pierde toate avantajele pentru care a
fost creat si anume pontru a nu amestega tagurile HTML cu formatarea si prezentarea
lor. Exista totusi si avantaje in a folosi CSS-ul in aceasta maniera dupa cum vom vedea.
Dar mai intai sa vedem cum anume se poate introduce CSS intr-un tag HTML.
<p style="text-align:right;color:green;font-family:`times new

roman`;margin-left:15px;">Acesta este un paragraf formatat
cu ajutorul CSS.</p>
Observatie:
Dupa cum se observa in exemoplu anterior valoarea fontului este o valoare compusa din
trei cuvinte. In acest caz in loc de ghilimele duble am folosit ghilimele simple pentru a
evita conflictul cu ghilimele duble folosite pentru a incapsula valoarea atributului style.
Sa mai aruncam o privire peste exemplul in discutie:
style="text-align:right;color:green;font-family:`times new
roman`;margin-left:15px;"
6
Daca am folosii acelasi tip de ghilimele peste tot, browser-ul ar intrerpreta sfarsitul
valorii inainte de vreme. Iata bucata de cod CSS care va fi interpretata de browser:
style="text-align:right;color:green;font-family:"
Restul codului CSS fiind ignorat.
Prevalenta metodelor de a insera CSS in documentele HTML
Dupa cum am spus codul CSS se poate insera in HTML dupa cum urmeaza:
- fisier extern (.css)

- in head
- in tagul care se vrea personalizat (inline)
Voi adauga acum si cea de-a 4-a modalitate si anume:
- toate trei anterioare.
Ce se intampla insa atunci cand formatam un element si folosim mai multe modalitati de
inserare a CSS-ului?
Ordinea de reproducere in browser va fi urmatoarea:
1. Formatare CSS inline (in interiorul tag-ului HTML)

2. Formatere CSS interna (in sectiunea head a documentului)
3. Formatare CSS externa (fisier .css extern)
4. Standardul browser-ului (valori CSS atribuite standard)
Concluzie
Formatarea inline anuleaza toate celelalte expresii CSS de formatare. Iar standardele de
formatare ale browser-ului intervin doar atunci cand nu este specificata o alta formatare
CSS.
Exceptie:
In cazul in care tagul <link> este pus dupa tagul <style> codul CSS aflat in fisierul .css
extern va anula codul CSS intern.
<head>
hr { color: #efefef;}
p { margin-left: 15px;}
</style>
<link rel="stylesheet" type="text/css" href="fisier_extern.css"

/>
</head>
7
Tutorial CSS - Background
CSS Background
Pentru a formata background-ul elementelor HTML cu ajutorul CSS vom folosi

urmatoarele atribute
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background solid
body { background-color: #efefef; }
h1 { background-color:red, }
p { background-color:rgb(255,0,0); }
div { background-color: black; }
Dupa cum se observa culoarea background-ului poate fi exprimata in sistemul

hexadecimal, RGB sau folosind numele in engleza.
Background imagine
Ca si valoare standard browserul va repeta imaginea pe latimea si lungimea pagini

pentru a crea un background-ul
body { background-image: url("o_imagine.gif"); }
Pentru a repeta imaginea doar pe verticala sau doar pe orizontala vom folosi urmatorul
cod CSS:
body
{
background-image:url("o_imagine.gif");
background-repeat:repeat-x;
}
Aceasta functie speciala a CSS-ului se poate folosi la crearea background-urilor cu

efect gradient. Pentru a repeta inaginea pe verticala in loc de "repeat-x" vom folosi
"repeat-y".
8
Daca nu vrei ca imaginea sa se repete trebuie sa specifici acest lucru
body
{
background-repeat:no-repeat;
}
Odata ce am specificat ca nu vrem ca imaginea sa se repede si in cazul in care nu

specificam altceva browserul va adauga: background-position:top left; ca valoare
standard.
CSS - background-attachment
CSS background-attachment se foloseste pentru a pune ca background o imagine care

se misca impreuna cu continutul sau pur si simplu este fixa. Sintaxa CSS ar fi
urmatoarea:
body
{
background-image:url("o_imagine.png");
background-attachment:fixed;
}
Scurtarea codului CSS

body {
background-color:#ffffff;
background-position:top right;
}
Tot ce am scris mai sus se poate rezuma la expresia CSS de mai jos
body { background-color: #ffffff url("o_imagine.gif") no-

repeat top right; }
Cand se foloseste varianta scurta a acestor atribute ordinea lor va fi mereu urmatoarea:
-background-color
-background-image
-background-repeat
-background-attachment
-background-position
Nu conteaza daca unul sau mai multe valori lipsesc atata timp cat se pastreaza aceasta
ordine.
9
Tutorial CSS - Formatarea textului
Tutorial CSS - Text
Culoarea textului se poate exprima ca si la culoarea de background in sistemul

hexadecimal, RGB sau cu numele in engleza a culori respective.
body { color: #efefef; }

h1 { color: red; }
p { color: rgb(255,0,0); }
Cu ajutorul atributului body vom specifica culoarea intregului text continut in pagina cu
exceptia cazului in care specificam altceva.
Alinierea textului
h1 { text-align: center; }
p { text-align: center; }
In CSS ca si in HTML textul poate fi aliniat la dreapta, la stanga sau justificat

(justified).
CSS - Decorarea si transformarea textului in CSS
Decorarea textului se foloseste atat pentru stabilirea cat si inlaturarea anumitor

proprietati. Cel mai des intalnita este inlaturarea sublinieri linkurilor:
a { text-decoration: none; }
Alte valori folosite sunt
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
h4 { text-decoration: blink; }
Folosind CSS putem transforma tot textul in majuscule in minuscule sau sa

transformam prima litera a fiecarui cuvant in majuscula.
p { text-transform: uppercase; }
p { text-transform: lowercase; }
p { text-transform: capitalize; }
Tot aici voi mentiona si alinierea paragrafului (spatiu liber la inceputul randului)
p { text-indent: 30px; }
10
Tutorial CSS - Font si familii de fonturi
Tutorial CSS Fonturi si familii de fonturi
Exista doua tipuri principale de fonturi si anume "serif" si "sans serif". Intre ele nu este
mare diferenta dar ceea ce este de retinut este ca: fonturile familiei "serif" sunt mai usor
de citit.
Pentru a specifica fontul cu ajutorul CSS-ului vom folosi codul urmator
p { font-family: "Times New Roman",Georgia,Serif; }
Dupa cum se poate observa se pot prestabili mai multe fonturi in cazul in care userul nu
are instalat fontul principal, sau browser-ul nu suporta fontul respectiv.
CSS - font style si font weight
Font style si font weight in CSS se refera la text normal, inclinat sau ingrosat.
p { font-style: normal; }
p { font-style: italic; }
p { font-weight: bold; }
Sunt si alte valori pe care le pot lua atat font style cat si font weight dar cele de mai sus
sunt cele care se folosesc in mod normal in CSS. Am ajaugat totusi o lista cu toate
valorile acceptate ceva mai jos.
CSS - Marimea textului
Pentru a stabili marimea textului cu ajutorul CSS-ului vom folosii atributul "font-
size" dupa cum urmeaza:
h1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }
Exemplele de mai sus functioneaza foarte bine in Firefox Opera si Google Cherome, dar
nu si in Internet Explorer problema apare atunci cand se mareste textul. Daca nu te
intereseaza ca utilizatori paginii tale nu vor putea schimba marimea textului pentru o
mai buna vizivilitate poti folosii expresiile de mai sus fara alte complicatii.
Dar daca vrei sa elimini si aceasta problema poti folosi "em" ca unitate de masura.
Unitatea de masura "em" este recomandata de w3.org si 1em=16px.
Dupa cum se poate deduce, formula pt a calcula marimea textului in "em" este
em=numar_pixeli/16.
11
h1 { font-size: 1.875em; }
h2 { font-size: 1.25em; }
p { font-size: 0.75em; }
CSS - font variant
"Font variant" nu face in principìu mare lucru dar nu strica amintit:
p { font-variant: small-caps; }
Expresia de mai sus transforma textul formatat cu ajutorul CSS in majuscule ceva mai
mici decat cele normale.
Tutorial CSS - Margin, Border si Padding

CSS - incadrarea continutului.
Folosind CSS putem incadra contiunutul, putem stabilii distanta intre continut si border
intre border si marginea paginii. Vom folosi urmatoarele atribute:
- margin - distanta intre border si marginea paginii

- border - marginea si cutia care incadreaza continutul
- padding - distanta intr border si continut
- content - continutul propriu-zis (text, imagini, etc)
Vom aplica atributele de mai sus sub forma:
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
Observatie:
Vom considera exemplul de mai sus un element. Trebuie mentionat ca acest
element are o latime totala de 270px (200+15x2+5x2+15x2=270px).
Concluzie:
latimea continutului + left padding + right padding + left border + right border + left
margin + right margin = Latimea totala
si
inaltimea continutului + left padding + right padding + left border + right border +
left margin + right margin = Inaltimea totala
Aceste doua formule trebuiesc luate in considerare atunci cand stabilim inaltimea si
latimea continutului.
12
Nota:
Trebuie mentionat aici ca Internet Explorer, include padding-ul si border-ul in latime
(width) in cazul in care acesta este specificat. Aceasta eroare se corecteaza introducand
un DOCTYPE la inceputul documentului.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
</style>
</head>
CSS - Border Style
Css border nu este altceva decat o bordura de jur-imprejurul continutului. Bordurile

realizate cu ajutorul CSS vor fi puse in scena cu ajutiorul atributului border-style cu
urmatoarele valori:
- none
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
Valorile precum groove, ridge, inset si outset pot genera borduri CSS 3D daca sunt
alese culorile corecte
CSS - Border Width
Lungimea bordurii in CSS este determinata de atributul border-width. Acest atribut nu

va functiona in cazul in care nu este specificat in prealabil atributul border-style. Vom
folosi ca unitati de masura pixelii sau putem pune valorile thin, medium sau thick. Iata
si un exemplu:
13
div {
border-style:solid;
border-width:2px;
}
CSS Border Color
Culoarea borduri va fi specificata de catre atributul border-color in sistemul

hexazecimar, RGB, sau pur si simplu numind culorile. De retinut ca se poate stabili ca
bordura sa fie transparenta in cazul in care este nevoie.
Pentru a putea stabilii culoarea bordurii in CSS trebuie mai intai sa stabilim stilul
acesteia dupa cu urmeaza.
div {
border-style:solid;
border-color:red;
}
Observatie:
Se pot deasemenea stabilii proprietati individuale pentru fiecare dintre laturile
chenarului obtinut.
div {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Forma scurta de a scrie toate aceste valori intr-o singura expresie este
div {
border-style:dotted solid;
}
Folosind forma scurta de a scrie CSS putem stabill aceste valori mult mai simplu
economisind timp. Iata cateva exemple care sper sa va lamureasca in privinta contruirii
acestora:
- div { border-style:dotted solid double dashed; }

Bordura de sus este "dotted", cea din stanga "solid", cea din dreapta "double" iar cea de
jos este "dashed".
- div { border-style:dotted solid double; }

Bordura de sus este punctata, cea din dreapta si din stanga sunt solide iar bordura de jos
este dubla.
14
- div { border-style:dotted solid; }
Bordurile de sus si de jos sunt punctate iar cele din dreapta si din stanga sunt solide.
- div { border-style:dotted; }
Te las sa ghicesti.
Desi deasupra am luat un exemplu de baza folosind border-style, aceleasi reguli se

aplica la toate celelalte atribute mentionate in acest tutorial CSS.
Observatie:
O alta metoda de a coda in CSS toate proprietatile bordurii intr-o singura expresie este:
border: 4px dotted #EFEFEF;
De mentionat ca ordinea va fi mereu aceasta
CSS - Outline
Atributul outline a aparut odata cu introducerea CSS2 si are urmatorile proprietati:
- outline
- outline-color
- outline-style
- outline-width
Outline deseneaza un chenar de jur imprejurul continutului
Nota:
Vezi tabelul de referinte pentru valori disponibile atributului outline.
CSS - Margin
Atributul margin stabileste "dupa cum zice si numele" o distanta in afara bordurii
stabilite anterior. Marginea definita nu va avea nici o culoare, cu alte cuvinte va fi
transparenta.
Pentru a defini aceasta margine vom stabili valoarea fiecarei margini in parte cea de sus
(margin-top)marginea din dreapta si din stanga ( margin-right si respectiv margin-left),
si cea de jos (margin-bottom). Retine aceasta ordine intrucat iti va fi utila atunci cand
stabilesti margin-ul folosind expresia scurta:
margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)

margin: 30px 20px 50px; (sus, dreapta si stanga, jos)
margin: 30px 20px (sus si jos, dreapta si stanga)
margin: 30px (sus jos dreapta si stanga - cu alte cuvinte o spatiere de 30 de pixeli de jur
imprejurul bordurii)
15
CSS - Padding
Padding se refera la regiunea dintre continut si bordura (border). Vom stabili aceasta
regiune in acelasi fel ca si la atributul margin, folosind:
- padding-top:10px;
- padding-bottom:10px;
- padding-right:20px;
- padding-left:20px;
Expresia CSS sub forma scurta se formeaza ca si la margin
padding:25px 50px 75px 100px;
Tutorial CSS - Liste

CSS - Liste
In HTML avem doua tipuri de liste:
- ordonate - numere, nuemere romane sau litere

- neordonate - cerculete, buline, patratele etc.
Atributul list din CSS permite modificarea tipului de lista sau sau folosirea unei imagini
ca marcador.
Un exemplu practic de a folosi atributul list este:
ul {list-style-type:disc;}
ol {list-style-type:upper-roman;}
Pentru a folosi o imagine ca marcador vom folosi:
ul { list-style-image:url("image.png"); }
Mentiune:
NU toate browser-ele vor afisa imaginea in aceasi pozitie. De exemplu Internet Explorer
si Opera va afisa imaginea ceva mai sus decat Firefox si Google Chrome.
Pentru a plasa imaginea in pozitia dorita si sa ramana acolo in orice navigator vom:
- folosi imaginea ca background fara sa o repetam.

- vom stabili distanta fata de marginea din stanga si cea de sus.
- vom stabili ca lista sa nu aibe nici un marcador si vom egala margin si padding
cu 0 pentru a fi afisat la fel in toate browser-ele.
16
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
li {
background-image:url(image.png);
background-position:0px 5px;
padding-left:15px;
}
Alinierea unei liste
ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside}
Valuarea standard pentru o lista este outside. O valuare precum inside va impinge lista
spre interiorul paginii.
CSS - Forma scurta a unei liste

list-style:none inside url("arrow.gif");
Va trebuii sa pastram ordinea mentionata mai sus.
Tutorial CSS - Pozitionare

CSS - Pozitionare
Pozitionarea elementelor este de patru tipuri.
- statica
- fixa
- relativa
- absoluta
CSS - Pozitionare statica
Pozitionarea statica este valoarea standard in browser atribuita unui element cand vine
vorba de pozitionare.
CSS - Pozitionare fixa
Folosind valuarea "fixed" pentru atributul "position" vom obtine un element pe pagina
care are o pozitie fixa indiferent de celelalte elemente. Cu altea cuvinte elementul
pluteste in pozitia stabilita chiar daca dam de rotita mouseului. Folosind valoarea
17
"fixed" elementele se pot suprapune, celelalte elemente comportanduse ca si cand
elementul fix nu ar exista.
.pozitie_fixa {
position:fixed;
top:25px;
right:10px;
}
Mentiune:
IE nu interpreteaza acest atribut daca nu este specificat un !DOCTYPE.
CSS - Pozitionare relativa
Pozitionarea relativa se refera la o pozitie diferita fata de pozitia statica
.pozitionare_relativa {
position:relative;
left:15px;
top:30px;
}
Valorile lui top si left pot fi deasemenea negative.
.pozitionare_relativa{
position:relative;
left:-15px;
top:-30px;
}
Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe emente.
.element_suprapus {
position:relative;
top:-20px;
}
</style>
<h2>Acest element are o pozitionare statica</h2>
<h2 class="element_suprapus">Titlul va fi urcat mai sus fata de pozitia initiala</h2>
<p><b>Note:</b> Trebuie mentionat ca spatiul corespunzator elementului, va fi
pastarat</p>
De multe ori pozitionarea relativa sau div-urile pozitionate relativ sunt folosite ca si
container pentru alte divuri sau elemente pozitionate absolut.
18
CSS - Pozitionare absoluta
Elementele pozitionate absolut vor fi pozitionate in functie de primul alement parinte

care are o pozitionare non-statica. Daca nu este gasit un astfel de element, elementul
parinte va fi considerat <html>.
Spatiul rezervat elementelor pozitionate absolut nu va fi pastrat. In acest sens celelalte

elemente se comporta ca si cand elementul pozitionat absolut nu ar exista. In felul
acesta se pot suprapune mai multe elemente.
p
{
position:absolute;
left:200px;
top:200px;
}
Suprapunerea mai multor elemente in CSS
Cu ajutorul CSS pot fi suprapuse mai multe elemente.
Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea
atat valori pozitive cat si negative.
<html>
<head>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
& <body>
<h1>Suprapunerea mai multor elemente in CSS</h1>
<img src="imagine.jpg" width="100" height="100" />
<p>Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate
avea atat valori pozitive cat si negative.</p>
</body>
</html>
Datorita faptului ca "z-index"-ul imagini are valoarea -1, imaginea va fi pozitionata in

spatele textului. De aici regula ca un element cu "z-index" mai mare va fi pozitionat in
fata unui element cu "z-index" mai mic.
Tutorial CSS - Display
19
CSS - Elemente vizibile si elemente ascunse in css. Proprietatea display in css
Vom folosi proprietatea display in css pentru a ascunde un element in html si

proprietatea visibility pentrs a nu afisa acelasi element html.
Intrebarea logica ar fi: Si care este diferenta?
p.ascuns {visibility:hidden;}
visibility:hidden; ascunde paragraful pastrand insa spatiul rezervat in cursul paginii.

Celelalte elemente se vor comporta ca si cand paragraful ar fi afisat pe pagina chiar daca
acesta nu este vizibil.
p.ascuns {display:none;}
display:none; ascunde paragraful fara sa pastreze spatiul rezervat acestuia in pagina.

Celelalte elemente vor ocupa spatiul rezervat acestuia.
Afisarea elementelor in block sau inline
Exista elemente html care sunt delimitate de celelalte elemente sau de elemente de
acelasi tip printr-un salt in linie (enter, line break, br). Spunem ca aceste elemente sunt
afisate in block.
- <h1>, <h2>, <h3>, etc

- <div> <p>, <li>
Deasemenea exista elemente care sunt afisate in pe acelasi rand fara sa influienteze
cursul pagini.
-<span>, <a>
Spunem ca aceste elemente sunt afisata inline.
Cu ajutorul CSS afisarea elementelor poate fi schimbata si anume putem afisa elemente
precum div paragraf etc inline si elemente precum linkuri span etc in block.
div {display:inline;}
Exemplul de mai sus va afisa toate div-urile pe aceasi linie.Se foloseste in general cu
clase sau id in css pentru a personaliza doar div-urile care se vor personalizate. Ex: bara
de meniuri orizontala
div.bara_orizontala {display:inline;}
20
Mai jos am exemplificat un link afisat in block, introducand un salt in linie inainte si
dupa el.
a {display:block;}
Se foloseste in general cu clase sau id in css pentru a personaliza doar link-urile care se
vor personalizate. Ex: sidebar.
a.sidebar_links {display:block;}
Tutorial CSS - Float

Proprietatea float in css.
Float se foloseste in geeral pentru crearea de template-uri si pentru galerii de imagini,

dar are mult mai multe intrebuintari.
Folosind atributul float elementele vor pluti unul langa altul sau unul in continuarea
celuilalt atat cat spatiul rezervat lor o permite. Acesttip de aliniere se refera la o alinire
orizontala si nu verticala a elementelor.
Sa luam un exemplu practic. Vrem sa facem o galerie de imagini (thumbs) si vrem ca

imaginile in miniatura sa fie afisate una langa cealalta in linii si coloane. float:left; va
afisa thumb-urile una langa cealalta pe o linie atat cat latimea paginii permite, sarind pe
linia urmatoare atunci cand urmatoarea imagine nu incape.
Un alt exemplu. Vrem sa afisam o imafine aliniata la dreapta sau la stanga si vrem ca
aceasta sa fie inconjurata de text. float:left; sau float:right; va afisa textul in stanga sau
in dreapta imaginii depinde de cum a fost aliniata anterior.
img {
float:left;
}
sau
.clasa_de_elemente {
float:left;
}
CSS - Ruperea randului - Atributul clear
Toate elemenetele html care sunt situate dupa alementul aliniat cu float right sau left vor
pluti langa acesta. Pentru a impiedica sa se intample acest lucru atunci cand nu vrem sa
se intample vom folosi atibutul clear cu valoarea both:
.enter {
clear:both;
21
}
Tutorial CSS - Bara de navigare

Bara de navigare in CSS
De cate ori ai intrat pe un site si ai te-ai gandit: "Cum a facut bara de navigare?".
Iata si raspunsul: Pornind de la cod HTML simoplu si stilizandule cu ajutorul CSS.
In general pentru a crea o bara de navigare fie ea orizontala sau un meniu vertical sunt
folosite listele HTML care ulterior sunt personalizate folosind CSS. Linkuri normale in
interiorul tagului <li> care va fi incapsulat in tagul <ul>
Am atasat mai jos codul html necesar:
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Articole</a></li>
<li><a href="#">RSS feed</a></li>
<li><a href="#">Contact</a></li>
</ul>
Vom folosi acum CSS pentru a da forma listei de mai sus, si anume list-style-type:none
- pentru a inlatura "bulinele" specifice listei. Deasemenea vom inlatura marginea si
pading-ul pe care browser-ul il atribuie ca valoare standard.
u l {
margin:0;
padding:0;
}
Codul CSS de mai sus poate fi folosit atat pentru meniuri verticale cat si pentru bara
orizontala.
CSS - Bara verticala de meniu
Pentru a un meniu vertical de linkuri nu trebuie decat sa reprezentam linkurile ca un

block si sa stabilim latimea blocului. Sa trecem la treaba.
a {
display:block;
width:100px;
22
}
***Nota
Desi nu este absolut obligatoriu sa stabilim latimea blocului de elemente, va recomand
insa, sa nu omiteti acest detaliu. In browsere mai vechi bara de linkuri poate fi
distorsionata.
In principiu codul de mai sus este de ajuns pentru a crea un meniu vertical. In
continuare aveti insa un meniu terminat si finisat decent zic eu. In privinta culorilor si a
contarstelor nu trebuie decat sa va folositi imaginatia.
ul {
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:20px;
color:#fff;
background-color:#d2691e;
width:200px;
padding:8px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#daa520;
}
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Articole</a></li>
<li><a href="#">RSS Feedt</a></li>
<li><a href="#">Contact</a></li>
</ul>
Am pus aici si rezultatul.
CSS - Bara verticala de meniu
Pentru a crea o bara de meniu orizontala in css putem folosi, ori atributul inline, pentru
a forta elementele listei sa fie insirate pe aceasi line, ori atributul floating pentru aforta
elementele listei sa fie afisate unul langa celalalt.
23
Folosind inline
Pentru a crea o bara de meniuri orizontale cu atributul inline nu trebuie decat sa

adaugam urmatoarea linie de cod CSS.
l i { display:inline; }
Ca si afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai
sus nu face decat sa elimine enter-urile inainte si dupa acestea afisand link-urile pe
aceasi linie.
Folosind float
Vm folosi atributul float pentru a afisa elementele listei unul langa celalalt. Vom folosi
deasemenea atributul display:block; pentru a afisa linkul ca si un buton si vom stabili
latimea acestuia.
Iata csi codul CSS aferent.
li {
float:left;
}
a{
display:block;
width:60px;
}
Odata ce am reprezentat elementul in bloc este obligatoriu sa stabilim latimea acestuia.

In caz contrar acesta va ocupa toata latimea disponibila.
Codurile afisate anterior sunt suficiente pentru a crea o bara de meniuri orizontala
folosind CSS In continuare aveti insa un meniu terminat si finisat. In privinta culorilor
si a contarstelor nu trebuie decat sa va folositi imaginatia si sa va jucati putin.
Bibliografie: http://www.tutorialehtml.com/tutoriale-css/bara-de-navigare-in-css.php
Eleva Ciobanu Elena
Clasa a-XII-a C
24

Tutorial 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

Tutorial CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Tutorial CSS - Introducere in CSS

CSS in relatie cu HTML

Inainte de a continua si in cazul in care nu stapaniti HTML si XHTML va sfatuiesc sa

Ce veti invata in acest Tutorial CSS:

- cum sa scrieti corect cod CSS

Acestea fiind spuse va invit sa cititi in continuare tutorialul CSS

Introducere - De ce folosim CSS

Introducere - Ce este CSS - Generalitati

Odata cu introducerea HTML 3.2 au fost introduse si atributele de personalizare a tag-

Tutorial CSS - Sintaxa CSS

Sa luam un exemplu practic pe care il vom studia putin.

Sa mai aruncam o privire:

body { color: black }

In traducere libera: "Culoarea de fond a continutului este negru"

p { text-align: right;color: green}

Exact la ce te gandeai si tu. Inseamna "Cai verzi pe peretele din dreapta".

Lasand gluma la o parte am putea sa spunem ca sintaxa CSS este urmatoarea

tag { atribut: valuare }

element { proprietate: valuare}

Oricare dintre cele doua expresii este adevarata.

Observatii Si reguli de scriere a codului CSS

p { text-align: right;color: green; }

h1, h2, h3, p {

Comentariile in CSS au aceasi functie ca si comentariile HTML, de a specifica ce am

/*Un comentariu se marcheaza asa*/

In capitolul urmator vom aborda clase si id-urui ale CSS-ului in html.

CSS - Atributul class

<p class="center">Paragraf centrat.</p>

Tutorial CSS - Extern, intern sau inline

- fisier extern (.css)

CSS - Fisier .css extern

Un exemplu simplu de cod CSS ar fi urmatorul

body { background-image: url("img/imagine.png"); }

body { background-image: url("img/imagine.png"); }

<p style="text-align:right;color:green;font-family:`times new

Sa mai aruncam o privire peste exemplul in discutie:

Restul codului CSS fiind ignorat.

Prevalenta metodelor de a insera CSS in documentele HTML

- fisier extern (.css)

Voi adauga acum si cea de-a 4-a modalitate si anume:

- toate trei anterioare.

1. Formatare CSS inline (in interiorul tag-ului HTML)

<link rel="stylesheet" type="text/css" href="fisier_extern.css"

Pentru a formata background-ul elementelor HTML cu ajutorul CSS vom folosi

Dupa cum se observa culoarea background-ului poate fi exprimata in sistemul

Ca si valoare standard browserul va repeta imaginea pe latimea si lungimea pagini

body { background-image: url("o_imagine.gif"); }

Aceasta functie speciala a CSS-ului se poate folosi la crearea background-urilor cu

Odata ce am specificat ca nu vrem ca imaginea sa se repede si in cazul in care nu

CSS background-attachment se foloseste pentru a pune ca background o imagine care

Scurtarea codului CSS

body { background-color: #ffffff url("o_imagine.gif") no-

Culoarea textului se poate exprima ca si la culoarea de background in sistemul

body { color: #efefef; }

In CSS ca si in HTML textul poate fi aliniat la dreapta, la stanga sau justificat

CSS - Decorarea si transformarea textului in CSS

Decorarea textului se foloseste atat pentru stabilirea cat si inlaturarea anumitor

Alte valori folosite sunt

Folosind CSS putem transforma tot textul in majuscule in minuscule sau sa

Pentru a specifica fontul cu ajutorul CSS-ului vom folosi codul urmator

p { font-family: "Times New Roman",Georgia,Serif; }

CSS - font style si font weight

CSS - Marimea textului

CSS - font variant

/Un comentariu se marcheaza asa/