AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Selectoare CSS


Next Page >>
HTML images

CSS Tutorial » Selectoare CSS

Un selector CSS selectează elementele HTML pe care doriți să le stilizați.

Selectorii CSS sunt utilizați pentru a „găsi” (sau selecta) elementele HTML pe care doriți să le stilizați.

Putem împărți selectorii CSS în cinci categorii:

Selector universal notat cu un asterisc (*), se potrivește cu toate elementele de pe pagină
Selectoare simple (selectați elemente în funcție de nume, cod, clasă)
Selectoare combinate (selectați elemente pe baza unei relații specifice între ele)
Selectoare pseudo-clase (selectați elemente pe baza unei anumite stări)
Selector de pseudo-elemente (selectați și stilizați partea unui element)
Selectoare de atribute (selectați elemente pe baza unui atribut sau a unei valori de atribut)

 

Syntaxa:

selector_name {
nume_proprietate: valoare;
nume_proprietate2: valoare;
}
Nota: O declarație CSS se termină întotdeauna cu un punct și virgulă ";", iar grupurile de declarații sunt întotdeauna înconjurate de paranteze pătrate „{}”.

 

Selector universal

Selectorul universal poate fi omis dacă există alte condiții pe element. Acest selector este adesea utilizat pentru a elimina umplutura și marjele implicite din articole pentru testare rapidă.

Exemplu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemplu de selector universal CSS</title>
<style>
* {
font-family: "Comic Sans MS", cursive;
color: #39C;
}
</style>
</head>
<body>
<h1>Acesta este un titlu.</h1>
<p>Acesta este un paragraf.</p>
</body>
</html>
Nota:  Regulile de stil din selectorul * se vor aplica tuturor elementelor dintr-un document.

 

Selectoare tip element

Un selector de tip de element corespunde tuturor instanțelor de element din document cu numele tipului de element corespunzător.
Să încercăm un exemplu pentru a vedea cum funcționează efectiv:

Exemplu
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Exemplu de selector de tip element CSS</title>
<style>
h1 {
color: red;
font-size: 24px;
font-family: "Comic Sans MS", cursive;
}
p {
color: #3375FF;
font-weight: bold;
font-size: 18px;
font-family: "Comic Sans MS", cursive;
}
</style>
</head>
<body>
<h1>Acesta este titlul</h1>
<p>Acesta este un paragraf.</p>
</body>
</html>

 

Selectoare de identificare

Selectorul de id este utilizat pentru a defini regulile de stil pentru un singur element sau un singur element.

Selectorul de identificare este definit cu un semn de lire (#) urmat imediat de valoarea de identificare.

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
#element1 {
text-align: center;
color: red;
font-size: 18px;
font-weight: bold;
}
#element2 {
color: #06F;
font-family: "Comic Sans MS", cursive;
font-size: 16px;
}
</style>
</head>
<body>

<p id="element1">Salut Lume!</p>
<p id="element2">Bună Romania!</p>
<p>Acest paragraf nu este afectat de stil.</p>

</body>
</html>

Nota: Valoarea unui atribut de identificare trebuie să fie unică într-un document dat, ceea ce înseamnă că niciun element din documentul dvs. HTML nu poate împărtăși aceeași valoare de identificare.
tipuri de selectoare
combinație de selectoare
care sunt selectorele css, listă
Tags: Care sunt selectorii css, Selectoare CSS, tipuri de selectoare, combinație de selectoare, care sunt selectorele css, listă, exerciții

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.