Logo Facebook8    Logo Youtube12     Logo twitter

Lectia 1 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 CSSsi 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.


 

Acest site foloseste cookie-uri.

Folosim cookie-uri pentru a vă asigura că aveti cea mai bună experiență pe acest site.

I understand
DESPRE NOI
World-IT este un site care are ca domeniu Tehnologia Informatiei(IT).
Acest site are ca prim scop introducerea persoanelor in acest domeniu. Mai multe informatii aici.

URMARESTE-NE 
Logo Facebook8  Logo Youtube12  Logo twitter