CSS Pentru Incepatori

CSS pentru incepatori
Ce este CSS?
CSS, este prescurtarea Cascading Style Sheets si este un limbaj de programare folosit in paralel cu HTMLul pentru a separa continutul unei pagini web de design si formatare. Defineste fonturi, color, margini, linii, dimensiuni, fundaluri, imagini, pozitiile obiectelor in pagina si alte aspecte vizuale, tot ce HTML-ul nu poate realiza. Mai pe scurt, CSS decide cum se afisaza HTML-ul. CSS-ul este compatibil cu majoritatea browserelor de internet actuale, cu toate ca fiecare browser poate interpreta CSS-ul diferit. De aceea este bine sa verificam documentele realizate in CSS pe mai multe browsere. CSS-ul se poate aplica HTML-ului folosind oricare din urmatoarele metode: Metoda in linie CSS-ul este adaugat direct unui element HTML. Metoda Interna CSS-ul este adaugat in header-ul unui HTML si afecteaza toate elementele din acel document. Metoda Externa CSS-ul este mentinut intr-un fisier extern continand numai codul CSS la care fac apel toate paginile site-ului.
CSS-ul este o unealta foarte importanta care imbunatateste aspectul intregului website cu mai putine linii de cod si mai multe optiuni decat HTML-ul
Sintaxa CSS
Sintaxa CSS este un set de reguli care defineste modul in care trebuie scris codul CSS. In acest sens nu este foarte diferit fata de alte limbaje de programare. Cand un browser citeste un cod CSS, se asteapta ca diferite reguli sa fie urmate pentru a stii ce urmeaza sa faca cu datele citite. Sintaxa de baza a CSS-ului este:
selector { property: value; }
Selectorul specifica ce element HTML se va stiliza. De exemplu:

