Home » Articole » Articole » Calculatoare » Dezvoltarea web » Web design » Cascading Style Sheets » Web design: CSS – Selectori, clase și ID

Web design: CSS – Selectori, clase și ID

Selectori

Sintaxa CSS

(Structura regulii CSS. Terminologia CSS pentru o intrare tipică într-o foaie de stil, o regulă de stil. Descrie formatul de utilizat pentru orice listă neordonată imbricată într-o pereche de etichete de element de bloc de diviziune. Gruparea declarațiilor între paranteze se numește bloc de declarații. Credit: Armchair/Wikimedia)

Selectorul este un loc bun pentru a începe cu CSS. Este folosit pentru a identifica la ce element (articole) se vor aplica regulile care urmează și este primul element al definiției unei reguli. Un selector se poate referi la o etichetă existentă care face parte din structura HTML, cum ar fi liste neordonate, paragrafe, intrări, sau se poate referi la o clasă personalizată, numele elementului sau ID-ul pe care îl creăm. Selectorii sunt urmați de un set de acolade { }, iar regulile pe care le introducem între acolade (proprietatea pe care vrem să o ajustăm și valoarea pe care vrem să o aibă) se aplică selectorului pe care îl specificăm. Ne vom uita la unele dintre acestea aici (există peste 40 de componente CSS3 inițiale), concentrându-ne pe cele care sunt mai frecvent utilizate. Rețineți că în CSS, folosim două puncte (:) în loc de semnul egal (=) pentru a atribui valori.

Clase

Pentru a arunca o privire asupra modului în care putem atașa un concept „unde” regulilor noastre, vom atașa câteva clase etichetelor noastre. Acest lucru ne permite să aplicăm stiluri diferite aceluiași tip de selector, adăugând în același timp capacitatea de a fi mai precis despre ce apariție vorbim. Folosim clase dându-le reguli în CSS și referindu-ne la ele ca atribute în elemente care le susțin din documentul nostru HTML, folosind class=”nameOfOurClass”. Când definim clase în fișierul nostru CSS, precedăm numele lor cu un punct pentru a specifica faptul că sunt o clasă.

ID-uri

Atributul ID este utilizat similar cu modul în care este utilizată o clasă, cu două diferențe:

  • ID-ul este definit cu un # în loc de un punct, de exemplu, #warning.
  • Ar trebui să utilizați un ID o singură dată pe o pagină, deoarece ar trebui să identifice ceva unic pentru document.

Avem deja referințele noastre de identificare în fișierul nostru HTML oriunde am folosit atributele id=“ourNameHere” în etichetele noastre.

Exemple

Vom începe cu un exemplu simplu și vom ajusta lista neordonată prin dezactivarea marcatorilor. Deocamdată, vom pune regula în <head> imbricat în etichetele <style>, ceea ce va permite reguli să se aplice oriunde pe pagină unde există selectorul (în acest caz, ul):

<style>
ul {
list-style-type: none;
}
</style>

Am putea scrie și această regulă într-o formă mai condensată:

<style>
ul {list-style-type: none;}
</style>

Deoarece foile de reguli CSS ignoră spațiul alb, rupturile de linie servesc doar pentru a face documentul mai lizibil atunci când interacționăm cu el. Minimizarea acesteia (eliminarea tuturor întreruperilor de linie suplimentare manual sau cu ajutorul unui script) poate reduce dimensiunea foilor de stil mai mari, ceea ce poate contribui la performanță (în special pe dispozitivele mobile, unde știm că acest lucru este mai preocupant).

Adăugând regula de mai sus, dictăm aspectul tuturor listelor neordonate de pe pagina noastră. Regulile specifică aspectele „Ce, Unde și Când” pe care dorim să le definim pentru selectorul dat. „Ce” este schimbarea reală pe care vrem să o vedem: text într-o anumită culoare, o imagine într-o anumită locație și așa mai departe, la fel ca exemplul nostru de mai sus. În acest caz, am vrut să ascundem marcatorii prestabiliți. „Unde” este una sau mai multe locații specifice, definite ca un anumit element numit sau când sunt îndeplinite anumite condiții, adică înainte de fiecare paragraf (p.before{}) sau de fiecare link de pe pagină (a{}). În cele din urmă, aspectele „Când” ne permit să controlăm aspectul site-ului în funcție de diferiți factori, cum ar fi dacă afișajul este de dimensiunea mobilă sau dacă utilizatorul a făcut clic pe butonul de imprimare (@media print {}).

