Cine ar fi crezut că poți face inimi și forme stil ying-yang numai din CSS si ceva elemente HTML? Dar se poate: inimi, Pac Man, semnul infinitului și Ying-Yang se pot face relativ ușor. CSS este foarte flexibil atunci când știi ce să faci cu el.
Este clar că :before și :after, unele dintre cele mai utilizate pseudoelemente (pe lângă :first-line, :first-letter, :selection), nu pot fi întâlnite în fiecare pagină web de pe net, dar ele îți oferă o flexibilitate mare pentru că poți specifica diferite tipuri de conținut în ele și le poți stiliza în CSS după placul tău.
Cum stilizezi pseudoelementele în CSS? Cam așa:
div:before, div:after {
content: „…”;
float: left;
width: 35px;
height: 35px;
}
Codul de mai sus va pune trei puncte „…” înainte și după fiecare DIV din document.
În secțiunea de content: „” a celor două pseudoelemente poți pune:
– o imagine-> content: url(imagine.png);
– un text aleatoriu -> content: „text aici”;
– diferite atribute ale elementului HTML, ex url-ul din -> content:attr(href)
– combinație de tipuri de conținut-> content: „text – ” attr(href);
– sau poți crea un sistem de numerotare cu puncte și subpuncte->
h2 { counter-increment: section; }
ul { counter-reset: item; }
li { counter-increment: item; }
h2:before {
content: counter(section) ” – „;
}
li:before {
content: counter(section) „.” counter(item);
}
Mai multe informații și detalii pot fi citite pe site-ul A to Z CSS.
Căteva linkuri foarte utile:
1. Învață să targetezi elemente cu selectori avansați citind despre Advanced CSS selector.
Vei putea targeta, de exemplu, toate linkurile din pagină care conțin cuvântul „test” în atributul href:
a[href*=”test”] {
color: red;
}
Toate linkurie din pagină de forma:
/page-test/
/test-page/
/mytest-page/
vor avea culoarea roșie.
2. Folosește o sintaxă CSS sănătoasă care să respecte ceva reguli de bază cu CSS Guidelines.
3. Respectă reguli de sintaxă când scrii cod javascript. Citește despre aceasta aici.