Selectoare CSS
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:
nume_proprietate: valoare;
nume_proprietate2: valoare;
}
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ă.
<!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>
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:
<!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.
<!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>
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.