Prin plasarea acestor exemple în <head> al paginii noastre, am creat o foaie de stil internă. Acest lucru indică faptul că toate informațiile despre stil la care trebuie să le facem referire pot fi găsite în pagina însăși. De asemenea, am putea crea fișiere externe cu regulile noastre. Acest lucru ne permite să avem unul sau mai multe fișiere CSS pe site-ul nostru și să aplicăm acele reguli la una sau mai multe pagini. Metoda fișierului extern este cea pe care o vom folosi în mod predominant, deoarece se potrivește cel mai bine cu designul receptiv și separă sarcinile vizate de fișierele noastre.

MEMENTO IMPORTANT: Utilizarea metodei inline în afara JavaScript încalcă designul nostru receptiv și separarea sarcinilor! Un alt dezavantaj al acestei metode este că ar trebui să fie aplicată fiecărui paragraf în care am dorit-o în pagina noastră.

Pentru a conecta un fișier CSS la pagina noastră web, am muta toate regulile noastre (totul din interiorul etichetelor <style>) într-un document nou. După salvarea acestui nou fișier cu extensia .css, browserul va înțelege că tot ceea ce conține trebuie tratat ca și cum ar fi în etichetele noastre <style>. Îl putem conecta la pagina noastră la fel ca linkul către o altă pagină de pe serverul nostru:

<link rel="style sheet" type="text/css" href="mystyle.css">

În eticheta noastră <link> oferim un atribut rel foii de stil pentru a identifica scopul fișierului. Atributul type îi spune browserului cum să se aștepte ca conținutul să fie formatat („text/css”), iar href oferă locația fișierului. Dacă fișierul nu se afla în același dosar cu pagina web pe care o folosim, am ajusta linkul așa cum am face-o într-o etichetă <a>.

Practica anterioară a fost crearea de site-uri complet diferite, cu pagini CSS și HTML personalizate, pentru a suporta dispozitivele mobile. Acest lucru a dat startul la m.yoursite.com sau mobile. yoursite.com în care versiunile puternic modificate ale site-urilor au fost menținute separat de versiunea principală pentru desktop. Acum, odată cu utilizarea metodelor de design receptiv și a funcțiilor mai noi ale CSS3, putem folosi un fișier CSS principal pentru toate aspectele site-ului nostru.

Poate doriți să separați fișierele CSS în timp ce lucrați la ele, deoarece un fișier principal poate deveni plictisitor de căutat. De asemenea, poate ajuta să adăugați comentarii lungi sau pe mai multe rânduri în fișierul dvs. pentru a delimita secțiunile organizate ale CSS. În cele din urmă, până la data lansării, veți dori să obțineți toate CSS-ul dvs. înapoi într-un singur fișier. Comprimarea acestuia se poate face cu instrumente precum http://www.csscompressor.com/ care elimină spațiul alb care face fișierul lizibil în timpul dezvoltării și reduce dimensiunea fișierului, făcând transmisia mai rapidă pentru utilizator.

Metoda noastră finală de aplicare a regulilor este inline. Aceasta se referă la practica de inserare a regulii în interiorul etichetei de atribut a articolului în cauză. Dacă dorim să schimbăm culoarea textului unui anumit paragraf, am putea merge direct la fișierul nostru HTML și am putea modifica eticheta obișnuită <p> pentru a citi:

<p style="color:red;">Our now RED paragraph!</p>

Aici nu avem nevoie de selectorul nostru, deoarece este eticheta în sine și, de asemenea, nu avem nevoie de paranteze sau ghilimele în cadrul regulilor. Tot ceea ce includem în valoarea atributului nostru sunt ghilimele din jur și regulile pe care vrem să le aplicăm, utilizând în continuare : și ; în mod corespunzător. Acesta este un mijloc eficient de a răspunde la un eveniment sau de a schimba aspectul prin JavaScript.

Există o serie de alte lucruri pe care le putem face cu selectori pentru a identifica cu ce vrem să interacționăm. Caracterul * poate fi folosit pentru a se aplica la tot ce este din pagină sau într-un selector, dacă este specificat unul. De exemplu, * { color: blue} ar face ca tot textul de pe pagină să fie albastru (presupunând că este ultima regulă aplicată… vom ajunge la asta), în timp ce subsolul * { color: blue} ar face toate elementele din subsolul nostru albastru . Acest lucru poate fi util pentru dezvoltare și testare pentru a ajusta rapid un număr de articole, dar ar trebui evitat în producție, deoarece procesarea regulii poate necesita examinarea unui număr mare de elemente, ceea ce poate crește timpii de încărcare a paginii.

