Centrul de Instruire pentru
Tehnologia Informației și
Apărare Cibernetică
CURS 3-CSS Introduction
Întocmit:
Slt. ROMANIUC Alexandru-Gabriel
romaniuc_alexandrugabriel@[Link]
1. Ce înseamnă CSS?
• CSS Cascading Style Sheets, este un limbaj care descrie stilul
unui document HTML, cum elementele unui document HTML ar trebui
afișate, adică face referire la aspectul paginii Web.
• Cu CSS, puteți controla culoarea, fontul, dimensiunea textului,
spațiul dintre elemente, modul în care elementele sunt
poziționate și așezate, ce imagini de fundal sau culori de
fundal vor fi utilizate, afișaje pentru diferite dispozitive și
dimensiuni de ecran și multe altele!
• CSS permite crearea unui stil pentru fiecare tag (eticheta) din
cadrul unui document HTML. Acelasi stil definit poate fi folosit
ulterior in toate paginile HTML create, reducand astfel efortul
de a formata documentele. Stilul, este o entitate care odata
definite poate fi folosita ori de cate ori este nevoie, prin
simpla ei apelare.
2. CSS Syntax:
• Def: O sintaxă CSS este compus dintr-un selector și un
block de declarație
• Syntax:
• Selector = este folosit pentru a indica elementul căruia să i se
aplice stilul definit între paranteze { }
• Block-ul Declaration = conține una sau mai multe declarații
separate de ;
• OBSERVAȚIE: Fiecare declarație conține un duo format din
Property:Value, Property= specific CSS (EXEMPLU: color, font-size)
Exemplu
Stilul CSS se aplică
Conținut Simplu acestui conținut
CSS Style
(HTML document)
Title
Bold
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse at pede ut purus Italics
malesuada dictum. Donec vitae neque non
magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam nec, interdum
vel, mi. Sed nec quam nec odio lacinia molestie.
Praesent augue tortor, convallis eget, euismod
nonummy, lacinia ut, risus.
Rezultate aplicare Title
CSS style:
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse at pede ut purus
malesuada dictum. Donec vitae neque non magna
aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
Tortor purus, luctus non, aliquam nec, interdum
vel, mi. Sed nec quam nec odio lacinia molestie.
Praesent augue tortor, convallis eget, euismod
nonummy, lacinia ut, risus.
[Link] dedicate:
Def. Aceste stiluri se aplica tag-urilor sau portiunilor de bloc de
text pentru care sunt definite.
• Exemplu: <style> CSS Syntax
h1 {text-align:center; color:red;}
p, h2, h3 {text-align:left; color:blue}
</style>
Obs. Stilurile dedicate se definesc in sectiunea <head></head> a
fisierului HTML. In exemplul de mai sus, s-a definit stilul pentru
elemental h1 si p, prin urmare, toate elementele h1 si p care se
vor defini in zona de <body></body> vor fi stilizate conform
stilului definit.
4. Clase de stiluri:
• Aceste clase de stiluri se definesc in sectiunea <head></head> a
fisierului HTML. Clasei i se atribuie un nume, iar cu acest nume
definit clasele de stil pot fi apelate pentru orice tag din
cadrul documentului.
Exemplu: Definirea clasei de stiluri…
<style>
all.numeclasa1 {text-align:center; color:blue;}
</style>
<style>
p.numeclasa2 {text-align:left;color:red;}
.numeclasa3 {text-align:right;color:yellow;}
</style>
• In exemplu sa definit o clasa cu numele “numeclasa1”. Atributul
“all” din fata numelui specifica faptul ca aceasta clasa se
aplica tuturor tag-urilor pe care le insoteste. Apelarea unei
clase de stil pentru un anumit tag se face ca in exemplul de mai
jos:
• Exemplu: Apelarea clasei de stiluri...
• <h2 class=numeclasa1>Acesta este un header 2 care are atributele
clasei numeclasa.</h2>
5. Stiluri identificate
In aceste situatii numele clasei de stil se specifica sub forma
#numestil iar pentru apelarea acestei clase de stil se foloseste
id=numestil , pentru elementul din documentul HTML pentru care se
doreste aplicarea lui.
Exemplu:
<style>
#numestil1 {text-align:center; color:blue;}
#numestil2 {text-align:left; color:red;}
</style>
Dupa care in zona de <body></body> apelam stilul #numestil1 pentru
elementul h2
<h2 id=numestil1>Acesta este un header 2 cu stilul ‘numestil’. </h2>
6. Moduri de folosire a CSS
• Cum poate fi folosit CSS: CSS poate fi adăugat documentelor HTML
în 3 moduri:
a) Inline: folosind atributul style din interiorul elementelor HTML
b) Internal: utilizând elementul <style> în secțiunea <head>
c) External: utilizând un element <link> pentru a vă conecta la un
fișier CSS extern
Modul 1: In-line
• CSS Inline este utilizat pentru a aplica un stil
unic unui singur element HTML.
• CSS Inline folosește atributul style al unui
element HTML.
• Exemplu: • <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>
• Rulare cod:
Modul 2: Internal
• Un CSS internal este utilizat pentru a defini un stil
pentru o singură pagină HTML.
• Un CSS internal este definit în secțiunea <head> a
unei pagini HTML, într-un element <style>.
• Exemplu:
• <!DOCTYPE html>
• <html> • Aici este definit
• <head> elementul Internal
• <style> CSS și se aplică
• body {background-color: powderblue;}
întregii pagimi HTML
• h1 {color: blue;}
• p {color: red;}
• </style> • Rulare cod:
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
Modul 3: External
• Un CSS external este utilizată pentru a defini stilul pentru
multe pagini HTML.
• Pentru a utiliza fișier CSS extern, adăugați un link către
aceasta în secțiunea <head> a fiecărei pagini HTML
• Exemplu: • <!DOCTYPE html>
• <html>
• <head>
• <link rel="stylesheet" href="[Link]">
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
• Rulare cod:
• Observații: Extensia fișierului CSS este .css
• Dacă deschidem fișierul [Link] utilizat în codul anterior,
acesta arată sub forma următoare:
• body {
• background-color: powderblue;
• }
• h1 {
• [Link]: • color: blue;
• }
• p {
• color: red;
• }
Stilurile definite in interiorul etichetelor <style></style> pot
fi transferate intr-un fisier extern, existand posibilitatea ca
aceleasi stiluri definite sa fie folosite pentru mai multe pagini
HTML (fara a mai rescrie partea de limbaj referitoare la stiluri).
Fisierele create au extensia .css sau .html, iar in interiorul
fisierului nu mai apar etichtele <style></style>.
In fisierul HTML care apeleaza fisierul de stiluri, in sectiunea
<head></head> se introduce o eticheta link care are urmatoarele
trei atribute:
-rel – care are valoarea stylesheet
-href – adresa sau link-ul catre fisierul cu stiluri
-type – care are valoarea “text/css”
Atribut Descriere Valori
URL-ul (imaginii) sau culori
background imagini sau culori de fundal
date prin nume sau valoare
color culoarea textului nume sau valoare RGB
Numele fontului sau al familiei
font-family tipul fontului
de fonturi
data in puncte(pt), inch(in),
font-size dimensiunea fontului
centimetri(cm), pixeli(px)
font-style text cursiv normal, italic
extra-light, light, demi-light,
font-weight grosimea fontului medium, demi-bold, bold,
extra-bold
data in puncte(pt), inch(in),
distanta dintre liniile de baza
line-height centimetri(cm), pixeli(px),
ale randurilor
procent(%)
distanta fata de marginea din data in puncte(pt), inch(in),
margin-left
stanga a paginii centimetri(cm), pixeli(px)
distanta fata de marginea din data in puncte(pt), inch(in),
margin-right
dreapta a paginii centimetri(cm), pixeli(px)
distanta fata de textul precedent
data in puncte(pt), inch(in),
margin-top sau fata de marginea de sus a
centimetri(cm), pixeli(px)
paginii
left(stanga), center(centru),
text-align alinierea textului
right(dreapta), justify
none(nimic),
text-decoration evidentierea textului underline(subliniat),
italic(cursiv), line-through(taiat)
distanta primului rand fata de data in puncte(pt), inch(in),
text-indent
marginea din stanga centimetri(cm), pixeli(px)
none, groove, dotted, dashed, solid,
border-style tipul chenarului
double, ridge, inset, outset
data in puncte(pt), inch(in),
border-width grosimea chenarului
centimetri(cm), pixeli(px)
border-color culoarea chenarului nume sau valoare RGB
opacity Transparenta imaginii Valori intre 0.0-1.0
border Chenar imagine Exprimat in px
Width, Height Dimensiuni imagine Exprimate in px
