Selectoarele determină modul în care stilurile CSS sunt atribuite elementelor HTML. Într-o definiție corespunzătoare, se specifică mai întâi numele elementului către care selectorul ar trebui să aibă acces. Declarația efectivă se face apoi între acolade. În cadrul unei declarații pot fi specificate una sau mai multe proprietăți. Deci, sintaxa generală arată astfel:
Selector {
Proprietate1: Valoare;
Proprietate2: Valoare;
Proprietate3: Valoare;
}O astfel de definiție v-a fost deja întâlnită în tutorialul anterior.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Asigurați-vă că fiecare declarație se termină cu un punct și virgulă.
O privire asupra selectorilor disponibili
De fapt, CSS vine cu o cantitate destul de mare de selectori, dintre care voi prezenta cele mai importante. Pentru că un lucru este clar: Doar dacă stăpânești lucrul cu selectorii, poți defini proprietăți CSS în mod rațional.
Cea mai simplă modalitate de a atribui stiluri într-un document HTML este oferită de selectorul de element.
Prin sintaxa următoare, tuturor elementelor p li se atribuie culoarea neagră.
p {
color: #009966;
}
Dacă doriți să atribuiți același stil mai multor elemente, este de asemenea posibil.
În acest caz, elementele relevante sunt notate unul după altul, separate printr-o virgulă.
p, h1, li {
color: #000;
}
Puteți atribui și mai multe stiluri elementelor. Stilurile sunt notate fiecare prin punct și virgulă pentru a fi separate.
p {
color: #000;
background-color: red;
}
Este posibilă și o combinație a variantelor menționate.
p, h1, li {
color: #009966;
background-color: red;
}
Rezultatul ar putea arăta astfel:
Domenii cu mai multe elemente
De multe ori este necesar să se formateze un domeniu care constă din mai multe elemente HTML. Pentru astfel de cazuri, HTML-ul vine cu două elemente speciale: span și div. Aceste elemente vă vor întâmpina - de altfel și în această serie - repetat.
Un exemplu:
<div class="articol"> <h1>Explozie de culoare</h1> <p class="tema">Un tutorial pentru crearea unei explozii de culoare de la <span class="autor">MarkusMelzer</span>.</p> </div>
Singura diferență între div și span constă în faptul că elementul div forțează o nouă linie în fluxul de text. span, pe de altă parte, nu generează o nouă linie. În exemplul prezentat, este definit un domeniu div în care se află un titlu și un paragraf de text. În cadrul paragrafului de text, există la rândul său un domeniu span.
Selectori de ID și de clasă
Până acum s-au folosit selectori de elemente. Prin exemplul următor, toate titlurile h1 sunt formatate de un astfel de selector.
h1 {
color: #000;
background-color: red;
}
În această formă, acest lucru nu este întotdeauna dorit. Ce se întâmplă de exemplu, dacă doriți să atribuiți anumite proprietăți doar unuia sau unora, dar nu tuturor titlurilor h1? Pentru astfel de cazuri, CSS oferă două posibilități, și anume selectorii de clasă și de ID.
Prin selectorii de clasă, elementele HTML cu atribute de clasă pot fi selectate foarte precis. În elementul HTML respectiv, este necesar să se specifice atributul class. Definițiile claselor încep cu un punct.
Un exemplu:
.rosu {
color: red;
}
A fost definită clasa rosu. Pentru a adăuga proprietățile de culoare roșie unui element HTML, trebuie să specificați class urmat de numele clasei.
<p class="rosu">PSD-Tutorials.de</p>
Selectorul de ID poate fi folosit la fel de ușor. Selectorul de ID este recunoscut prin simbolul hash.
#topnavi {
color: blue;
};În acest exemplu este definit ID-ul topnavi. Dar atenție: Un ID poate fi atribuit într-adevăr doar o singură dată într-un document. Accesul la o proprietate de ID definită arată apoi astfel:
<div id="topnavi">Aici se află navigarea</div>
Atributul id indică numele ID-ului. Asigurați-vă că aici nu se notează dublu cruce.
Informațiile prezentate pot fi de asemenea combinate. Astfel, de exemplu, un element HTML poate avea alocate mai multe clase.
<p class="rosu mare">PSD-Tutorials.de</p>
În acest exemplu, paragrafului îi sunt atribuite cele două clase rosu și mare. Dacă doriți să specificați o clasă și un ID, atunci acesta arată în felul următor:
<p class="rosu" id="navi">PSD-Tutorials.de</p>
De asemenea, puteți combina elemente și ID-uri. Iată și un exemplu în acest sens:
div.navi {
color: albastru;
}
Această sintaxă s-ar aplica exclusiv elementelor div cu clasa navi. Elementele p, care de asemenea au clasa navi, nu ar fi afectate de aceasta.
În CSS există și un alt mod de combinare a selectorilor. Aruncați o privire asupra următoarei sintaxe:
h1 {
color: roșu;
}
em {
color: albastru;
}
Aici toate titlurile de primă ordine li se atribuie culoarea roșie. Elementele em primesc, în schimb, culoarea albastră.
Prin combinarea celor două instrucțiuni se poate asigura faptul că doar elementele em vor fi colorate în albastru, care se află în interiorul elementelor h1.
h1 em {
color: albastru;
};
Numele elementelor sunt scrise aici separate unul de celălalt fără virgulă.
Acesta este de altfel o capcană frecventă în care cad și începătorii în CSS. Iată aceeași sintaxă, însă cu o virgulă introdusă:
h1, em {
color: albastru;
}
Ce înseamnă această sintaxă? Toate elementele h1 și toate elementele em sunt adresate. Este deci ceva complet diferit față de sintaxa fără virgulă!
Un alt selector important este selectorul universal. Acesta permite selectarea oricărui element. Acest selector este definit printr-un asterisc.
* {
color: roșu;
}
Prin această sintaxă, toate elementele ar fi colorate în roșu. De asemenea, și la acest selector sunt câteva particularități de sintaxă de luat în considerare.
#mainnavi * {
color: roșu;
}
În acest exemplu, culoarea primei planului a tuturor elementelor din interiorul elementului cu ID-ul mainnavi este setată la roșu. Asta nu se aplică însă elementului în sine.
Dacă selectorul universal ar fi la începutul unei declarații, ar fi de asemenea inutil de notat. Astfel, ceva de genul de mai jos ar fi redundant:
* p {
color: roșu;
}
Această sintaxă este echivalentă cu cea de mai jos:
p {
color: roșu;
}
În următorul tutorial veți învăța mai mulți selectori.
