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.