Readme

UNIVERSITATEA DE STAT DIN MOLDOVA
FACULTATEA DE FIZICĂ ȘI INGINERIE
Web Design
Tema 3. Stiluri de pagină – CSS.

Selectori, clase și id-uri
Beldiga Maria, dr., conf. universitar
Chișinău, 2018
AGENDA
17.02.2018
Introducere
Proprietăți CSS
Stiluri CSS
Selectori și declarații
Foi de stil
Clase, id-uri și pseudoclase
Definirea culorilor cu ajutorul stilurilor CSS
2
INTRODUCERE
17.02.2018
Prin utilizarea CSS (Cascading Style Sheets - foi
de stil in cascada) se realizează formatare a
întregului website,
 prin schimbarea sau
 adaugarea unor elemente
in codul CSS, ne mai fiind nevoie sa se lucreze

• la fiecare pagina sau
• la fiecare element din pagina.
3
INTRODUCERE
17.02.2018
 CSS se ocupa in general cu aspectul si controlul
grafic al elementelor din pagina, cum ar fi:
• textul,
• imaginile,
• fondul,
• culorile si aşezarea acestora in cadrul ferestrei
paginii.
 CSS foloseste stiluri, acestea inglobeaza, sub un
anumit nume, atribute de formatare care se
aplică:
• asupra unui element individual din pagina;
• asupra unui grup de elemente; 4
• nivelul întregului document.

INTRODUCERE
NIVELELE CSS - NIVELUL 1
17.02.2018
 Nivelul CSS1 (Cascading Style Sheets - level 1) –
mecanism simplu care permite autorilor şi utilizatorilor
paginilor Web să ataşeze acestora stiluri
(de exemplu, fonturi, culori şi spaţieri).
Este uşor de înţeles şi de folosit de designerii Web şi
exprimă stilurile conform terminologiei editării
computerizate.
5
INTRODUCERE
17.02.2018
 CSS2 (Cascading Style Sheets - level 2) – generalizare
(extensie) a primului nivel de foi de stiluri, aducând în
plus facilităţi
 de moştenire a foilor de stiluri;
 efecte vizuale;
 poziţionări;
 paginări;
integrarea mai multor tipuri de medii (suport pentru sunet).
6
INTRODUCERE
17.02.2018
 CSS3 contine proprietati noi pt. background:
 background-size;
 background-origin;
 background-clip;
 CSS3 permite adăugarea mai multor imagini pentru
fundalul unui element, si chiar folosire culori
gradient, cu linear-gradient.
 CSS3 contine caracteristici noi care permit crearea de
colturi rotunjite, umbre la chenare si folosirea unei
imagini pentru aspectul bordurii.
 CSS3 introduce noi proprietati pentru efecte de text:
 text-shadow;
 word-wrap;
 text-overflow. 7
INTRODUCERE
17.02.2018
 CSS3 permite transformari 2D
 CSS rotate()
 Metoda scale()
 CSS skew()
Cu proprietatea CSS transform

 se poate modifica forma, marimea si pozitia
elementelor HTML.
 se pot transforma elementele HTML in plan 2D sau
3D.
 CSS3 transition poate fi utilizat pentru a anima
proprietatile CSS, adaugand un efect de animatie
cand se modifica proprietatile CSS ale unui 8
element HTML, schimband gradual de la un stil

la altut.
PROPRIETĂȚI CSS
17.02.2018
 Prin utilizarea CSS aspectul documentului pe
ansamblu, sau a unui element individual din
interiorul sau, poate fi controlat mult mai usor.
 Stilurile pot fi aplicate asupra unui element, a

unui document sau chiar asupra unui intreg site
web.
 CSS functioneaza cu HTML, insa nu este HTML.
 El extinde functionalitatile HTML, permiţând 9
redefinirea etichetelor HTML existente.

STILURI CSS
17.02.2018
 http://marplo.net/html/stiluri_css.html
10
ETICHETE HTML ȘI STILURI CSS
17.02.2018
CSS ofera posibilitatea de a
schimba aspectul fiecarei
etichete in parte, prin stabilirea
unui anume stil in interiorul ei,
cu atributul "style".
 Sintaxa pentru definirea
stilurilor in interiorul unei
etichete HTML este
urmatoarea:
CSS permite si definirea unor
reguli de stil generale intr-o
pagina web. Acest set de reguli
trebuie scris in sectiunea de
antet (head) a documentului, in
cadrul tag-ului <style>.
 Sintaxa pentru definirea CSS
intr-un document HTML, in
interiorul etichetei <head>
</head>, este urmatoarea:
11
SELECTORI ȘI DECLARAȚII
SINTAXA CSS
17.02.2018
 http://html.cpf.ro/CSS3/index.php
