CSS C1

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, de asemenea putem crea un layout (un suoport pentru elementele HTML)
personalizat adaugand margine, culoare sau imagine de fond si multe altele. In concluzie CSS poate ajuta in a
mentine codul html cat mai simplu si mai ordonat.
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>
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.
Sintaxa CSS este urmatoarea
tag { atribut: valuare }

sau
element { proprietate: valuare}

Oricare dintre cele doua expresii este adevarata.
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".
body { color: black }

Aceasta inseamna: "Culoarea de fond a continutului este negru"
Observatii si reguli de scriere a codului CSS
In cazul in care valoarea elementului se compune din doua cuvinte le vom pune intre ghilimele
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:
Se recomanda sa se scrie toate aceste propietati una sub alta pentru o mai buna citire ulterioara a codului. De
asemenea se recomanda sa puneti punct si virgula dupa toate proprietatile elementului chiar daca este ultima dintrun 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;
}
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 ne trece prin minte.
/*Un comentariu se marcheaza asa*/

p{
text-align:right;
color:green;
/*Un comentariu se marcheaza asa*/
font-family:"times new roman";
}
CSS - Class si Id
Pentru a stabili in CSS o clasa de elemente cu aceleasi proprietati vom folosi atributul class sau id.
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 paragrafe, 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 trebui 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 ".altnume".
.altnume {text-align:center}
<div class="altnume">
<h1 class="altnume">Un titlu centrat</h1>

<p class="altnume">In acest loc apare paragraful editat de
dumneavoastra. (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
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";
}
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)
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 modifica un site intreg schimband continutul unui
singur fisier .css. Singura conditie este ca toate paginile site-ului 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 trebuie salvat 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;}
Observatie: NU lasati spatiu intre numarul specificat si unitatea de masura. Folosind "margin-left:15 px;" in loc de
"margin-left:15px;" vom genera erori in Firefox si Opera.
CSS intern
Codul CSS in head, nu ar trebui folosit prea mult, cu exceptia faptului ca aveti 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 pentru a nu amesteca 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 exemplul 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`;marginleft:15px;"

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
Codul CSS se poate insera in HTML dupa cum urmeaza:
- fisier extern (.css)
- in head
- in tagul care se vrea personalizat (inline)
Vom 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">
hr { color: #efefef;}
p { margin-left: 15px;}
</style>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>
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 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".
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.
Uniti de msur
Unele dintre proprietile elementelor coninute ntr-o pagin web necesit scrierea unei dimensiuni. Cu excepia
valorilor nule, dup dimensiune trebuie scris unitatea de msur.
U.M. Explicaie
%
procent. Ex: p.big {line-height: 200%}
in
inch. Ex: h2 {margin: 0.5in;}
cm
centimetri. Ex. h2 {margin: 0.5cm;}
mm
milimetri
em
1 em este egal cu mrimea normal a fontului. Ex. h1 {font-size: 2em;} (identic cu font-size:200%)
pt
point 1pt=1/72in
pc
pica 1pc=12px
px
pixeli. Exemplu: p {font-size: 12px}
Exemplu:
p {margin: 0 20px 0 20px}
Fonturi
n CSS fontul este definit prin denumire, dar, deoarece pe calculatorul pe care se afieaz pagina web fontul indicat
poate lipsi, dup denumirea fontului (fonturilor) se precizeaz familia din care acesta face parte. Proprietatea
utilizat este fontfamily.
Fontul
"Times New Roman", Gramond, Georgia
Familia
Arial, Verdana, Helvetica
sans-serif
Courier, "CourierNew"
monospace
serif
Exemplu:
h1 {font-family: verdana,helvetica, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Majoritatea paginilor web folosesc Verdana.
nclinarea caracterelor se stabilete cu ajutorul proprietii font-style, valorile posibile fiind normal, italic sau
oblique.
Exemplu:
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}
Folosind proprietatea font-variant se poate impune scrierea cu majuscule mici (font-variant: small-caps) sau
normal (font-variant: normal). Scrierea bold se poate impune folosind font-weight: Proprietatea poate avea valorile
bold sau normal.
Dimensiunea caracterelor poate fi impus folosind proprietatea font-size. De obicei mrimea este definit n pixeli
(px) sau procentual (% sau em). Este recomandat varianta definirii procentuale deoarece n acest caz rmne
posibil mrirea fontului folosind opiunile programului de navigare. Varianta definirii mrimii caracterelor n
uniti absolute (px, in, cm, etc.) se aplic n cazurile n care modificarea mrimii fontului n momentul afirii ar
afecta grav aspectul acesteia. De exemplu textul plasat deasupra unui buton desenat nu trebuie s poat fi mrit.
Exemplu:
h1 {font-family: arial, verdana, sans-serif;
font-size: 150%; font-weight: bold}
h2 {font-family: "Times New Roman", serif;
font-size: 120%;}
h1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }
Formatarea textului
Formatarea textului se realizeaz cu un set de proprieti care permit diverse tipuri de alinieri, indentri i spaieri.
Indentarea textului se realizeaz folosind proprietatea text-indent. Efectul indentrii este decalarea poziiei de
nceput a primei linii a fiecrui paragraf cu o mrime impus.
Exemplu:
p{
text-indent: 50px;
}
Alinierea textului se realizeaz folosind proprietatea text-align. Valorile posibile ale proprietii sunt: left, right,
center sau justify.
Exemplu:
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
Sublinierea sau bararea textului se realizeaz folosind proprietatea text-decoration. avnd valorile posibile none,
underline (subliniat), overline (barat), line-through (tiat).
Exemplu:
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Modificarea distanei dintre caractere se realizeaz folosind proprietatea letter-spacing.
Exemplu:
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
Controlul scrierii cu majuscule se realizeaz folosind proprietatea text-transform. Valorile posibile sunt:
- capitalize - prima liter va fi majuscul
- uppercase - toate literele vor fi majuscule,
- lowercase - toate literele vor fi mici,
- normal - caracterele vor fi scrise normal.
p { text-transform: uppercase; }
p { text-transform: lowercase; }
p { text-transform: capitalize; }

CSS C1

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS C1

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere

tag { atribut: valuare }

element { proprietate: valuare}

body { color: black }

p { font-family: "times new roman"}

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

/Un comentariu se marcheaza asa/

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

<h1 class="altnume">Un titlu centrat</h1>

- fisier extern (.css)

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

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

style="text-align:right;color:green;font-family:`times new roman`;marginleft:15px;"

body { background-color: #efefef; }

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

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

Arial, Verdana, Helvetica

h2 {font-family: "Times New Roman", serif;}

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