Putem viza anumite articole prin referire la ele folosind ID-ul lor. Pentru a face acest lucru, punem un # în fața numelui lor de identificare. De exemplu, vom crea două div-uri, unul cu un ID de todo și altul cu un ID de complete, pentru a crea o listă rapidă de activități:

<div id="todo">
<ul>
<li>Check the mail</li>
<li>Go to the store</li>
<li>Take the dog to the vet</li>
</ul>
</div>
<div id="completed">
<ul>
<li>Rent a movie</li>
<li>Make grocery list</li>
<li>Make vet appointment</li>
</ul>
</div>
  • Check the mail
  • Go to the store
  • Take the dog to the vet

 

  • Rent a movie
  • Make grocery list
  • Make vet appointment

Adăugând următoarele stiluri la această pagină, putem transforma lista noastră de lucruri de făcut în roșu, iar lista noastră finalizată în verde:

<style>
#todo { background-color:red; }
#completed { background-color: green; }
</style>
  • Check the mail
  • Go to the store
  • Take the dog to the vet
  • Rent a movie
  • Make grocery list
  • Make vet appointment

MEMENTO IMPORTANT: Rețineți că putem folosi un nume de id o singură dată pe fiecare pagină. Dacă doriți să aplicați aceste reguli în mai multe locuri, atunci ar trebui să utilizați o definiție de clasă!

Putem folosi această tehnică pe orice etichetă care acceptă un ID ca atribut (regulile efective pe care avem voie să le folosim, însă, diferă în funcție de element). Pentru a aplica astfel de reguli în mai multe locuri, va trebui să trecem la o definiție de clasă. Pentru a face acest lucru, pur și simplu schimbăm # în . și în loc să ne bazăm pe ID-ul unui element, îi dăm un atribut de clasă cu o valoare a numelui selectorului pe care îl creăm în definiția stilului nostru. Vom modifica ultimul nostru exemplu pentru a împărți lista noastră de lucruri de făcut în liste „today” și „tomorrow” și vom redenumi div-ul nostru completat în „done”.

Apoi dați ambelor liste to do o clasă de todo, lista noastră done o clasă de completed, și modificați regulile noastre CSS pentru a se potrivi:

<style>
.todo { background-color:red; }
.completed { background-color: green; }
</style>
<div id="today" class="todo">
<ul>
<li>Check the mail</li>
<li> Go to the store</li>
</ul>
</div>
<div id="tomorrow" class="todo">
<ul>
<li>Take the dog to the vet </li>
</ul>
</div>
<div id="done" class="completed">
<ul>
<li>Rent a movie</li>
<li>Make grocery list</li>
<li>Make vet appointment</li>
</ul>
</div>
  • Check the mail
  • Go to the store
  • Take the dog to the vet
  • Rent a movie
  • Make grocery list
  • Make vet appointment

Pentru a adăuga și mai mult accent listei noastre finalizate, putem face ca lista din interiorul ei să arate textul tăiat. Am putea face acest lucru aplicând un stil unui ID pe care i-l atribuim sau dând acelui ul o clasă, dar avem deja suficientă structură pentru a specifica ceea ce dorim prin folosind un selector descendent. Acest tip de selector este specificat spunând că dorim ca elementele „a” din interiorul elementelor „b” să aibă stilul aplicat. În exemplul nostru, dorim ca <ul>-urile din interiorul unui .completed tăiat, așa că vom adăuga următoarea regulă la stilurile noastre:

.completed ul { text-decoration: line-through; }

Acum, dacă adăugăm mai multe secțiuni cu o clasă de finalizat, acestea vor fi, de asemenea, tăiate automat. Puteți încerca să împărțiți <div>-ul finalizat în două părți, cum ar fi „yesterday” și „last week” pentru a-l încerca.

NOTE ADITIONALE: Hover funcționează pe mai mult decât link-uri! Aproape orice element are o stare de hover, atâta timp cât poziția cursorului poate fi asociată cu acesta. Notă: indicele z și poziția elementelor stratificate pot interfera cu ușurință cu lucruri precum trecerea cu mouse-ul.