12
SCRIEREA CODULUI CSS
17.02.2018
 Codurile CSS pot fi scrise in
interiorul paginii sau intr-
un fisier extern cu
extensia".css".
 Codul CSS este alcatuit din:
 obiectul care va fi formatat.
 proprietatile acestuia si
 valoarea (sau atributele)
fiecarei proprietati.
 Cand este adaugat in
documentul HTML, trebuie
scris in cadrul unui tag
<style> in sectiunea HEAD
a documentului HTML, 13
SCRIEREA CODULUI CSS – OBSERVAȚII
17.02.2018
 Perechile proprietate:valoare se scriu intre
acoladele obiectului CSS pe care-l definesc, intre
"proprietate" si "valoare" trebuie sa fie un
caracter doua-puncte (:)
iar la sfarsitul perechii se adauga un caracter
punct-si-virgula (;)
 Cand este adaugat intr-un fisier extern ".css",
codul CSS se scrie la fel, dar nu se mai adauga
tag-ul <style>.
14
OBIECTELE (REGULILE) CSS
17.02.2018
Exista trei tipuri principale de
obiecte CSS:
Selector;
Clasa;
Identificator.
15
OBIECTELE (REGULILE) CSS
17.02.2018
Selectorul HTML
 se foloseste pentru a
redefini modul de afisare a
continutului etichetei
HTML.
 reprezinta partea etichetei
HTML care indica
navigatorului tipul de
eticheta. În exemplu selectorul este "h1"
 Definirea unui selector

HTML folosind CSS are ca
rezultat redefinirea etichetei
HTML.
 Selectorul si eticheta desi par
identice, totusi nu sunt. 16
COMPONENTELE UNUI OBIECT CSS
17.02.2018
Obiectele CSS, indiferent de tipul lor, au in componenta
urmatoarele elemente:
 Selectorii - identifica un obiect, pot fi selectori de:
 etichete HTML,
 clase sau
 identificatori.
 Proprietatile
 identifica o proprietate a obiectului;
 se refera in special la aspect.
 Valorile - sunt atributele unei proprietati, pot fi:
 cuvinte cheie,
 valori numerice sau
 procentuale,
17
tipul valorii depind de proprietate.
COMPONENTELE UNUI OBIECT CSS
17.02.2018
 Sintaxa generala a unei reguli CSS este
urmatoarea:
selector {proprietate: valoare; }
 Proprietatile si valorile constituie definitia regulii
(obiectului) CSS.
 Acestea se regasesc sub forma de perechi, despartite
de caracterul doua puncte ”:”,
 fiecare pereche se termina cu un caracter punct si
virgula ";".
 toate etichetele si toti selectorii trebuie scrisi cu litere
mici.
18
DEFINIREA SELECTORILOR
17.02.2018
 Selectorii HTML pot fi definiti prin
adaugarea unui numar de definitii
compatibilie cu eticheta HTML la
care se refera, avand urmatoarea
forma generala:
 Utilizarea selectorilor de tip clasa
ofera posibilitatea configurarii unor
stiluri care se pot aplica doar acelor
elemente care sunt etichetate cu
clasa respectiva. Sintaxa generala
de definire a unei clase CSS este:
 Pentru a defini o clasa care sa
afecteze in mod direct un anume
selector HTML, se foloseste
urmatoarea sintaxa:
 Asemanator cu selectorii de clasa se
definesc si identificatorii (id-ul).
Acestia sunt folositi pentru crearea
de stiluri care pot fi atribuite unei
singure etichete HTML dintr-o
pagina. Sintaxa generala de
definire a unui identificator este
19
DEFINIREA UNOR REGULI SIMILARE
17.02.2018
Daca mai multi selectori folosesc aceleasi definitii
css, acestia pot avea aceeasi lista de elemente,
fiind scrisi separat prin virgule.
Sintaxa generala pentru definirea unei liste cu mai
multi selectori este urmatoarea:
selector1, selector2, ... { proprietate1:valoare1;
proprietate2:valoare2; ... }
Impreuna cu selectorii pot fi de asemenea definiti
identificatorii si clasele.
Dezavantajul ar fi ca in momentul in care este modificata o valoare a unei proprietati
incluse in definitie, valoarea respectiva se va modifica in toate etichetele reprezentate de
acesti selectori . 20
DEFINIREA ETICHETELOR ÎN CONTEXT
(IMBRICATE)
17.02.2018
Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una
in interiorul alteia), spunem ca aceste etichete sunt imbricate.
Eticheta exterioara se numeste, in acest caz, eticheta parinte, iar cea
inferioara se numeste copil.
Se pot crea reguli care revin numai etichetelor copil, sintaxa generala a
unei astfel de reguli fiind:
selector1 selector2 ... { proprietate1:valoare1;
proprietate2:valoare2; ... }
 Unde "selector1" este selectorul parinte iar
 "selector2" este selectorul copil.
Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din
lista este cel care primeste toate stilurile incluse in regula si in plus le
mosteneste si pe cele ale parintilor.
Ca si selectorii singuri, selectorii imbricati pot include in lista clase,
identificatori sau selectori HTML.
Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o
eticheta parinte care le inconjoara.
De cele mai multe ori stilurile etichetelor din interior preiau stilurile
etichetelor parinte (exista insa cazuri in care proprietatile nu sunt 21
mostenite de etichetele imbricate).
FOI DE STIL
17.02.2018
O foaie de stil poate fi inserată în trei moduri:
 - Foaie externă de stil / inserarea stilurilor într-o
