Scribd
Încărcați
34 vizualizări

C3 CSS Introduction

Documentul prezintă introducerea în limbajul CSS și modurile de utilizare a acestuia. Sunt explicate tipurile de stiluri CSS (dedicate, clase, identificate), sintaxa CSS și modurile de a include fișiere CSS (inline, internal, external).

Încărcat de

Elena Iuliana Solomia
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
34 vizualizări

C3 CSS Introduction

Documentul prezintă introducerea în limbajul CSS și modurile de utilizare a acestuia. Sunt explicate tipurile de stiluri CSS (dedicate, clase, identificate), sintaxa CSS și modurile de a include fișiere CSS (inline, internal, external).

Încărcat de

Elena Iuliana Solomia
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 25

Centrul de Instruire pentru

Tehnologia Informației și
Apărare Cibernetică

CURS 3-CSS Introduction

Întocmit:
Lt.drd.ROMANIUC Alexandru-Gabriel
[email protected]
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”.
3.2 Clase de stiluri:
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.
3.2 Clase de stiluri:
• 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>
3.2 Clase de stiluri:

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>

• <div class="city">
• <h2>Paris</h2>
• <p>Paris is the capital of France.</p>
• </div>

• <div class="city">
• <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
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
data in puncte(pt), inch(in),
margin-top precedent sau fata de marginea
centimetri(cm), pixeli(px)
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
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

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