Scribd
Încărcați
533 vizualizări

Tutorial CSS

Încărcat de

ciprianjustin
Drepturi de autor
© Attribution Non-Commercial (BY-NC)
Formate disponibile
Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
533 vizualizări

Tutorial CSS

Încărcat de

ciprianjustin
Drepturi de autor
© Attribution Non-Commercial (BY-NC)
Formate disponibile
Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 24

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">

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


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>

<style type="text/css">
body { background-image: url("img/imagine.png"); }
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-image:url("o_imagine.gif");
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-repeat:no-repeat;
background-attachment:fixed;
}

Scurtarea codului CSS


body {
background-color:#ffffff;
background-image:url("o_imagine.gif");
background-repeat:no-repeat;
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>
<style type="text/css">
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-repeat:no-repeat;
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.

 <style type="text/css">
.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>
<style type="text/css">
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 {
list-style-type:none;
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 {
list-style-type:none;
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

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