Selectorii
Definirea stilului începe cu selectorul. De exemplu:
div{
width: 50px; /* lățimea */
height: 50px; /* înălțimea */
background-color: red; /* culoarea fundalului */
margin: 10px; /* spațiu față de alte elemente */
}În acest caz, selectorul este div. O serie de selectori moștenesc numele elementelor pe care le formatează, de exemplu, div, p, h2 etc. Când se definește un astfel de selector, stilul său va fi aplicat tuturor elementelor corespunzătoare acestui selector. Adică stilul definit mai sus va fi aplicat tuturor elementelor `<div>` de pe pagina web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectori CSS</title>
<style>
div{
width: 50px;
height: 50px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<h2>Selectori CSS</h2>
<div></div>
<div></div>
<div></div>
</body>
</html>Aici, pe pagină sunt 3 elemente div, și toate vor fi stilizate.
Clase
Uneori, pentru aceleași elemente este necesară o stilizare diferită. În acest caz, putem utiliza clase.
Pentru a defini un selector de clasă în CSS, se pune un punct în fața numelui clasei:
.redBlock{
background-color: red;
}Numele clasei poate fi aleatoriu. De exemplu, în acest caz numele clasei este "redBlock". Totuși, în numele clasei sunt permise litere, numere, cratime și sublinieri, începând obligatoriu cu o literă.
De asemenea, este important să ținem cont de cazul literelor: numele "article" și "ARTICLE" vor reprezenta clase diferite.
După definirea unei clase, o putem aplica unui element folosind atributul class. De exemplu:
<div class="redBlock"></div>Definim și utilizăm mai multe clase:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clase CSS</title>
<style>
div{
width: 50px;
height: 50px;
margin: 10px;
}
.redBlock{
background-color: red;
}
.blueBlock{
background-color: blue;
}
</style>
</head>
<body>
<h2>Clase CSS</h2>
<div class="redBlock"></div>
<div class="blueBlock"></div>
<div class="redBlock"></div>
</body>
</html>
Identificatori
Pentru identificarea elementelor unice pe o pagină web se utilizează identificatori, care sunt definiți prin atributul id. De exemplu, pagina poate avea un bloc principal sau un antet:
<div id="header"></div>Definirea stilurilor pentru identificatori este similară cu definirea claselor, doar că în loc de punct se folosește simbolul diez #:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Identificatori CSS</title>
<style>
div{
margin: 10px;
border: 1px solid #222;
}
#header{
height: 80px;
background-color: #ccc;
}
#content{
height: 180px;
background-color: #eee;
}
#footer{
height: 80px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="header">Antetul site-ului</div>
<div id="content">Conținutul principal</div>
<div id="footer">Footer</div>
</body>
</html>
Trebuie să remarcăm că identificatorii se referă mai mult la structura paginii web și mai puțin la stilizarea acesteia. Pentru stilizare, se utilizează predominant clasele, nu identificatorii.
Selectorul universal
Pe lângă selectorii de taguri, clase și identificatori în CSS, există și așa-numitul selector universal, reprezentat de semnul asterisc (*). Acesta aplică stiluri tuturor elementelor de pe o pagină HTML:
*{
background-color: red;
}Stilizarea unui grup de selectori
Uneori, anumite stiluri se aplică unui întreg grup de selectori. De exemplu, dacă dorim să aplicăm subliniere pentru toate titlurile. În acest caz, putem enumera selectorii tuturor elementelor prin virgulă:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectori CSS</title>
<style>
h1, h2, h3, h4{
color: red;
}
</style>
</head>
<body>
<h1>CSS3</h1>
<h2>Selectori</h2>
<h3>Grupul de selectori</h3>
<p>Un anumit text...</p>
</body>
</html>
Un grup de selectori poate include atât selectori de taguri, cât și selectori de clase și identificatori. De exemplu:
h1, #header, .redBlock{
color: red;
}