Clase de CSS

Ce este o clasa?

clasa = template

Clasa este un element de CSS care ușurează viața web developerilor. În interiorul acesteia se scriu elementele de style, iar clasa poate fi folosită ulterior în limbajul HTML fiind apelată precum orice altă atribută:

<p class=”numele_clasei”> text </p>

Clasa vs style

De ce ai folosi o clasa în loc de a folosi atributa style? Când folosim clase și când folosim atributa style?

O clasa este folosită atunci când vrem să folosim un ansamblu de elemente de CSS de mai multe ori de-a lungul codului. De exemplu, dacă avem un titlu care dorim să fie aliniat pe centru, roșu, subliniat și să aibă fontul Courier este mai avantajos să creăm o clasa și să o apelăm de câte ori avem nevoie decât să scriem pentru fiecare titlu, de fiecare dată aceleași proprietăți și aceleași valori ale CSS-ului. Folosim un template, un șablon, o clasa, pentru a nu ne repeta.

Un style este folosit atunci când avem nevoie de anumite proprietăți ale CSS-ului o singură dată și suntem 100% siguri de asta. Un style este mai simplu de implementat decât a implementa o clasa.

Astfel:

style (o singură dată) > class

style (de două ori) < class

Cum se folosește o clasă?

Clasele sunt elemente ale CSS-ului, așadar vor fi declarate în interiorul unui style sub formă de tag, precum în imaginea de mai jos.

O clasa este creată sub formă: .nume .

După ce clasa primește un nume codul CSS va fi scris între acolade. Astfel, structura unei clase va fi:

<style>

.nume{
	proprietate: valoare;
	proprietate: valoare;
}

</style>

Observații: Numele claselor pot conține underline ( _ ), minus ( - ).

Restricții: spații în numele clasei; punctul ( . ); alte semne de punctuație.

Numele clasei este CasE SEnSitiVE

După ce este scrisă proprietatea și valoarea îi spunem CSS-ului că am terminat propritatea folosind “ ; “.

După ce declarăm o clasă, o putem apela în interiorul codului HTML.

<p class=”nume_clasa”> paragraf formatat cu ajutorul clasei numite “nume_clasa” </p>

De asemenea, fiecare element html poate avea mai mult de o clasă, numele acestora fiind separate printr-un spațiu.

Tag-urile diferite pot avea aceeași clasă.

Exerciții:

1. Creați 4 clase cu numele roșu, albastru, galben și mov care cuprind proprietatea color și valoarea corespunzătoare. Creați paragrafe cu textul “acest paragraf este …”. Completați cu numele culorii, apoi adăugați CSS-ul cu ajutorul atributei class.

Soluţie

Soluţie


2. Creați 4 clase diferite, astfel încât fiecare să conțină o singură proprietate + valoare. Exemplu:

.dimensiune{
	font-size: 150%;
}

Creați 4 clase astfel încât culoarea să fie dimensiunea de 150%, roșu, fontul Courier, iar textul să fie aliniat pe centru. Atribuiți toate cele 4 clase clasele unui singur paragraf care conține textul “Paragraf cu clase multiple”. Rezultat final:

Soluţie

Soluţie


3. Creați o singură clasă folosind toate proprietățile și valorile de la exercițiu anterior. Atribuiți clasa aceluiași paragraf.

Soluţie

Soluţie


4. Creați o clasăcare să aibă fundalul #b5ffc3 . Atribuiți clasa tag-ului body dela exercițiul anterior.

Hint: #b5ffc3 este de asemenea o culoare, doar că are nume în cod hexazecimal. Această valoare se atribuie proprietății la fel cum se atribuie orice altă culoare.

style = “color: #b5ffc3”

Soluţie

Soluţie


5. Creați un heading cu textul “Titlu” cu cea mai mare importanță (h1). Cu ajutorul unei singure clase, formatati titlul astfel încât să fie de 200%, să aibă culoarea portocaliu și să fie subliniat.

Soluţie

Soluţie


6. În continuarea exercițiului 5, creați un paragraf cu textul “Titlu”. Cu ajutorul unei clase ajustați proprietățile CSS ale paragrafului astfel încât să aibă același aspect de h1.

Tips: Textul poate fi boldat cu ajutorul proprietății font-weight. Valorile care pot fi atribuite sunt: multiplii de 100 de la 100 până la 900 bold

Soluţie

Soluţie


7. Folosind clase, scrieți textul de mai jos. Tips: recomandăm folosirea mai multor paragrafe.

Soluţie

Soluţie


You could leave a comment if you were logged in.