C3 CSS Introduction

Centrul de Instruire pentru
Tehnologia Informației și
Apărare Cibernetică
CURS 3-CSS Introduction
Întocmit:
Lt.drd.ROMANIUC Alexandru-Gabriel
romaniuc_alexandrugabriel@yahoo.com
1. Introducere
• CSS – Cascading Style Sheets,
este un limbaj care descrie
stilul unui document HTML,
respectiv cum ar trebui afișate
elementele unui document HTML.
Limbajul CSS face referire la
aspectul paginii Web și la
modul de aranjare în pagină a
elementelor HTML.
• Prin intermediul limbajului CSS, putem controla culoarea, fontul,

dimensiunea textului, spațiul dintre elemente, modul în care
elementele sunt poziționate și așezate în pagină, ce imagini de
fundal sau culori de fundal vor fi utilizate, afișaje pentru
diferite dispozitive și dimensiuni de ecran și multe altele!
1. Introducere
• CSS permite crearea unui stil pentru fiecare tag din cadrul unui
document HTML. Același stil definit poate fi folosit ulterior în
toate paginile HTML create, reducând astfel efortul de a formata
documentele. Stilul, este o entitate care odată definită poate fi
folosită 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. Sintaxele CSS pot fi plasate în tag-ul <style>…</style>
sau într-un fișier .css
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 punct și virgulă ;
• Declarațiile: sunt formate dintr-un duo determinate de
Property:Value, Property= specific CSS (EXEMPLU: color, font-size)
Exemplu:
Stilul CSS se aplică acestui
Conținut Simplu 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.
3.Tipuri de stiluri:
Există mai multe tipuri de modalități prin intermediul cărora putem
stiliza un element din HTML, și anume:
1. Stiluri dedicate
2. Clase de stiluri
3. Stiluri identificate
Stil dedicat Clasa de stil Stil identificat
<style> <style> <style>

h1 {text-align:center;} p.numeclasa3 {text-align:left;} #numestil1 {text-align:center;}
p {text-align:left;} h1.numeclasa4 {color:red;} #numestil2 {text-align:left;}
</style> </style> </style>
3.1 Stiluri dedicate:
Def. Aceste stiluri se aplica automat tag-urilor sau elementelor
HTML pentru care au fost inițializate/declarate.
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
elementul h1, h2, h3 si p, prin urmare, toate elementele h1, h2, h3
si p care se vor defini in zona de <body>...</body> vor fi
stilizate conform stilului definit în <style>…</style>.
3.2 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 element
din cadrul documentului.
Exemplu 1: Definirea clasei de stiluri

<style>
all.numeclasa1 {text-align:center; color:blue;}
.numeclasa2 {text-align:right;color:yellow;}
</style>
• !!In exemplul 1 s-a definit o clasă cu numele “numeclasa1”.

Atributul “all” din fața numelui specifică faptul că această
clasă se poate aplica oricărui element din codul HTML. Pentru
clasa “numeclasa2”, observăm un punct . în fața numelui clasei,
acest punct acționează identic precum atributul “all”.
Exemplu 2: Definirea clasei de stiluri
<style>
p.numeclasa3 {text-align:left; color:red;}
h1.numeclasa4 {color:red;}
</style>
• !!In exemplul 2 de mai sus s-a definit o clasă cu numele

“numeclasa3”. Atributul “p” din fața numelui specifică faptul că
această clasă se poate aplica doar elementelor p din codul HTML.
Pentru clasa “numeclasa4”, observăm atributul h1 în fața numelui
clasei, acest lucru semnifică faptul că această clasă poate fi
aplicată doar elementelor h1 din codul HTML.
• Def: HTML class este un atribut foarte important în HTML, prin
intermediul lui se specifică o anumită clasă pentru un element
din HTML. Atributul class HTML este folosit pentru a defini
stiluri egale pentru elemente cu același nume de clasă.
• Deci, toate elementele HTML stilizate cu aceeași clasă de stil
vor obține același stil.
APELAREA CLASE DE STILURI:

• <p class=numeclasa1>This is a paragraph.</p>
• <h2 class=numeclasa2>Acesta este un header 2 stilizat cu clasa de
stil numeclasa2</h2>
• <p class=numeclasa3>This is a paragraph.</p>
• <h2 class=numeclasa4>Acesta este un header 2 stilizat cu clasa de
stil numeclasa3.</h2>
GREȘIT: • <p class=numeclasa4>This is a paragraph.</p>

• <h2 class=numeclasa3>Acesta este un header 2 care
este stilizat cu clasa numeclasa3.</h2>
APELAREA CLASE DE STILURI:
• Exemplu 3: In următorul exemplu, avem 3 elemente <div> cu

atributul class care are valoarea “city”. Toate cele 3 elemente
vor fi stilizate în mod egal în concordanță cu stilul definit în
în clasa cu numele .city
Cod: • În clasa .city este definit stilul, respectiv
• <!DOCTYPE html> modul de afișare.
• <html>
• <head>
•
•
<style>
.city {
Rulare cod:
• background-color: tomato;
• color: white;
• border: 2px solid black;
• margin: 20px;
• padding: 20px;
• }
• </style>
• </head>
• <body>
• <div class="city">
• <h2>London</h2>
• <p>London is the capital of England.</p>
• </div>
• <h2>Paris</h2>
• <p>Paris is the capital of France.</p>
• </div>
• <h2>Tokyo</h2>
• <p>Tokyo is the capital of Japan.</p>
• </div>
• </body>
• După ce se apelează cele 3 clase, putem
• </html> introduce paragrafe, heading-uri etc.
• Elementele HTML pot aparține mai multor clase. Pentru a defini mai multe
clase, separați numele claselor cu un spațiu.
• De ex. <div class = "city main">.
• Elementul va fi stilizat în conformitate cu toate clasele specificate.
Exemplu 4: • <h2 class="city main">London</h2>