p { property: value; }
Unde p in HTML reprezinta elementul paragraf, asadar acest selector va aplica valoarea tutror paragrafelor existente in fisierul HTML. Property va specifica ce atribute de stil se vor schimba. De exemplu:
p { border: value; }
Property, inseamna proprietatea ce am setat-o ca si border(margine), ceea ce inseamna ca ii vom spune browser-ului ca vrem ca toate paragrafele sa aiba o margine. value(valoarea) va spune browserului ce fel de margine vrem pentru paragrafe. De exemplu:
p { border: 1px dotted #000000; }
CSS-ul da voie mai multor selectori sa fie grupati, separati prin virgula, aplicandu-se acelasi stil simultan. Urmatorul exemplu specifica ca si tot textul din interiorul unui document HTML sa fie verde:
p, h1, h2 { color: green; }
CSS-ul in linie
Dintre cele trei metode de a folosi CSS-ul, metoda in linie este prioritizata fata de cea interna si cea externa. Daca se va incerca a se folosi mai mult de o metoda de CSS in interiorul unui document HTML pentru a incerca stilizarea aceluiasi fisier, metoda in linie va prescrie celelalte metode si va defini stilul. Sintaxa folosita in metoda in linie va fi putin mai diferita fata de sintaxa celorlalte doua metode si asta pentru ca este aplicata fiecarui element HTML in parte cu o singura declaratie si nu va fi nevoie sa declaram selectorul. De exemplu:
 
CSS-ul in linie are si dezavantaje, unul dintre este faptul ca trebuie aplicat manual pentru fiecare element de HTML in parte, repetandu-se inutil.
CSS-ul intern
Este specificat la inceputul unui fisier HTML si se aplica intregului fisier. Se foloseste in felul urmator:
<html> <head> <style type="text/css"> p { border: 1px dotted #000000; } </style> </head> <body> This paragraph will be surrounded by a thin dotted black border. </body> </html>
Block-ul CSS se afla inchis in interiorul tag-urilor <head> </head > . Toate elementele CSS trebuie sa se afle intre aceste doua tag-uri folosind sintaxa standard de mai sus. Cu metoda interna puteti intalni comentarii HTML in interiorul tag-urilor CSS care pot fi adaugate pentru a ascunde codul CSS de vechile browsere care nu suporta CSS. Este total optional. Un exemplu este urmatorul:
<style type="text/css"> <!-p { border: 1px dotted #000000; } //--> </style>
CSS-ul extern
Metoda externa este ideala cand acelasi stil este aplicat intregului website. Exista doua parti ale ale CSSului extern, link-ul catre fisierul CSS si fisierul in sine. Fisierul extern este atasat fisierului HTML adaugand un tag <link> in interiorul head-ului al fiecarui document HTML.
<html> <head> <link rel="stylesheet" type="text/css" href="myboringfilename.css"> </head> <body> You page content goes here. </body> </html>
In interiorul tag-ului de link, atributul rel defineste relatia dintre documentul curent si documentul spre care se face link-ul. Type specifica tipul documentului din link iar href este numele fisierului css si calea catre acesta. Fisierul CSS spre care se face link-ul trebuie identificat cu extensia .css similar cu metoda prin care un fisier html se recunoaste prin extensia .html. Este indicat a se folosi un editor de text precum Notepad sau Wordpad pentru a creea sau modifica fisiere .css.
Clase si ID-uri CSS

Clasele si ID-urile fac posibila aplicarea mai multor stiluri unui element HTML pentru ca sa se poata alege de fiecare data ce stil se vrea folosit in diferite situatii. Daca vrei sa ai un paragraf intr-o pagina cu o margine punctata, iar altul sa aiba o margine solida, clasele si id-urile fac acest lucru posibil. Clasele sunt identificate in CSS printr-un punct (.) precedat de numele clasei ca in exemplul de mai jos:
.dotted-border { border: 1px dotted #000000; } or p.dotted-border { border: 1px dotted #000000; }
Numele clasei este dotted-border. Selectorul trebuie specificat doar in cazul in care acel selector este singurul element HTML asupra caruia se va aplica clasa respectiva. Clasele pot fi folosite si refolosite de multe ori in aceeasi pagina, dar ID-urile pot fi folosite doar o data per pagina. ID-urile se pot identifica in CSS datorita semnului (#) precedat de numele ID-ului ca in exemplul de mai jos:
#solid-border { border: 1px solid #000000; } or p #solid-border { border: 1px solid #000000; }
Fata de clase, ID-urile nu necesita un selector sau de numele elementului HTML, pentru ca elementul este specificat cand se apeleaza ID-ul, spre exemplu:
 
Clasele si ID-urile sunt folosite doar in metodele interne si externe nu si in cele in linie.
Afisarea CSS-ului
Elementele Block-Level ies in evidenta folosind 100% din latimea disponibila si forteaza spatiul cu o linie inaintea fiecarui element HTML. Elementele inline nu intrerup curgerea elementelor din jur ci doar ocupa spatiul necesar. CSS-ul permite sa modifici un element HTMLsi sa specifici daca acel element este block-level sau inline. Un exemplu este urmatorul:
Pentru Inline CSS: Pentru CSS-ul Intern sau Extern: p { display: block; } b { display: inline; }
In exemplul de mai sus paragraful este un element block-level iar elementul bold este inline. Schimband afisarea, fortam paragraful sa devina inline iar elementul bold sa devina block-level. In multe cazuri folosind elementul HTML <div> ca si sustinator a mai multor elemente va fi suficient pentru a creea un effect block-level iar elementul poate fi folosit pentru formatarea inline. Cunoasterea propietatilor afisarii vor fi utile pentru efecte mai avansate.
Modelul caseta CSS

Fiecare element HTML este ca si o caseta. Modelul poate fi o serie de casete aflate una in interiorul celeilalte si formatate in asa fel incat sa creeze efectul dorit. Modelele de casete exprima prezentarea vizuala (layout si design) a unei pagini web.
Incepand cu interiorul si avansand spre exterior, caseta inglobeaza continutul unei pagini web si anume textul, poze, link-uri, etc. Continutul Content este cea mai importanta componenta a casetei. Marginea, este zona exterioara si nu are culoare de fundal. Ofera casetei o zona de aerisire fata de celalte elemente alaturate. Border (bordura) este spatiul aflat in exteriorul ariei de padding si poate fi invizibila sau poate avea diferite efecte vizuale.
Padding-ul este un spatiu alb ce se afla situat intre continut si border, delimitand cele doua cutii pentru a nu se amesteca. Un exemplu de caseta CSS este urmatorul:
p { padding: 15px; border: 1px dashed #658C00; margin: 30px; }
Margini si padding in CSS

Marginile si padding-ul sunt identice in ceea ce ofera si anume spatiu alb unei zone dar diferite in aria fiecareia si nu se pot suprapune. Padding-ul este aplicat unei zone aflate intre continut si border in timp ce marginea se aplica zonei exterioare border-ului. Marginile CSS
Valoare Auto Length Scop Permite browserului sa determine marginea sau lipsa ei Exemplu margin: auto;
Seteaza o margine fixa in pixeli (px), Puncte (pt) sau dimensiune font(em) margin: 5em; margin: 5%;
Percent (%) Seteaza marginea ca si procent al elementului continut
Exemplu de margine cu aceasi dimensiune:

p { margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px; }
Exemplu de margini cu dimensiuni diferite:

margin: margin: margin: margin: 5px; /* Toate marginile au aceeasi valoare */ 5px 10px; /* Marginea superioara si inferioara 5px, stanga si dreapta 10px */ 5px 10px 15px; /* superioara 5px, stanga si dreapta 10px, inferioara 15px*/ 5px 10px 15px 20px; /* Seteaza superior, inferior, stanga si dreapta */
Padding-ul in CSS Proprietatile si valorile padding-ului sunt identice cu cele ale marginilor cu exceptia valorii auto care nu exista, iar cuvantul margine este inlocuit cu padding.
p { padding-top: 25%; padding-right: 25%; padding-bottom: 25%; padding-left: 25%; }
p p p p
{ { { {
padding: padding: padding: padding:
5px; /* Toate laturile au aceeasi valoare */ 5px 10px; /* Latura superioara si inferioara 5px, stanga si dreapta 10px */ 5px 10px 15px; /* superioara 5px, stanga si dreapta 10px, inferioara 15px*/ 5px 10px 15px 20px; /* Seteaza superior, inferior, stanga si dreapta */
Borders (borduri) in CSS Border-ul in jurul unui element HTML este predefinit invizibil. CSS-ul este folosit pentru a face acest border vizibil si pentru a-i customiza stilul, culoarea si dimensiunea. Stilul trebuie definit inaintea de a se aplica marimea si culoarea border-ului. Exemple de stiluri:
p { border-style: none; } p { border-style: hidden; } p { border-style: dotted; }
p { border-style: dashed; }
p { border-style: solid; }
p { border-style: double; }
p { border-style: inset; }
p { border-style: ridge; }
p { border-style: groove; }
Border-urile pot avea cate 4 valori pentru fiecare stil:

p { border-style: solid; border-width: 1px; } /* lungimea valorii poate varia */ p { border-style: solid; border-width: thin; } p { border-style: solid; border-width: medium; }
p { border-style: solid; border-width: thick; }
Culoarea predefinita a border-ului este negru, dar se poate modifica cu propietatea de border-colour in trei variante:
p { border-style: solid; border-width: 1px; border-color: green; } p { border-style: solid; border-width: 1px; border-color: #008000; } p { border-style: solid; border-width: 1px; border-color: rgb(0, 128, 0); }
Este posibila schimbarea stilului, a dimensiunii sau a culorii specifice fiecarei laturi a border-ului folosind urmatoarele proprietati:
border-top-color: value; border-top-style: value; border-top-width: value; border-right-color: value; border-right-style: value; border-right-width: value; border-bottom-color: value; border-bottom-style: value; border-bottom-width: value; border-left-color: value; border-left-style: value; border-left-width: value;
O declaratie ce inglobeaza toate proprietatile unei borduri este urmatoarea:

p{ border-top: 1px solid #0096C5; border-right: 1px solid #008000; border-bottom: 1px solid #FFA100; border-left: 1px solid #008000; }
Dimensiuni in CSS Daca dimensiunile nu sunt stabilite, marimea elementului se va expanda sau contracta in jurul continutului dar sunt momente cand este nevoie ca un element sa aiba o anumita dimensiune. Sunt sase proprietati pentru acest scop:
Proprietati Scop width min-width max-width height min-height Seteaza latimea elementului Seteaza latimea minima a elementului Seteaza latimea maxima a elementului Seteaza inaltimea elementului Seteaza inaltimea minima a elementului
max-height Seteaza inaltimea maxima a elementului
Dimensiunile pot accepta trei tipuri de valori

Valoare Scop Auto Permite browserului sa determine latimea si inaltimea Exemplu Exemplu
width: auto; height: auto;
Lungime Fixeaza marimea in pixeli (px), puncte (pt) sau dimensiunea fontului (em) width: 5em; height: 5em; Procent Seteaza marimea ca si procent al elementului continut width: 5%; height: 5%;
Alinierea in CSS Elementele HTML pot fi aliniate orizontal de la stanga(predefinit), dreapta sau in centrul elementelor continute. O modalitate este de a alinia este aceea de a modifica marginile elementului. Setand marginile la stanga si la dreapta pe auto, va centra elementul egal intre marginile disponibile. Daca se doreste alinierea elementului la stanga sau la dreapta o margine trebuie setata 0 iar cealalta margine pe auto. Un exemplu de aliniere in CSS este:
De ce ridica flamingo doar un picior? Pentru ca daca le ridica pe amandoua, cade!
Pozitionare si layere(straturi) in CSS

Intr-o pagina web, elementele sunt vizibile in ordinea in care sunt introduse, fiecare precedandu-l pe urmatorul. CSS se poate folosi pentru a intrerupe aceasta ordine si chiar facandu-le sa se suprapuna. Metoda pentru pozitionare este setata folosind proprietatea pozitiei. Propietatea de latime si inaltime poate fi folosita pentru a controla dimensiunea fiecarui element pozitionat.
position: static;
Elementele HTML sunt statice, ceea ce inseamna ca se misca o data cu miscarea paginii, indiferent unde sunt situate in pagina.
position: relative;
Pozitionarea relative va muta elementul in jurul spatiului pe care il ocupa in mod normal, lasand in urma un spatiu gol.
p { position: relative; top: -20px; left: 20px; }
position: absolute;
Pozitionarea absoluta inlatura un element din cursul normal al paginii si il plaseaza exact unde ii precizezi. Elementele inconjuratoare se comporta exact ca si cand elementul nu ar exista si se vor grupa fara a lasa un spatiu liber pentru element. Orice element pozitionat absolut nu se afla in alt element pozitionat diferit, se va alinia predefinit in coltul din stanga a paginii.
position: fixed;
Pozitiile fixe sunt aproape identice cu cele absolute. Diferenta dintre cele doua este ca elementul va ramane in acelasi loc al paginii chiar daca pagina este derulata. Exemplu:
p { position: fixed; top: 15px; right: 15px; }
Layerele (straturi) Layerele reprezinta modul in care elementele sunt asezate unele peste altele in pagina web. Pentru a determina care care din aceste elemente pozitionate trebuie sa fie deasupra si care dedesubt, se va folosi proprietatea z-index. Valoarea lui z-index determina unde este pozitionat fiecare element in cazul in care se vor suprapune. Valorile positive indica elemtentele care trebuiesc mutate deasupra iar valorile negative sunt atribuite celor care vor ramane la sfarsit. Spre exemplu:
p.top { position: absolute; z-index: 5; } p.middle { position: absolute; z-index: 0; } p.bottom { position: absolute; z-index: -5; }
Stilizarea Fontului in CSS

Este foarte simplu a schimba marimea, culoarea, familia si alte stiluri ale fonturilor in CSS. Fiecarui element ce contine font-uri ii se pot aplica proprietati unice, sau se pot aplica intreg website-ului folosind selectorul body {} intr-un fisier .css extern. Familiile de fonturi in CSS Exista 6 fonturi ce sunt disponibile tuturor browserelor/computerelor:
Font Times New Roman Georgia Arial Verdana Courier New Lucida Console Familia Serif Serif Sans-serif Sans-serif Monospace Monospace
Pentru a fi siguri ca fonturile sunt recunoscute de toate browserele, se pot seta simultan mai multe fonturi:
body { font-family: Verdana, Arial, "Times New Roman"; }
Codul de mai sus seteaza fontul intregului website ca si Verdana cu back-up-ul Arian si Times New Roman in cazul in care primul nu este disponibil. Times New Roman si orice alt font ce contrine spatii in nume trebuie introdus in ghilimele. Marimea Fontului in CSS
Valoare Descriere Lungime Marimea fontului fixata in px, cm, pt, em, Etc. % small smaller x-small xx-small medium large larger Procentul elementului parinte al fontului
Seteaza fontul mic
Seteaza fontul mai mic
Seteaza fontul si mai mic
Seteaza fontul foarte foarte mic
Seteaza fontul mediu
Seteaza fontul mare
Seteaza fontul si mai mare
x-large
Seteaza fontul foarte mare
xx-large
Seteaza fontul cel mai mare
Exemplu:
body { font-size: 14px; } h1 { font-size: 250%; } p { font-size: large; }
Culoarea Fontului in CSS Culorile fontului sunt setate folosind proprietatile culorilor care accepta trei tipuri de valori: numele culorilor, valori hexazecimale si RGB. De exemplu:
 style="color: style="color: style="color: style="color: red;"> #0096C5;"> rgb(255, 153, 0);"> #693;"> 
Greutatea Fontului in CSS Grosimea unui font este controlata de propietatea font-weight . Aceasta proprietate accepta valori normale intre 100 si 900 sau oricare din cele trei cuvinte rezervate, normal, bold si bolder.
 Why was the broom late? It over swept! 
Stilul Fontului in CSS Stilul determina daca fontul este sau nu italic. Aceasta proprietate accepta oricare dintre cele trei cuvinte predefinite normal, italic si oblique.
 Why do cows use the doorbell? Because their horns don't work! 
Stilizarea textului in CSS

In CSS sunt folosite cateva proprietati de formatare ale textului care ii adauga efecte speciale si il definesc.
Spatiul textului in CSS Intre cuvinte, caractere sau linii de text se poate adauga spatiu extra folosind trei propietati diferite:
word-spacing: 20px; letter-spacing: 15px; line-height: 10px;
Decorarea textului in CSS Decorarea textului sunt linii situate deasupra, in interiorul sau dedesubtul liniilor de text sau nu sunt prezente. Pot deasemenea sa faca textul sa clipeasca. Decorarea textului este indeosebi folosita pentru a sterge linia aflata sub un link etc.
text-decoration: text-decoration: text-decoration: text-decoration: text-decoration: none; overline; line-through; underline; blink;
Transformarea textului in CSS Transformarea textului va schimba in interiorul textului literele mari cu cele mici cu urmatoarele proprietati:
text-transform: text-transform: text-transform: text-transform: none; capitalize; uppercase; lowercase;
Alinierea textului in CSS Textul predefinit este aliniat orizontal de la stanga dar poate fi centrat sau aliniat de la dreapta folosind proprietatile alinierii textului:
text-align: text-align: text-align: text-align: left; right; center; justify;
Umbrele de text in CSS Nu toate browserele accepta proprietatea umbrelor de text. Aceasta proprietate are patru valori simultan. O valoare seteaza culoarea umbrei, doua valori seteaza pozitia umbrei iar cea de-a patra valoare seteaza densitatea umbrei.
p { text-shadow: #658C00 4px 4px 8px; } p { color: black; text-shadow: 2px 2px 3px #999999; } p { color: white; text-shadow: black 0.1em 0.1em 0.2em; }
Pentru un effect de stralucire se pot folosi mai multe valori, separate prin virgula:
p { color: white; font-size: 25px; text-shadow: 0 0 24px #FFA100, 0 0 4px #FFA100, 1px 1px 2px #C0C0C0; }
Fundalurile (Backgrounds) in CSS

Fundalul predefinit al unei pagini web este alb dar poate fi foarte usor modificat folosind codul CSS pentru a specifica o culoare, a adauga o imagine si a preciza modul in care vrem ca si fundalul sa fie afisat. Fundalurile pot fi setate pentru intreaga pagina web setand proprietatile fundalului in corpul body {}. De asemenea poate fi setat si pentru elemnte specifice cum ar fi, <div>, , <table>, <ul>, etc. Culoarea de fundal in CSS Culoarea de fundal este setata prin intermediul proprietatii background-color urmata de valoarea culorii:
body { background-color: #FFFF99; }
Imaginea de fundal in CSS O imagine de fundal poate fi setata folosind cateva proprietati individuale sau o singura proprietate a fundalului care accepta mai multe valori. Calea catre imagine trebuie neaparat specificata:
body { background-image: url('imagini/animale/pescarus.gif'); }
Repetarea fundalului in CSS Predefinit o imagine de fundal se repeta pe intreaga pagina, atat orizontal cat si vertical. Setarea proprietatii de background-repeat poate controla sau evita aceasta repetitive si accepta patru valori:
background-repeat: background-repeat: background-repeat: background-repeat: repeat; (Predefinit, repeta imaginea pe toata pagina web) repeat-x; (Imaginea de fundal se va repeta doar orizontal) repeat-y; (Imaginea de fundal se va repeta doar vertical) no-repeat; (Imaginea de fundal va aparea doar o data)
Pozitionarea fundalului in CSS Poate fi folositor sa muti o imagine la o pozitie specificata in pagina sau elementul in care este setata. Locatia predefinita a imaginii de fundal este in coltul din stanga sus dar poate lua si alte pozitii folosind proprietatea background-position. Trebuiesc specificate doua valori, una pentru a fixa pozitia orizontala si alta pentru cea verticala.
background-position: background-position: background-position: background-position: background-position: background-position: background-position: background-position: background-position: 25px 25px; (lungimea poate fi specificata in px, cm, pt, etc.) 50% 50%; (Pot fi folosite procente) left top; (Pozitia predefinita, echivalenta cu 0% 0%) left center; (Echivalenta cu 0% 50%) left bottom; (Echivalenta cu 0% 100%) right top; (Echivalenta cu 100% 0%) right center; (Echivalenta cu to 100% 50%) right bottom; (Echivalenta cu 100% 100%) center top; (Echivalenta cu 50% 0%)
background-position: center center; (Echivalenta cu 50% 50%) background-position: center bottom; (Echivalenta cu 50% 100%)
Fundalul in CSS Proprietatea background permite tuturor celorlalte proprietati de fundal sa fie setate intr-o singura declaratie.
background: #FFF url('../imagini/animale/pescarus.gif') no-repeat scroll top right;
Link-urile in CSS
In HTML link-urile sunt predefinit colorate cu albastru si apar subliniate. Multumita codului CSS, putem elimina atat culoarea albastru cat si linia de sub link. Link-urile pot lua toate proprietatile aplicate fonturilor si majoritatea celor aplicate textelor si de asemenea putem aplica si cateva efecte denumite pseudo-clase care sunt rezervate link-urilor si ofera posibilitatea aplicarea stilizarii in diferite stadii ale link-ului. Exista 4 stadii:
link Link-ul nu a fost accesat iar mouse-ul nu este peste el
visited Link-ul a fost accesat si mouse-ul este deasupra lui hover Pointerul mouse-ului este deasupra link-ului
active Link-ul este accesat in momentul de fata
Este important de a se pastra ordinea de mai sus. Pseudo-clasele sunt adaugate selectorului link, separate prin doua puncte (:). Orice proprietati si valori specificate in aceste pseudo-clase se vor aplica si link-urilor ce indeplinesc stadiile descrise in pseudoclase.
a { color: #6633FF; font-size: 14px; text-decoration: underline; }
a:visited { color: #006699; } a:hover { text-decoration: none; color: FF9966; } a:active { color: #FFFF99; }
Listele in CSS
Listele in CSS, fie ordonate sau nu pot fi modificate intr-o varietate larga de moduri folosind proprietatea list-style-type. Listele ordonate in CSS Listele ordonate accepta doar douasprezece valori predefinite.
ol { list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: } none; decimal; (exemplu: 1, 2, 3, 4, 5, etc.) decimal-leading-zero; (exemplu: 01, 02, 03, 04, 05, etc.) lower-alpha; (exemplu: a, b, c, etc.) upper-alpha; (exemplu: A, B, C, etc.) lower-latin; (exemplu: a, b, c, etc.) upper-latin; (exemplu: A, B, C, etc.) lower-roman; (exemplu: i, ii, iii, iv, v, etc.) upper-roman; (exemplu: I, II, III, IV, V, etc.) lower-greek; (exemplu: alpha, beta, gamma, etc.) armenian; (Numerotatie traditional armeniana) georgian; (exemplu: an, ban, gan, etc.)
Listele neordonate in CSS Acestea pot lua pe rand una din cele patru valori.
ul { list-style-type: list-style-type: list-style-type: list-style-type: } none; disc; circle; square;
Cursorul in CSS
Browserele moderne suporta saptesprezece valori diferite aplicate cursorului de mouse.
Valoare auto default pointer text Descriere Este cursorul predefinit de orice browser cand acesta se afla deasupra textului Cursorul predefinit cand nu se afla deasupra textului Cursor ce arta ca un deget indicator Cursorul indica un text
crosshair Cursorul arata ca si o cruce help move wait Cursorul arata ca este ajutor disponibil Acest cursor indica un obiect ce poate fi mutat Acest cursor indica ceva ce este ocupat
progress n-resize s-resize e-resize w-resize
Acest cursor indica o activitate in progres Acest cursor indica o margine a unei cutii ce poate fi mutata in nord (sus) Acest cursor indica o margine a unei cutii ce poate fi mutata in sud (jos) Acest cursor indica o margine a unei cutii ce poate fi mutata in est (dreapta) Acest cursor indica o margine a unei cutii ce poate fi mutata in vest (stanga)
ne-resize Acest cursor indica o margine a unei cutii ce poate fi mutata in nord-est (sus & dreapta) nw-resize Acest cursor indica o margine a unei cutii ce poate fi mutata in nord-vest (sus & stanga) se-resize Acest cursor indica o margine a unei cutii ce poate fi mutata in sud-est(jos & dreapta) sw-resize Acest cursor indica o margine a unei cutii ce poate fi mutata in sud-vest(jos & stanga)
Exemplu:
cursor: help; cursor: move; cursor: pointer;
Pseudo-Elementele in CSS
Pseudo-elementele sunt folosite pentru a stiliza portiuni specifice ale unui element. Se mai numesc si selectori. Exemplu:
p.fls:first-letter { font-size: 20px; padding-left: 15px; }
In exemplul de mai sus prima litera a cuvantului, exprimata prin fls:first-letter este stilizata diferit fata de restul textului

CSS Pentru Incepatori

Î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

CSS Pentru Incepatori

Încărcat de

Drepturi de autor:

Formate disponibile

CSS pentru incepatori

Selectorul specifica ce element HTML se va stiliza. De exemplu:

Clase si ID-uri CSS

Modelul caseta CSS

Margini si padding in CSS

Percent (%) Seteaza marginea ca si procent al elementului continut

Exemplu de margine cu aceasi dimensiune:

Exemplu de margini cu dimensiuni diferite:

padding: padding: padding: padding:

Border-urile pot avea cate 4 valori pentru fiecare stil:

p { border-style: solid; border-width: thick; }

O declaratie ce inglobeaza toate proprietatile unei borduri este urmatoarea:

max-height Seteaza inaltimea maxima a elementului

Dimensiunile pot accepta trei tipuri de valori

width: auto; height: auto;

Pozitionare si layere(straturi) in CSS

Stilizarea Fontului in CSS

Seteaza fontul mai mic

Seteaza fontul si mai mic

Seteaza fontul foarte foarte mic

Seteaza fontul mediu

Seteaza fontul mare

Seteaza fontul si mai mare

Seteaza fontul foarte mare

Seteaza fontul cel mai mare

Stilizarea textului in CSS

Fundalurile (Backgrounds) in CSS

active Link-ul este accesat in momentul de fata

progress n-resize s-resize e-resize w-resize

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