Hyperlinkurile sunt adesea stilate, astfel încât să își schimbe aspectul atunci când sunt trecute cu mouse-ul peste ele sau s-a făcut deja clic pe ele. Putem atribui stilurile noastre acestor evenimente creând reguli pentru etichetele <a> atunci când acestea nu sunt vizitate, vizitate sau când trece cu mouse-ul (indicatorul mouse-ului este peste link) starea este atașată:

a:link {
color:blue;
}
a:visited {
color:grey;
}
a:hover{
color:red;
font-weight:bold;
}

Încercați să adăugați un link către biroul local al medicului veterinar la sarcina din lista de sarcini și urmăriți cum se schimbă atunci când interacționați cu acesta.

Uneori s-ar putea să vi se pară mai ușor să schimbați ceva pentru toate aparițiile unui element care nu sunt membri ai unei alte reguli. În loc să adăugăm clase suplimentare acelor elemente, putem specifica o excepție cu starea not:

div:not(.completed){ font-size:larger; }

Această regulă va mări textul oricărui text div (indiferent dacă au sau nu clasa .todo). Un alt set la îndemână de stări sunt :before și :after. Acești selectori ne permit să plasăm și să stilăm conținut ca o acțiune anterioară sau atașată la elementul nostru. Dacă dorim să punem înainte un titlu To Do: elementelor noastre de clasă .todo, am putea adăuga următoarea regulă:

.todo:before{
content:"To Do:";
background-color:yellow;
color:red;
font-weight:bold;
}

MEMENTO IMPORTANT: Notă: nu putem folosi regula Content pentru a adăuga HTML la un element, ci doar text. Pentru a realiza acest lucru, ar trebui să folosim JavaScript sau un alt limbaj care poate manipula DOM.

Restul selectorilor ne permit să fim și mai specifici, selectând elementele care apar înainte sau după un alt element dat, potrivirea elementelor care au un anumit atribut sau chiar potrivirea atributelor care conțin un anumit șir ca parte a valorii lor. Pentru o referință completă, vă recomand lista la w3schools.com. Exemplul nostru completat ar trebui acum să arate astfel:

<style>
.todo {
background-color:red;
}
.completed {
background-color: green;
}
.completed ul {
text-decoration: line-through;
}
div:not(.completed){
font-size:larger;
}
a:link {
color:blue;
}
a:visited {
color:grey;
}
a:hover{
color:red;
font-weight:bold;
} .todo:before{
content:"To Do:";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
<div id="today" class="todo">
<ul>
<li>Check the mail</li>
<li> Go to the store</li>
</ul>
</div>
<div id="tomorrow" class="todo">
<ul>
<li>Take the dog to the vet </li>
</ul>
</div>
<div id="yesterday" class="completed">
<ul>
<li>Rent a movie</li>
</ul>
</div>
<div id="lastWeek" class="completed">
<ul>
<li>Make grocery list</li>
<a
href="http://www.dunkirkanimalclinic.com/"><li>Make vet appointment</li></a>
</ul>
</div>
  • Check the mail
  • Go to the store
  • Take the dog to the vet
  • Rent a movie
  • Make grocery list
  • Make vet appointment

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Ghid WordPress pentru dezvoltatori
Ghid WordPress pentru dezvoltatori

WordPress este o platformă pentru site-uri web rapidă, fiabilă, cu facilități multiple pentru dezvoltatori și ușor de utilizat. Totusi, dezvoltatorii și beneficiarii au de multe ori nevoie să adauge funcționalități suplimentare pentru a răspunde nevoilor lor. Acest ghid oferă unele … Citeşte mai mult

Nu a fost votat $3.99 Selectează opțiunile
Ghid WordPress pentru începători
Ghid WordPress pentru începători

WordPress combină simplitatea pentru utilizatorii şi editori cu complexitate suportului software pentru dezvoltatori. Acest lucru îl face mai flexibil, fiind în acelaşi timp uşor de utilizat. Simplitatea sa face posibilă instalarea şi publicarea online rapid. Nimic nu ar trebui să … Citeşte mai mult

Nu a fost votat $2.99$4.77 Selectează opțiunile
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Proiectarea, dezvoltarea şi întreţinerea siturilor web

Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult

Nu a fost votat $2.99$11.97 Selectează opțiunile

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *