Introducere in CSS

INTRODUCERE IN CSS
CSS este acronimul de la Cascading Style Sheets care inseamna paginii cu stiluri in
cascada. Cu ajutorul limbajului HTML putem sa cream structura si continutul unui site
web. CSS este folosit pentru a stiliza elementele de HTML. Limbajul CSS nu este un
limbaj de programare, ci este folosit strict pentru partea de design.
Sintaza unui fisier .css este
selector { p {
proprietatea1: valoare; color: red;
proprietatea2: valoare; size: 22px;
} }
Exista trei modalitati prin care putem folosi css intr-o pagina web.
Prima modalitate prin care putem adauga stil unui element de html este folosind
atributul style in tag-ul de deschidere, atribut ce poate avea mai multe proprietati.
<p style="color: blue; font-size: 30px;"> I'm learning CSS!</p>
Acest mod de a scrie css se numeste css inline (in linie) si nu este recomandat din mai
multe motive. Primul motiv ar fi faptul ca proprietatile puse in atributil style al unui
element sunt valabile doar pentru acel element.
Un alt motiv pentru care aceasta practica nu este foarte buna este ca amestecam codul
de html cu cel de css.
Cea de a doua modalitate prin care putem sa folosim css intr-o pagina web este
folosind tag-ul <style> in interiorul tag-ului <head> (foaie de stil css interna).
<head>
<style>
p{
color:black;
font-size: 25px;
}
</style>
</head>
Intre tag-ul de deschidere si cel de inchidere al elementului <style> putem scrie codul
de css. Aceasta varianta are si ea dezavantaje deoarece codul de css scris este valabil
doar in pagina respectiva.
A treia modalitate si cea mai recomandata este folosim o foaie de stil css externa. Un
fisier css trebuie sa aiba extensia .css. Pentru aceasta in interiorul elementului <head>
vom folosi tag-ul <link> cu atributele rel, href si type.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
SELECTORI IN CSS
Exista trei tipuri (niveluri) de selectori in CSS:

 selector de tip element;
p {
color: purple;
}
 selector de tip .class (incep cu un punct inainte);

.grey {
color: gray;
}
 selector de tip #id (incep cu semnul diez)

#second {
font-style: italic;
}
Un tip de selector selecteaza toate elementele de acel tip.

Cel mai comun tip de selector este cel de tip .class, dar cel cu prioritatetea cea mai
mare este de tip .id.
Pentru numele unei clase caracterele permise sunt litere, cifre si simbolurile minus ”-” si
underscore ”_” dar intotdeauna denumirea trebuie sa inceapa cu o litera.
Ca si mod de denumire a unei clase este recomndat sa scriem cuvintele cu litere mici,
despartite prin semnul minus ”-”.
Exemplu
<h1 class="main-title">Titlu pagina</h1>
Trebuie sa folosim denumiri sugestive si scrise in limba engleza.

Pentru un element de HTML putem avea una sau mai multe clase pe care le separam
prin spatiu.
Exemplu
<h1 class="main-title text-red">Titlu pagina</h1>
Putem avea aceeasi clasa pentru mai multe elemente de HTML. In acest mod putem
stiliza mai multe elemente in acelasi fel.
Exemplu
<h1 class="text-red">Titlu pagina</h1>
<p class="text-red">Paragraf</p>
Pentru numele unui id caracterele permise sunt litere, cifre si simbolurile minus ”-” si
underscore ”_” dar intotdeauna denumirea trebuie sa inceapa cu o litera.
Ca si regula de denumire vom folosi stilul camel case, cuvintele sunt legate intre ele iar
fiecare cuvant cu exceptia primului incepe cu majuscula.
Exemplu
<h1 id="mainTitle">Titlu pagina</h1>
<button id="btnSendContactForm">Send</button>
Pentru un element de HTML putem avea o singura valoare pentru atributul id, Un id
este unic intr-o pagina web. Asta inseamna ca nu poti pune acelasi id pentru mai multe
elemente.
Un alt tip de selector este selectoul universal care este simbolizt de o steluta ” * ” si
care selecteaza toate elementele din pagina web.
In general folosim selectorul universal atunci cand vrem sa resetam anumite stiluri
pentru elemente de HTML.
Pentru a selecta mai multe elemente in acelasi timp vom scrie selectori elementelor
despartiti prin virgula ” , ”.
Exemplu
h1, h2 {
color: red;
}
Daca nu despartim selectorii prin virgula atunci stilul va fi aplicat pentru al doilea
element aflat in interiorul primului.
Exemplu
.first-article h2 {
color: brown;
}
In acest exemplu stilul va fi aplicat elementului <h2> aflat in interiorul elementului cu

atributul class=”first-article”.
Pentru a selecta elementele unei liste vom proceda astfel:
ul > li {
color: blue;
}
Asta inseamna ca vom selecta toate elementele de tip <li> care au ca parinte elementul
<ul>.
Pentru a selecta un anumit element din aceasta lista dupa selectorul ”ul > li” vom
adauga clasa elementului respectiv.
ul > li.active {
color: blue;
}
Asta inseamna din toate tagurile de tip <li> care au ca parinte elementul <ul> il
selectam doar pe cel care are atributul class=”active”. Intre li si ”.” nu exista spatiu.
Tot in cadrul unei liste putem selecta elementele unei liste astfel:
ul > li:first-child {
color: red;
}
In acest exemplu in cadrul listei am selectat primul element first-child dar putem selecta
desemenea ultimul element last-child.
Pentru a selecta un element din interiorul listei vom proceda astfel:
ul > li:nth-child(2) {
color: red;
}
Pentru a selecta un element care urmeaza imediat dupa un alt element vom folosi
semnul plus ”+” intre cele doua elemente.
h1 + p {
color: red;
}
Asta s-ar traduce ca toate elementele de tip <p> care urmeaza dupa elementele de tip
<h1> vor avea culoarea rosie.
Putem sa selectam elemente pe baza atributelor.
input[type] {
background-color: red;
}
In acest exemplu am selectat toate elementele de tip <input> care au ca atribut type
scris intre paranteze drepte.
Pentru input-uri putem modifica stilul cand se intampla diverse actiuni, ca de exemplu
cand plasam cursorul mouse-ului si dam click in interiorul campului este un eveniment
care se numeste focus.
input:focus {
}
Un alt lucru foarte des intalnit atunci cand stilizam elemente cu CSS este acel stil pe
care il dam atunci cand dam cu mouse-ul deasupra lor ca de exemplu in cazul unui
buton.
button:hover {
color: white;
}
In continuare vom analiza specificitatea CSS-ului. Atunci cand browser-ul citeste fisierul
de css, citeste de sus in jos. Asta inseamna ca pentru un element cu proprietati identice
dar valori diferite css-ul va aplica ultima regula.
h1 {
color: red;
}
h1 {
color: blue;
}
In acest exemplu pentru elementul de tip <h1> va aplica ultima regula, deci pentru titlul
<h1> va seta culoarea albastra.
Atunci cand selectam un element pe baza clasei aceasta selectie este mai specifica
fata de selectia unui element pe baza tag-ului si ca urmare aceasta ramane cea
aplicata.
.main-title {
color: blue;
}
h1 {
color: red;
}
Selectorul cu cea mai mare specificitate este cel pe baza id-ului.

#mainTitle {
color: yellow;
}
.main-title {
color: blue;
}
Deci ordinea specificitati selectorilor este
 id – (1,0,0)
 class – (0,1,0)
 element – (0,0,1)
Un alt mod de a scrie css cu o specificitate mai mare decat acestea este folosind
atributul style in iterorul elementului (css inline)
<h1 class="main-title" id="mainTitle" style="color: aqua;">Portofoliul meu</h1>
Exista totusi o specificitate mai mare decat aceasta daca folosim !important dupa
oricare din regulile de css.
h1 {
color: red !important;
}
Totusi aceste ultime doua metode nu sunt recomandate a fi folosite.
PADDING SI MARGIN IN CSS
Padding si margin sunt doua proprietati de CSS pe care le folosim pentru spatierea
dintre elementele de HTML.
Proprietatea padding se foloseste pentru a seta spatiul din interiorul unui element.
Proprietatea margin se foloseste pentru a seta spatiul din exteriorul unui element..
Mai exact proprietatea padding se foloseste pentru a seta spatiul dintre marginea
elementului si continutul lui.
.container {
background-color: lightblue;
padding: 20px;
}
In acest exemplu se aplica spatierea de 20 pixeli in toate cele patru directii dar putem
aplica doar pentru una sau mai multe separat:
 padding-top – pentru partea de sus;
 padding-right – pentru partea dreapta;
 padding-bottom – pentru partea de jos;
 padding-left – pentru partea stanga;
.container {
padding-top: 20px;
padding-left: 40px;
}
Daca dorim sa avem valori diferite de padding putem scrie acest lucru in linie ca in
exemplu urmator (ordinea valorilor fiind top, right, bottom, left):
.container {
padding: 20px; 30px; 40px; 50px;
}
Spre deosebire de proprietatea padding, margin seteaza spatiul in exteriorul unui

element. De exemplu folosind proprietatea margin putem seta spatiul dintre doua
elemente de HTML.
.container {
margin: 20px;
}
Ca si in cazul proprietati padding putem sa scriem margin in mai multe moduri:

 margin-top – pentru partea de sus;
 margin-right – pentru partea dreapta;
 margin-bottom – pentru partea de jos;
 margin-left – pentru partea stanga.
Pentru a alinia un element la centru folosind propietatea margin va trebui sa dam o
latime fixa elementului cu ajutorul proprietati width.
.container {
width: 200px;
margin: 0 auto;
}
BOX MODEL IN CSSS
In CSS toate elementele sunt reprezentate ca un box, adica ca o cutie, iar acest box
este format din mai multe componente.
 sectiunea de continut – cu proprietatile width si height (794 x 160);

.container {
width: 794px;
height: 160px;
}
 sectiunea de padding – care reprezinta spatiul dintre marginea elementului si

continut (top, bottom = 50 pixeli left, right = 20 pixeli);
.container {
padding: 50px 20px;
}
 sectinea de border – tip (solid), dimensiune (5 pixeli) si culoare (rosie);

.container {
border: solid 5px red;
}
 sectiunea de margin – care reprezinta spatiul din exteriorul elementului (top,

bottom = 50 pixeli left, right = 30 pixeli)
.container {
margin: 50px 30px;
}
Putem face ca dimensiunea elementului sa includa si padding-ul si borderul si pentru
aceasta vom folosi o prpoprietate care se numeste box-sizing cu valorea border-box.
.container {
width: 794px;
height: 160px;
padding: 50px 20px;
margin: 50px 30px;
box-sizing: border-box;
}
Pentru ca toate elementele din pagina sa respecte aceasta proprietate vom folosi
selectorul universal „ * „ astfel:
* {
box-sizing: border-box;
}
.container {
width: 794px;
height: 160px;
padding: 50px 20px;
margin: 50px 30px;
}

Introducere in CSS

Î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

Introducere in CSS

Încărcat de

Drepturi de autor:

Formate disponibile

INTRODUCERE IN CSS

<p style="color: blue; font-size: 30px;"> I'm learning CSS!</p>

Exista trei tipuri (niveluri) de selectori in CSS:

 selector de tip .class (incep cu un punct inainte);

 selector de tip #id (incep cu semnul diez)

Un tip de selector selecteaza toate elementele de acel tip.

Trebuie sa folosim denumiri sugestive si scrise in limba engleza.

In acest exemplu stilul va fi aplicat elementului <h2> aflat in interiorul elementului cu

Selectorul cu cea mai mare specificitate este cel pe baza id-ului.

Totusi aceste ultime doua metode nu sunt recomandate a fi folosite.

PADDING SI MARGIN IN CSS

Spre deosebire de proprietatea padding, margin seteaza spatiul in exteriorul unui

Ca si in cazul proprietati padding putem sa scriem margin in mai multe moduri:

 sectiunea de continut – cu proprietatile width si height (794 x 160);

 sectiunea de padding – care reprezinta spatiul dintre marginea elementului si

 sectinea de border – tip (solid), dimensiune (5 pixeli) si culoare (rosie);

 sectiunea de margin – care reprezinta spatiul din exteriorul elementului (top,

selectorul universal „ * „ astfel:

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