Curs CSS! Tutoriale CSS | id / class

Pentru a putea formata un anumit element CSS, avem nevoie de id si class.
Aceste doua atribute nu fac altceva decat sa atribuie un nume unui anumit element ce urmeaza a fi formatat.
De ce trebuie sa atribuim un nume unui element?
Pentru ca elementul respectiv sa primeasca formatarea special creata doar pentru el.
Formatarea CSS va contine si ea un nume. Daca formatarea CSS va gasi un element care sa contina numele ei, atunci va aplica respectivului element modificarile CSS pe care aceasta le contine.

Aceste doua atribute se vor initializa in eticheta <body> respectiv "<style>" (vezi Introducere CSS) si vor contine minim o instructiune care ar putea modifica un element.

Sintaxa de definire a celor doua atribute este urmatoarea:
Atributul id:
#nume
{
instructiune;
}

Atributul class:
.nume
{
instructiune;
}

In locul cuvantului "nume" se va adauga cuvant pe care il vom atribui si apela dintr-un anumit element HTML.
Intre acolade vom introduce modificariile CSS dorite (exemplu: color: "red";).

Atat id cat si class fac acelasi lucru. Doar sintaxa de definire a celor doua este diferita.

Este recomandat sa folosim atributul "class".
Dupa ce am initializat atributul in <style>, urmeaza sa il adaugam unui anumit element HTML.
Pentru a face acest lucru, va trebui sa adaugam in interiorul etichetelor html, atributul class="nume" respectiv id="nume".
Vom lua ca exemplu eticheta HTML "<p>". Aceasta eticheta creaza un paragraf. Cu ajutorul CSS vom dori sa modificam culoarea scrisului din interiorul paragrafului.

Exemplu:

<html>

<head>
<title>id / class</title>
<style>
#rosu
{
color: red;
}

.galben
{
color: yellow;
}
</style>
</head>

<body>
<p id="rosu">Paragraf 1</p>
<p class="galben">Paragraf 2</p>
</body>

</html>

↓

Paragraf 1

Paragraf 2

Explicatie:
In sectiunea <head> intre etichetele pereche <style></style>, am initializat doua atribute CSS:
#rosu{} respectiv .galben{}.
Ambele atribute contin formatarea color: red; respectiv color: yellow;. Aceasta formatare va schimba culoarea textului dintr-o anumita sectiune a paginii (in cazul nostru va schimba culoarea paragrafului "<p>").
In continuare i-am adaugat lui <p>, atributul "id" respectiv "class" cu numele pe care l-am initializat in <style>.

In urmatoarea lectie te voi invata cum se integreaza secventa CSS intr-un fisier separat care va modifica stilul paginilor mult mai usor.

Lectia 1 CSS | id / class

Acest site foloseste cookie-uri.