Descriere: Selectori CSS
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
1. Introducere
Azi, orice web designer trebuie să cunoască CSS (Cascading Style Sheets). Următorul pas este cel al selectorilor, adică asupra căror elemente se aplică "stilizarea".
Acest tutorial nu își are ca scop învățarea cititorului despre implementarea CSS-ului într-o pagină web. Se presupun drept implicite aceste minime cunoștințe de scriere și utilizare a limbajului HTML și CSS. În schimb, cele ce urmează vor informa despre ce se poate selecta și cum se poate selecta un element din pagina web pentru a i se putea aplica modificări via CSS.
Cum se modifică un layout cu CSS? Ce este tag-ul <link> și ce caută în header-ul paginii? Ce poate face CSS? Float? Acestea sunt câteva întrebări la care, dacă nu aveți răspuns, vă recomand un tutorial.
Țin să precizez că unii selectori sunt specifici CSS3, unde, în majoritatea cazurilor, veți avea probleme de afișare - aici mă refer în special la Internet Explorer 6+, și chiar la browser-e mai compatibile (Firefox, Chrome sau Safari). Pentru a afla despre selectorul respectiv și cine are suport pentru el, verificați documentația oficială aferentă selectorului respectiv.
Acestea fiind spuse...
2. Ce sunt selectorii și de ce trebuie să-i cunoaștem
Selectorii în CSS sunt tipare care, dacă se potrivesc cu vreun element din document, îi vor aplica reguli corespunzătoare. În cele mai multe cazuri, veți vedea în conținutul unui fișier CSS, forme asemănătoare cu:
SELECTOR { PROPRIETATE : VALOARE }
sau
SELECTOR { PROPRIETATE : VALOARE; PROPRIETATE : VALOARE }
sau
SELECTOR {
PROPRIETATE : VALOARE;
PROPRIETATE : VALOARE;
PROPRIETATE : VALOARE;
}
Perechea sau perechile PROPRIETATE : VALOARE reprezină regula sau regulile care urmează să fie aplicată/e, în cazul în care tiparul selectorului se va potrivi cu vreun element din pagină.
Exemplu 1:
h1 { color: blue }
Va aplica regula ("color: blue", care schimbă culoarea textului în albastru) elementelor din document care se potrivesc cu tiparul "h1" (în acest caz, tiparul se potrivește cu orice etichetă H1 din document).
Exemplu 2:
div { position: absolute; font-size: 1em }
În acest caz, tiparul se potrivește cu orice etichetă DIV din pagina web și aplică două reguli (poziționare și mărimea fontului).
După cum observați, a ști cărui element i se aplică un stil reprezintă o cunoaștere sine qua non în web design.
Iată câteva exemple de selectori mai simpli sau mai complecși pe care îi vom parcurge în cele ce urmează:
div { color: black }
Stil aplicat tuturor etichetelor DIV din pagina web.
p.heading { font-size: 1.1em }
Stil aplicat tuturor etichetelor P de clasă "heading" din pagina web.
hr#news {
float: left;
width: 100px;
}
Stil aplicat elementului HR de ID "news" din pagina web.
div.errors p {
color: red;
border: red solid 1px;
}
Stil aplicat tuturor elementelor P care sunt conținute de elementele DIV de clasă "errors" din pagina web.
3. Tipuri de selectori CSS
Cu ajutorul selectorilor CSS putem aplica un anume stil unui singur element, unui grup de elemente sau tuturor elementelor unei pagini web.
Selectorii CSS îi vom împărți în două tipuri: selectori comuni (common selectors) și selectori avansați (advanced selectors). Dar, înainte să pornim pe acest drum, va trebui să clarificăm terminologia specifică acestui domeniu.
Vom uzita deseori de următorii termenii, deci recomandarea mea este să vi-i însușiți temeinic:
părinte (parent): element care conține elementul de referință;
Elementul DIV (division) este părintele elementelor UL (unordered list) și LI (list item). UL este de asemenea părintele elementelor LI.
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
descendenți (descendents): toate elementele care sunt conținute de către elementul de referință;
Elementele UL și LI sunt descendeții elementului DIV.
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
copil sau descendent imediat (child, immediate descendent): element care este conținut imediat în elementul de referință;
Elementul UL este copilul elementului DIV, iar elementul LI este copilul elementului UL. Elementul LI este un descendent al elementului DIV, dar nu un copil al acestuia.
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
frate (sibling): element de același nivel ierarhic ca și elementul de referință.
Elementele H1 și DIV sunt frați. La fel sunt și elementele UL și P.
<h1>Titlu</h1>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>Paragraf in DIV.</p>
</div>
Cunoscând "gradele de rudenie" dintre elementele unei pagini, putem continua cu clasificarea selectorilor CSS: comuni și avansați.
3.1 Selectorii comuni sunt selectori CSS uzuali.
Aceștia sunt: de tip, de descendenți, universal și pseudo-clasele/pseudo-elementele.
Selectorul de tip specifică numele elementului căruia i se aplică regulile. Altfel spus, selectorul de tip este reprezentat de numele etichetei HTML. Pentru elemente P, selectorul este "p", pentru elemente DIV, selectorul este "div" etc. Puteți selecta mai multe elemente folosind numele acestora despărțite de virgulă: "h1, h2, h3, p".
Probabil vă întrebați dacă elementele trebuie scrise cu majuscule iar selectorii cu minuscule. Aceasta depinde de tipul de fișier pe care lucrați. Astfel, numele elementelor într-un HTML sunt case-insensitive, pe când numele elementelor dintr-un XML sunt case-sensitive. Totuși, standardul XHTML impune scrierea lor cu minuscule, favorizând astfel uniformizarea codului HTML cu cel XML pentru o mai bună inter-operare. Recomandarea mea este să scrieți numele elementelor HTML, XML și al selectorilor CSS cu minuscule. Eu scriu DIV sau P din interese pur didactice de evidențiere.
Selectori de tip:
textarea {
background-color: #FF0040;
}
Stilul se va aplica tuturor elementelor TEXTAREA din pagină.
p {
font-family: Arial, Georgia, "Times New Roman";
font-weight: bold;
}
Stilul se va aplica tuturor elementelor P din pagină.
Selectorii de tip pot deveni și mai specifici prin aplicarea regulilor unui element cu ID sau cu CLASS. Selectorul CSS pentru ID este format din caracterul "diez" (#) urmat de numele ID-ului respectiv. Selectorul de clase este format din caracterul "punct" (.) urmat de numele clasei. Când și cum sunt folosite cele două depășește intenția acestui tutorial. Studiați următoarele exemple:
Selectori de ID și CLASS:
#titlu_stiri {
color: #FF0000;
padding-left: 10px;
}
Stilul se va aplica elementului cu ID "titlu_stiri" din pagină:
<p id="titlu_stiri">Senzațional: Gheață în Laponia!</p>
.ascuns {
display: none;
}
Stilul se va aplica tuturor elementelor de clasa "ascuns" din pagină:
<div>
<p class="ascuns">Secret 1</p>
<p class="ascuns">Secret 2</p>
<p>Un bărbat nu are secrete și nu minte</p>
</div>
Selectorii de descendenți au drept țintă descendenții unui element sau unui grup de elemente. Selectorul de descendenți este indicat printr-un spațiu liber față de alți selectori. Este important să rețineți cum este interpretat acest mic spațiu liber - ca o relație între selectori - și nu un capriciu estetic.
div p { font-size: 70%; }
Stilul se va aplica tuturor elementelor P care sunt descendenți ai tuturor elementelor DIV din pagina web. Observați spațiul dintre "div" si "p" în scrierea selectorului. În exemplul următor, paragraful "Titlu" nu va fi modificat.
<p>Titlu</p>
<div id="news">
<p>News 1</p>
<p>News 2</p>
<p>News 3</p>
</div>
<div id="help">
<p>Help 1</p>
<p>Help 2</p>
</div>
Selectorul universal este reprezentat printr-un asterisc
. Acesta va selecta orice element indicat din pagina web.* {
padding: 0px;
margin: 0px;
}
Stilul se va aplica tuturor elementelor din pagină.
div#help * {
font-size: 15px;
color: #FF0000;
}
Stilul se va aplica tuturor descendenților elementului DIV cu ID "help" din pagină.
Pseudo-clasele sau pseudo-elementele pot fi folosite pentru stilizarea unor instanțe ale elementelor. Există mai multe pseudo-clase/pseudo-elemente, dintre care vom menționa câteva aici:
:link - aplică stil tuturor link-urilor care nu au fost vizitate;
:visited - aplică stil tuturor link-urilor care au fost vizitate;
:active - aplică stil tuturor elementelor active;
:hover - aplică stil elementului în momentul "planării" (hovering) cursorului deasupra acestuia;
:focus - aplică stil elementului care are focus (focus-ul este primit fie prin click al mouse-ului, fie prin tastatura, folosind TAB sau shortcut);
:first-child - aplică stil numai dacă elementul este primul copil;
:first-letter - aplică stil primei litere.
a:active, a:focus, a:hover { color: green; }
Stilul se va aplica tuturor ancorelor (elementelor A) active, cu focus, sau având cursorul deasupra lor.
p:first-child { background-color: navy; }
Stilul se va aplica elementului P, doar când acesta este primul copil.
<div>
<p>Legea identității</p>
<p>Legea non-contradicției</p>
</div>
<form>
<p>Legea terțului exclus</p>
<p>Legea rațiunii suficiente</p>
</form>
3.2 Selectori avansați - permit o selecție mai specifică a elementelor din pagină.
Selectarea unui copil (child) și a unui frate adiacent (adjacent sibling).
#help>li {
padding: 10px;
}
Stilul se va aplica tuturor elementelor LI care sunt copíi (descendenți imediați) ai elementului cu ID de "help" din pagină.
<ul id="help">
<li>Download</li>
<li>Tutoriale</li>
<ul>
<li>Win</li>
<li>Mac</li>
<li>Linux</li>
</ul>
<li>Contactați-ne</li>
</ul>
h1 + p {
font-size: 15px;
font-weight: bold;
}
Stilul se va aplica primului frate (first sibling) al tuturor elementelor H1 din pagină. Dacă, în cazul nostru, primul frate al elementului H1 nu ar fi fost un element P, ci un altul, stilizarea nu ar fi funcționat.
<h1>Text de umplutură 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cui îi place Cicero?</p>
<hr>
<h1>Text de umplutură 2</h1>
<p>LOL, OMG, WTF, ROFL, DND, BRB, RTFM, AFK, FYI</p>
<p>Cui îi place dicționarul urban?</p>
Selectorii de atribute (attribute selectors). După cum denumirea menționează, acești selectori au drept țintă elemente cu proprietăți sau cu valoarea proprietăților. Astfel, putem selecta elemente cu o anumită proprietate, cu o anumită valoare a unei anumite proprietăți, care conține o valoare anume sau care începe cu o valoare anume etc.
[title] - selectează toate elementele care conțin proprietatea TITLE;
<p title="contact">Contactați-ne!</p>
<a href="www.google.ro" title="cautare">Caută</a>
[type='text'] - selectează toate elementele care conțin proprietatea TYPE a cărei valoare este TEXT;
<input type="text" size="40" />
<input id="email" type="text" />
[class~='error'] - selectează toate elementele care conțin proprietatea CLASS a cărei valoare conține "error";
<div class="error clearfix"> ... </div>
<p class="heading error"> ... </div>
[lang^='en'] - selectează toate elementele care conțin proprietatea LANG a cărei valoare începe cu "en";
<p lang="en">Hello!</p>
<p lang="en-us">Yo!</p>
<p lang="en-gb">Hoy!</p>
[href$='.zip'] - selectează toate elementele care conțin proprietatea HREF a cărei valoare se termină cu ".zip".
<a href="www.site/fisier1.zip">Tutorial 1</a>
<a href="www.site/fisier2.zip">Tutorial 2</a>
4. Rezumat
Selectați DIV: div
Selectați DIV și SPAN: div, span
Selectați DIV de clasă "header": div.header
Selectați DIV de ID "footer": div#footer
Selectați elementele de clasă "important" din DIV: div .important
Selectați elementele de ID "id" din elementele de clasă "class" din DIV: div .class #id
Selectați DIV de clasă "help" și A de id "click": div.help, a#click
Selectați copiii H1 ai BODY: body>h1
Selectați copiii P ai unui DIV de clasă "help": div.help>p
Selectați descendenții A ai unui LI, unde LI este copil de-al UL, iar acel UL este descendent al unui DIV de ID "menu": div#menu ul>li a
Selectați frații imediați P ai H1 de clasă "help": h1.help + p
Selectați toate elementele care au proprietatea "title": [title]
Selectați toate elementele care au proprietatea "href", copii ai DIV de clasă "menu": div.menu>[href]
Selectați toate P care au proprietatea "title": p[title]
Selectați toate butoanele de tip "submit", stilizând când este apăsat: input[type='submit']:active
Selectați SPAN, descendenți ai P de clasă "tip", când cursorul este deasupra acestor P: p.tip:hover span
Selectați toate A a căror proprietate "href" începe cu "http:": a[href^='http:']
Selectați toate A a căror proprietate "href" se termină cu ".pdf": a[href$='.pdf']
Selectați toate elementele, descendenți ai DIV de id "header": div#header *
Selectați P cu proprietățile "align" și "class" care au valorile de "left", respectiv "intro": p[align='left'][class='intro']
Stilizați INPUT care are focus și cursorul deasupra: input:focus:hover
Selectați primul copil P dintr-un H1 de id "news": h1#news p:first-child
Selectați A a căror proprietate "href" începe cu "ftp:", copii ai DIV de clasă "ftp": div.ftp>a[href^='ftp:']