pagină externă;
 - Foaie internă de stil / inserarea stilurilor în
secțiunea HEAD;
 - Stil inline / inserarea stilurilor în cadrul etichetelor.
22
FOI DE STIL
FOAIE EXTERNĂ DE STIL
17.02.2018
O pagină separată concepută doar pentru stiluri este ideală
în cazul realizării unui site cu multe pagini web.
În cazul în care se dorește modificarea aspectului site-ului,
nu se vor modifica toate paginile site-ului ci doar pagina
de stil.
Fiecare pagină din cadrul site-ului trebuie să conțină o
legătură către pagina respectivă.
Această legătură se crează în secțiunea HEAD cu ajutorul
etichetei <link>.
23
CREAREA FOILOR DE STIL /
17.02.2018
Crearea unei foi de stil
externe se face scriind
codul CSS intr-un fisier
text cu sau specializat
(Notepad++).
1. In fisierul extern creat se • LINK apare in antetul
adauga reguli CSS, fara documentului (sectiunea
insa ca aceste reguli sa head),
fie incadrate in etichete
STYLE. • "rel" – legatura cu o foaie
de stil,
2. Dupa ce a fost creata
foaia de stil externa, • "type" - tipul codului din
aceasta poate fi folosita fisier
de un document HTML • "href" – calea si numele
utilizand urmatoarea complet al fisierului,
sintaxa, in interiorul tag- inclusiv extensia
ului <head> </head>:
24
17.02.2018
O alta modalitate de utilizare a foilor
de stil externe intr-un document
HTML o reprezinta importul
acestora folosind comanda
@import.
Sintaxa pentru importul unei foi de stil
externe
 Pentru a importa un fisier CSS
extern se foloseste in cadrul
sectiunii HEAD a documentului
HTML eticheta STYLE. Observații
 In cadrul acestei etichete este  Alaturi de instructiunea "@import",
adaugata in cadrul etichetei STYLE, pot fi
 instructiunea "@import”, unde adaugate definiti si selectori
 "nume_fisier.css" reprezinta calea si
suplimentari.
numele fisierului ce contine regulile  Legatura la un fisier CSS extern
CSS definite. sau importul acestuia intr-un
. document HTML are acelasi efect
ca si cum stilurile incluse ar fi fost
definite direct in eticheta STYLE
din sectiunea HEAD a
documentului HTML 25
FOI DE STIL
FOAIE EXTERNĂ DE STIL
17.02.2018
O foaie externă de stil
 poate fi scrisă în Notepad++,
 nu trebuie să conțină taguri html și
 trebuie salvată cu extensia .css. 26
FOI DE STIL
FOAIE INTERNĂ DE STIL
17.02.2018
O foaie internă de stil trebuie folosită când un singur
document are un anumit stil.
Foaia internă de stil se definește în secțiunea head a paginii
HTML folosind tagul <style>
27
FOI DE STIL
STIL INLINE
17.02.2018
Această metodă Se folosește doar când se dorește a se
insera un stil ocazional pentru o anumită etichetă.
Stilurile se inserează în cadrul etichetei cu ajutorul
atributului style.
28
FOI DE STIL
ORDINEA DE APLICARE
17.02.2018
 setările implicite ale
browserului;
 - foi de stiluri externe

(din fișiere CSS);
 - foi de stiluri interne (din

secțiunea head);
 - stiluri inline (din tagul

elementului HTML). 29
ADĂUGAREA COMENTARIILOR LA CSS
17.02.2018
Este bine ca uneori sa fie adaugate
comentarii in codul CSS, mai ales in
cazul fisierelor externe.
Comentariile ajuta la intelegerea
codului, facandu-se astfel cunoscut,
pentru mai tarziu, rolu anumitor
elemente din codul CSS.
Pentru a adauga comentarii in regulile
de stil avem la dispozitie doua
modalitati:
 In cazul in care comentariul se intinde pe un singur
rand este suficienta folosirea perechii de caractere ’//’
urmata de comentariu.
30
 In cazul in care comentariul contine mai multe linie,
trebuie plasat intre ’/*’ care deschide zona de
comentariu si ’*/’ care indica sfarsitul comentariului.
CREAREA ETICHETELOR HTML PERSONALIZATE
17.02.2018
Majoritatea etichetelor HTML au unele proprietati prestabilite.
Acestea fie raman asa cum sunt, fie pot fi redefinite.
Exista insa cazuri in care se doreste crearea unor etichete
personalizate, pornind de la zero. In acest caz se folosesc
etichetele <span> si <div>.
Tag-urile <div></div> si <span></span> nu au efecte
importante daca sunt folosite singure.
• Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si
grafica de continut pot fi manipulate pentru fiecare separat. Are doar
un singur atribut HTML, align (pt. aliniere pe orizontala) care poate
avea urmatoarele valori: left (stanga), right (dreapta), center
(centru), justify (distanta textului fata de margini egala).
• Tag-ul SPAN creaza posibilitatea modificarii separate a unei
portiunii dintr-un context, putand fi folosit si ca o "classa" cu CSS.
Singur nu are nici un efect vizual poropriu si nu foloseste nici un
atribut HTML special.
Chiar daca folosite singure, DIV si SPAN nu au nici un efect
major, in combinatie cu CSS pot crea aspecte grafice
importante. Pentru aceasta, ambele pot folosi atributul style 31
(cu proprietati CSS) ori atributele id sau class ca identificator
pentru stiluri CSS.
CREAREA ETICHETELOR HTML PERSONALIZATE
17.02.2018
Exemple de utilizare a tagurilor div si span
http://www.marplo.net/html/div_span.html
32
CLASE, ID-URI ȘI PSEUDOCLASE
17.02.2018
 http://html.cpf.ro/CSS3/clase-CSS.php
 http://it.webdesign-galaxy.ro/id-clase-css-tutorial
 http://marplo.net/css/pseudo_clase
33
17.02.2018
Clasa
Clasa este un obiect care poate fi
aplicat oricarei etichete HTML.
1. O clasa trebuie creata in
interiorul etichetei HTML  nume_clasa", poate fi orice nume dorim.
inainte de a fi definita intr-un
cod CSS.  Numele aceleasi clase poate fi atribuit
mai multor etichete HTML din aceeasi
pagina, si toate vor prelua acelasi stil css.
2. Crearea clasei in interiorul
etichetei se face simplu, prin
specificarea cuvantului class
3. Apoi in interiorul codului
CSS, clasa trebuie definita
prin adaugarea unui caracter
punct (.) inaintea numelui
clasei. 34
17.02.2018
Identificator
Obiectele de tip identificator (ID) sunt
asemanatoare cu clasele.
 Pot fi aplicate oricarei etichete
HTML, dar spre deosebire de clase,
numele unui identificator trebuie
atribuit numai unei singure
etichete HTML dintr-o pagina, nume_id", poate fi orice nume dorim.
pentru alta eticheta se adauga un
ID cu nume diferit.
 Ca si clasa, identificatoru trebuie
intai creat in interiorul etichetei
HTML.
 Modul de creare este simplu, prin
specificarea cuvantului id si
numele clasei,
In interiorul codului CSS,
identificatorul este definit prin
adaugarea unui caracter diez (#)
inaintea numelui
35
DEFINIREA CULORILOR CU AJUTORUL
STILURILOR CSS
17.02.2018
Daca HTML permitea configurarea unor culori
doar pentru anumite elemente, CSS permite
definirea culorii pentru orice element din pagina
web.
 https://www.w3schools.com/css/css_colors.asp
 http://marplo.net/html/coduri_culori.html
36
LUCRU INDIVIDUAL
STILURI SI CODURI CSS /CSS3
17.02.2018
 http://marplo.net/css/stil-coduri-css
37

Readme

Î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

Readme

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSITATEA DE STAT DIN MOLDOVA

FACULTATEA DE FIZICĂ ȘI INGINERIE

Tema 3. Stiluri de pagină – CSS.

Beldiga Maria, dr., conf. universitar

in codul CSS, ne mai fiind nevoie sa se lucreze

• nivelul întregului document.

integrarea mai multor tipuri de medii (suport pentru sunet).

Cu proprietatea CSS transform

element HTML, schimband gradual de la un stil

 Stilurile pot fi aplicate asupra unui element, a

 CSS functioneaza cu HTML, insa nu este HTML.

 El extinde functionalitatile HTML, permiţând 9

redefinirea etichetelor HTML existente.

 Definirea unui selector

 - foi de stiluri externe

 - foi de stiluri interne (din

 - stiluri inline (din tagul

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