• <h2 class="city">Paris</h2>
• <h2 class="city">Tokyo</h2>
Rulare cod:
3.3 Stiluri identificate
Def: Stilurile identificate se declară sub forma #numestil iar
pentru apelarea acestor stiluri se folosește id=numestil, pentru
elementul din documentul HTML pentru care se doreste aplicarea lui.
Exemplu declarare:
<style>
#numestil1 {text-align:center; color:blue;}
#numestil2 {text-align:left; color:red;}
</style>
Exemplu apelare:
<h2 id=numestil1>Acesta este un header 2 cu stilul ‘numestil’. </h2>

4. Moduri de utilizare CSS
Def: Liniile de cod specifice limbajului de programare CSS sunt
introduse în fișiere ce au extensia .css și care au forma sintaxei
CSS definită la începutul cursului.
Moduri utilizare CSS:
a) Inline: folosind atributul style în 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 în interiorul elementului HTML.
Exemplu Inline: • <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>
Rulare cod:
Modul 2: Internal
• CSS internal este utilizat pentru a defini un stil pentru întreaga
pagină HTML.
• CSS internal este definit obligatoriu în secțiunea <head> a unei
pagini HTML, într-un folosind tag-ul <style>.
Exemplu Internal:
• <!DOCTYPE html>
• <html> • Aici este definit
• <head> elementul Internal
• <style> CSS și se aplică
• body {background-color: powderblue;}
întregii pagini 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
• CSS external este utilizat pentru a defini stilul pentru mai
multe pagini HTML.
• CSS external presupune utilizarea/importarea unui fișier .css în
codul sursă al paginii Web. Pentru a utiliza acest fișier CSS
extern, se va adăuga un link către aceasta în secțiunea <head> a
fiecărei pagini HTML.
Exemplu • <!DOCTYPE html>

External: • <html>
• <head>
• <link rel="stylesheet" href="styles.css"> Rulare cod:
• </head>
• <body>
• <h1>This is a heading</h1>
Fișierul
• <p>This is a paragraph.</p>
CSS • </body>
• </html>
• Observații: Extensia fișierului ce conține elementele de stilizare
CSS și care trebuie importat este .css
• Dacă deschidem fișierul styles.css utilizat în codul anterior,
acesta arată sub forma următoare:
styles.css: • body {
• background-color: powderblue;
• } Block-uri de
• h1 {
• color: blue;
declarație/
• } stilizare pentru
• p { fiecare element
• color: red; HTML
• }
• Stilurile definite in interiorul etichetelor <style></style> pot

fi transferate într-un fisier .css, existând posibilitatea ca
aceleași stiluri definite să fie folosite pentru mai multe pagini
HTML (fara a mai rescrie codurile, ci prin simpla apelare a acelui
fișier .css în fiecare pagină HTML).
MODURI DE IMPORT DIN SURSĂ EXTERNĂ, A FIȘIERELOR .css:
Metoda 1: • <link rel="stylesheet" href="styles.css">
• Atributele din linia de cod de mai sus, au următoarele roluri:

-rel – va avea valoarea stylesheet.
-href – adresa sau link-ul către fișierul .css respectiv CSS.
-type – opțional, care poate avea valoarea “text/css”.
Metoda 2: • @import url('/css/styles.css');

• sau
• @import 'https://fonts.googleapis.com/css?family=Lato';
• Def: Instrucțiunea @import este folosită pentru a importa fișiere

CSS și care trebuie urmată de o adresă URL a locației unde se află
fișierul .css
CÂTEVA EXEMPLE DE PROPRIETĂȚI CARE POT FI
INSERATE ÎNTR-UN FIȘIER .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
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
margin-top precedent sau fata de marginea
de sus a 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,
border-style tipul chenarului solid, double, ridge, inset,
outset
border-width grosimea chenarului
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

C3 CSS Introduction

Î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

C3 CSS Introduction

Încărcat de

Drepturi de autor:

Formate disponibile

Centrul de Instruire pentru

CURS 3-CSS Introduction

• Prin intermediul limbajului CSS, putem controla culoarea, fontul,

• Selector = este folosit pentru a indica elementul căruia să i se

Stil dedicat Clasa de stil Stil identificat

<style> <style> <style>

Exemplu: <style> CSS Syntax

Obs. Stilurile dedicate se definesc in sectiunea <head>...</head> a

Exemplu 1: Definirea clasei de stiluri

• !!In exemplul 1 s-a definit o clasă cu numele “numeclasa1”.

• !!In exemplul 2 de mai sus s-a definit o clasă cu numele

APELAREA CLASE DE STILURI:

GREȘIT: • <p class=numeclasa4>This is a paragraph.</p>

APELAREA CLASE DE STILURI:

• Exemplu 3: In următorul exemplu, avem 3 elemente <div> cu

Exemplu 4: • <h2 class="city main">London</h2>

<h2 id=numestil1>Acesta este un header 2 cu stilul ‘numestil’. </h2>

Exemplu • <!DOCTYPE html>

• Stilurile definite in interiorul etichetelor <style></style> pot

Metoda 1: • <link rel="stylesheet" href="styles.css">

• Atributele din linia de cod de mai sus, au următoarele roluri:

Metoda 2: • @import url('/css/styles.css');

• Def: Instrucțiunea @import este folosită pentru a importa fișiere

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

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