aflați CSS: Ghidul complet

am construit un ghid complet pentru a vă ajuta să învățați CSS, indiferent dacă tocmai ați început cu elementele de bază sau doriți să explorați CSS mai avansat.

Selectoare CSS

Deci, ai învățat de bază id, class și descendant selectoare—și apoi a numit-o zi? Dacă da, pierzi un nivel enorm de flexibilitate. Vă datorați să vă angajați în memorie acești selectori avansați CSS și CSS3.

selectori de bază

1., *

* { margin: 0; padding: 0;}

să le eliminăm pe cele evidente, pentru începători, înainte de a trece la selectorii mai avansați.

simbolul stea va viza fiecare element din pagină. Mulți dezvoltatori vor folosi acest truc pentru a reduce la zero margins și padding. În timp ce acest lucru este cu siguranță bine pentru teste rapide, v-aș sfătui să nu utilizați niciodată acest lucru în codul de producție. Aceasta adaugă prea multă greutate pe browser și nu este necesară.

* poate fi folosit și cu selectori pentru copii.,

#container * { border: 1px solid black;}

Acesta va viza fiecare element care este un copil al #container div. Din nou, încercați să nu utilizați această tehnică foarte mult, dacă vreodată.

2. #X

#container { width: 960px; margin: auto;}

Prefixarea simbolul hash la un selector ne permite să țintă prin id. Aceasta este cu ușurință cea mai obișnuită utilizare; cu toate acestea, aveți grijă când utilizați selectori id.,

Intreaba-te: am absolut nevoie pentru a aplica un id la acest element pentru a-l viza?

id selectoare sunt rigide și nu permit reutilizarea. Dacă este posibil, încercați mai întâi să utilizați un nume de etichetă, unul dintre noile elemente HTML5 sau chiar o pseudo-clasă.

3. .X

.error { color: red;}

Acesta este un class selector. Diferența între ids și classes este că, cu acesta din urmă, puteți viza mai multe elemente., Utilizați class es atunci când doriți ca stilul dvs. să se aplice unui grup de elemente. Alternativ, utilizați id s pentru a găsi un ac în carul cu fân, și stil doar acel element specific.

4. X

a { color: red; }ul { margin-left: 0; }

dacă doriți să vizați toate elementele de pe o pagină, în funcție de lor type, mai degrabă decât un id sau classnumele? Păstrați-l simplu, și de a folosi un selector de tip. Dacă trebuie să vizați toate listele neordonate, utilizați ul {}.,

Demo Live de selectori de bază

selectori Combinator

5. X Y

li a { text-decoration: none;}

următorul selector cel mai comun este selectorul descendant. Când trebuie să fii mai specific cu selectorii tăi, le folosești. De exemplu, ce se întâmplă dacă, în loc să vizați toate etichetele de ancoră, trebuie doar să vizați ancorele care se află într-o listă neordonată? Acest lucru este în special atunci când ar folosi un selector descendent.

Pro-tip: dacă selectorul dvs. arată ca X Y Z A B.error, o faceți greșit., Întrebați-vă întotdeauna dacă este absolut necesar să aplicați toată această greutate.

6. X + Y

ul + p { color: red;}

acesta este denumit selector adiacent. Acesta va selecta numai elementul care este imediat precedat de elementul anterior. În acest caz, numai primul paragraf după fiecare ul va avea text roșu.

7., X > Y

div#container > ul { border: 1px solid black;}

diferența dintre standard X Y și X > Y este că acesta din urmă va selecta doar direct de copii. De exemplu, luați în considerare următorul marcaj.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Un selector de #container > ul va viza doar ul – uri care sunt direct copiii div cu un id de container., Nu va viza, de exemplu, ulcare este un copil al primului li.din acest motiv, există beneficii de performanță în utilizarea combinatorului pentru copii. De fapt, este recomandat în special atunci când se lucrează cu motoare CSS selector bazate pe JavaScript.

8. X ~ Y

ul ~ p { color: red;}

Acest frate combinator este similar cu X + Y, dar este mai puțin strictă., În timp ce un selector adiacent (ul + p) va selecta doar primul element care este imediat precedat de fostul selector, acesta este mai generalizat. Se va selecta, referindu-se la exemplul nostru de mai sus, orice p elemente, cât timp urmează un ul.

Demo Live de selectori Combinator

selectori atribut

9. X

a { color: green;}

Menționată ca un atributele selector, în exemplul nostru de mai sus, acesta va selecta doar anchor tag-uri care au un title atribut., Etichetele de ancorare care nu vor primi acest stil special. Dar dacă trebuie să fii mai specific? Consultați următorul exemplu!

10. X

a { color: #83b348; /* Envato green */}

fragmentul de mai sus va stilul de ancorare tag-uri care link-ul de la https://code.tutsplus.com; acestea vor primi noastră de marcă de culoare verde. Toate celelalte etichete de ancorare vor rămâne neafectate.

rețineți că înfășurăm valoarea în ghilimele. Nu uitați să faceți acest lucru și atunci când utilizați un motor de selector javascript CSS. Când este posibil, utilizați întotdeauna selectori CSS3 peste metode neoficiale.,

Acest lucru funcționează bine, deși este un pic rigid. Ce se întâmplă dacă link-ul se îndreaptă într-adevăr către Envato Tuts+, dar poate că calea este code.tutsplus.com mai degrabă decât URL-ul complet? În aceste cazuri, putem folosi un pic de sintaxă expresii regulate.

11. X

a { color: #83b348; /* Envato green */}

acolo mergem; de asta avem nevoie. Steaua desemnează că valoarea de procedură trebuie să apară undeva în valoarea atributului. În felul ăsta, acoperă tutsplus.com, code.tutsplus.com și chiar webdesign.tutsplus.com.

Țineți minte că aceasta este o declarație amplă., Ce se întâmplă dacă eticheta de ancoră legată de un site non-Envato cu șirul tutsplus din URL? Când trebuie să fiți mai specific, utilizați ^ și $, pentru a face referire la începutul și, respectiv, la sfârșitul unui șir.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

v-ați întrebat vreodată cum unele site-uri web pot afișa o mică pictogramă lângă legăturile externe? Sunt sigur că le-ați văzut înainte; acestea sunt memento-uri frumos că link-ul vă va direcționa către un site cu totul diferit.acesta este un cinch cu simbolul carate., Este cel mai frecvent utilizat în expresii regulate pentru a desemna începutul unui șir. Dacă vrem să vizeze toate anchor tag-uri care au un href care începe cu http, am putea folosi un selector similare la fragmentul de mai sus.

Observați că noi nu suntem în căutarea pentru ; e inutile, și nu ține cont de adresele Url care încep cu

Acum, dacă am vrut să schimb stilul toate ancorele care link-ul de la, să zicem, o fotografie?, În aceste cazuri, să căutăm sfârșitul șirului.

13. X

a { color: red;}

din Nou, vom folosi expresii regulate simbol, $, să se refere la sfârșitul unui șir. În acest caz, căutăm toate ancorele care se leagă de o imagine—sau cel puțin o adresă URL care se termină cu .jpg. Rețineți că acest lucru nu va capta imagini GIF și PNG.

14. X

a { color: red;}

cum compensăm toate tipurile de imagini diferite?, Ei bine, am putea crea mai mulți selectori, cum ar fi:

a,a,a,a { color: red;}

dar asta este o durere și este ineficientă. O altă soluție posibilă este utilizarea atributelor personalizate. Ce se întâmplă dacă am adăugat propriul nostru atribut data-filetype fiecărei ancore care se leagă de o imagine?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

apoi, cu acel cârlig în loc, putem folosi un selector de atribute standard pentru a viza numai acele ancore.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Iată unul special care vă va impresiona prietenii. Nu prea mulți oameni știu despre acest truc., Simbolul tilde (~) ne permite să vizăm un atribut care are o listă de valori separate de spațiu.

O, împreună cu atribut personalizat de la numărul 15, de mai sus, am putea crea un data-info atribut, care pot primi un spațiu listă separată de orice avem nevoie pentru a face act de. În acest caz, vom face notă de link—uri externe și link-uri către imagini-doar pentru exemplu.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

cu acel marcaj în loc, acum putem viza orice etichete care au oricare dintre aceste valori, folosind~ atribute selector truc.

destul de puturos, nu-i asa?

demonstrație Live a selectorilor de atribute

Pseudo selectori

16. X: vizitat și X: link

a:link { color: red; }a:visited { color: purple; }

folosim pseudo-clasa :link pentru a viza toate etichetele de ancoră pe care încă nu s-a făcut clic.,

în mod alternativ, avem și clasa pseudo :visited, care, după cum v-ați aștepta, ne permite să aplicăm un stil specific doar etichetelor ancoră de pe pagină pe care s-a făcut clic sau „vizitat”.

17. X: checked

input:checked { border: 1px solid black;}

această pseudo clasă va viza doar un element de interfață de utilizator care a fost bifat—ca un buton radio sau o casetă de selectare. Este la fel de simplu ca asta.

18. X:după

before și after pseudo-clasele sunt mari., În fiecare zi, se pare, oamenii găsesc modalități noi și creative de a le folosi în mod eficient. Pur și simplu generează conținut în jurul elementului selectat.mulți au fost introduși pentru prima dată în aceste clase când au întâlnit hack-ul clear-fix.acest hack folosește clasa pseudo:after pentru a adăuga un spațiu după element și apoi a-l șterge. Este un truc excelent pentru a avea în geanta instrument, în special în cazurile în care overflow: hidden; metoda nu este posibilă.

pentru o altă utilizare creativă a acestui lucru, consultați sfatul meu rapid despre crearea umbrelor.,

Potrivit Selectori CSS3 caietul de sarcini, ar trebui să punct de vedere tehnic utilizarea pseudo element de sintaxă a două două puncte ::. Cu toate acestea, pentru a rămâne compatibil, agentul utilizator va accepta și o singură utilizare a colonului.

19. X: hover

div:hover { background: #e3e3e3;}

Oh, haide. Știi asta. Termenul oficial pentru aceasta este „clasa pseudo de acțiune a utilizatorului”. Sună confuz, dar chiar nu este. doriți să aplicați un stil specific atunci când un utilizator trece peste un element? Acest lucru va face treaba!,

Țineți minte că versiunile mai vechi de Internet Explorer nu mai răspunde atunci când :hover pseudo clasa este aplicat altceva decât o etichetă ancoră.

Veți folosesc cel mai des acest selector atunci când se aplică, de exemplu, un border-bottom pentru a ancora tag-uri, atunci când a plutit deasupra.

a:hover { border-bottom: 1px solid black;}

Pro-sfat: border-bottom: 1px solid black; arată mai bine decât text-decoration: underline;.

20., X: not (selector)

div:not(#container) { color: blue;}

clasa pseudo negație este deosebit de utilă. Să presupunem că vreau să selectez toate divs, cu excepția celui care are un id de container. Fragmentul de mai sus se va ocupa perfect de această sarcină.

Sau, dacă am vrut să selectați fiecare element (nu se recomanda) cu excepția alineatului categorie, am putea face:

*:not(p) { color: green;}

21., X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

putem folosi pseudo elemente (desemnată prin ::) pentru stil fragmente dintr-un element, cum ar fi prima linie sau pe prima literă. Rețineți că acestea trebuie aplicate elementelor la nivel de bloc pentru a intra în vigoare.,

Un pseudo-element este compus din două coloane: ::

Target Prima Literă a unui Paragraf

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Acest fragment este o abstracție, care va găsi toate punctele de pe pagina, și apoi sub-țintă doar prima literă din acel element.acesta este cel mai adesea folosit pentru a crea un stil asemănător ziarului pentru prima literă a unui articol.,

Target Prima Linie a unui Paragraf

p::first-line { font-weight: bold; font-size: 1.2em;}

de asemenea, ::first-line pseudo-elementul va fi, cum era de așteptat, stil prima linie a elementului numai.

„Pentru compatibilitate cu existente, foi de stil, agentii utilizator trebuie să accepte, de asemenea, cel anterior-colon notație pentru pseudo-elemente introduse în CSS nivelurile 1 și 2 (și anume, :first-line, :first-letter, :before și :after). Această compatibilitate nu este permisă pentru noile pseudo-elemente introduse în această specificație.,”- Selectori W3C Specificatii

Demo Live de Pseudo selectori

selectori Nth copii și de tip

22. X: nth-child(n)

li:nth-child(3) { color: red;}

vă amintiți zilele în care nu aveam cum să vizăm anumite elemente dintr-o stivă? nth-child clasa pseudo rezolvă asta!

rețineți că nth-child acceptă un număr întreg ca parametru, dar acesta nu este bazat pe zero. Dacă doriți să vizați al doilea element din listă, utilizați li:nth-child(2).

putem folosi chiar și acest lucru pentru a selecta un set variabil de copii., De exemplu, am putea face li:nth-child(4n) pentru a selecta fiecare al patrulea element din listă.

23. X:nth-ultima-copil(n)

li:nth-last-child(2) { color: red;}

dacă ai avea o listă foarte mare de elemente într-un ul, și ai nevoie doar să accesați, să zicem, cel de-al treilea la ultimul element? În loc să faceți li:nth-child(397), puteți utiliza în schimb clasa pseudo nth-last-child.această tehnică funcționează aproape identic cu numărul 16 de mai sus. Diferența este că începe la sfârșitul colecției și își face drumul înapoi.

24., X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black;}

vor fi momente când, mai degrabă decât selectarea unui child, în loc să aveți nevoie pentru a selecta potrivit type de element.

Imaginați-vă marcajul care conține cinci liste neordonate. Dacă ai vrut să stil numai al treilea ul, și nu au un unic id pentru a prinde în cârlig, ai putea folosi nth-of-type(n) pseudo clasa. În fragmentul de mai sus, doar al treilea ul va avea o graniță în jurul acestuia.

25., X:nth-ultima-de-tip(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

Și da, să rămână consecvent, putem folosi, de asemenea, nth-last-of-type pentru a începe la sfârșitul selectoare listă și să lucreze drumul înapoi la țintă elementul dorit.

26. X: primul copil

ul li:first-child { border-top: none;}

această pseudo clasă structurală ne permite să vizăm doar primul copil al părintelui elementului. Veți folosi adesea acest lucru pentru a elimina bordurile de la primul și ultimul element din listă.

De exemplu, să presupunem că aveți o listă de rânduri, și fiecare are un border-top și un border-bottom., Ei bine, cu acest aranjament, primul și ultimul element din acel set va arata un pic ciudat.

Multi designeri se aplică clase de first și last pentru a compensa acest lucru. În schimb, puteți utiliza aceste clase pseudo.

27. X:ultima-copii

ul > li:last-child { color: green;}

opusul first-child, last-child va viza ultimul element al elementului părinte.

last-child Selector Example

să construim un exemplu simplu pentru a demonstra o posibilă utilizare a acestor clase., Vom crea un element listă stil.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

pentru marcare, nu este nimic special: doar o listă simplă.

Aici s-CSS:

Acest stil va seta un fundal, elimina browser-ul implicit padding pe ul, și se aplică frontierelor pentru fiecare li pentru a oferi un pic de profunzime.

Pentru a adăuga adâncime la liste, se aplică un border-bottom fiecare li care este o nuanta sau doua mai inchisa decat li‘s culoarea de fundal., Apoi, aplicați un border-top care este cu câteva nuanțe mai ușoare.

singura problemă, după cum se arată în imaginea de mai sus, este că o frontieră va fi aplicat la foarte de sus și de jos a lista neordonata—care pare ciudat. Să folosim clasele pseudo :first-child și :last-child pentru a remedia acest lucru.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

acolo vom merge; că stabilește!

28., X: only-child

div p:only-child { color: red;}

sincer, probabil că nu vă veți găsi folosind clasa pseudo only-child prea des. Cu toate acestea, este disponibil, dacă aveți nevoie de el.Acesta vă permite să vizeze elemente care sunt singurul copil al părintelui său. De exemplu, referindu-se la fragmentul de mai sus, numai paragraful care este singurul copil al div va fi colorat în roșu.

Să presupunem următoarea marcare.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

În acest caz, cel de-al doilea div‘s punctele nu vor fi vizate; numai prima div. De îndată ce aplicați mai mult de un copil unui element, pseudo-clasa only-child încetează să intre în vigoare.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

această clasă pseudo structurală poate fi utilizată în câteva moduri inteligente. Acesta va viza elemente care nu au frați în containerul părinte. De exemplu, să vizăm toate uls care au doar un singur element de listă.,mai întâi, întrebați-vă cum ați îndeplini această sarcină. Ai putea face ul li, dar acest lucru ar viza toate elementele din listă. Singura soluție este să folosiți only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

first-of-type pseudo class vă permite să selectați primii frați de tipul său.

un Test

pentru a înțelege mai bine acest lucru, să facem un test. Copiați următorul marcaj în editorul dvs. de cod:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

acum, fără a citi mai departe, încercați să aflați cum să vizați doar „elementul de listă 2”., Când v-ați dat seama (sau ați renunțat), citiți mai departe.

soluție 1

există o varietate de moduri de a rezolva acest test. Vom trece în revistă câteva dintre ele. Să începem folosind first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

acest fragment spune în esență, pentru a găsi prima listă neordonată pe pagină, apoi găsiți doar copiii imediați, care sunt elemente de listă. Apoi, filtrați – l până la al doilea element din listă din acel set.

Soluția 2

O altă opțiune este utilizarea selectorului adiacent.,

p + ul li:last-child { font-weight: bold;}

În acest scenariu, vom găsi ul care purcede imediat p tag-ul, și apoi a găsi ultimul copil al elementului.

soluție 3

putem fi la fel de neplăcut sau la fel de jucăuș cum ne dorim cu acești selectori.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

de data aceasta, apucăm primul ul pe pagină, apoi găsim primul element din listă, dar începând din partea de jos!,

demonstrație Live a selectorilor de copii și de tip Nth

concluzie

dacă compensați browserele mai vechi, cum ar fi Internet Explorer 6, trebuie să fiți atenți atunci când utilizați acești selectori mai noi. Dar te rog nu lăsa asta să te descurajeze să înveți astea. Ți-ai face un mare deserviciu. Asigurați-vă că vă referiți aici pentru o listă de compatibilitate a browserului. Alternativ, puteți utiliza excelentul IE9 al lui Dean Edward.JS script pentru a aduce suport pentru aceste selectoare pentru browsere mai vechi.,

În al doilea rând, atunci când lucrați cu biblioteci JavaScript, cum ar fi popularul jQuery, încercați întotdeauna să utilizați acești selectori nativi CSS3 peste metodele/selectorii personalizați ai bibliotecii, atunci când este posibil. Va face Codul mai rapid, deoarece motorul selectorului poate utiliza parsarea nativă a browserului, mai degrabă decât propria sa.este minunat că petreceți timp învățând fundamentele designului web, dar dacă aveți nevoie de o soluție rapidă, unul dintre șabloanele CSS gata de utilizare ar putea fi o opțiune bună. Avem, de asemenea, câteva elemente CSS premium pentru tine să ia în considerare.,

• CSS3
  12 Elegant CSS, Tabele de stabilire a Prețurilor pentru cel mai recent Proiect Web
  Monty Shokeen
• Bootstrap 4
  18 Mai bun Bootstrap 4 Plugin-uri
  Monty Shokeen

Acces Gratuit la Envato Elemente pentru 1 Lună

în cele din Urmă, aici este o oferta foarte speciala pentru a vă ajuta să construiască aspect profesional site-uri și aplicații. Pe lângă utilizarea acestor selectori CSS, de ce să nu profitați de fotografii stoc de înaltă calitate, imagini video, fonturi premium, Grafică, Ilustrații și multe altele?,

în mod normal, ar trebui să plătiți pentru astfel de resurse. Dar acum, Puteți accesa milioane de materiale creative pentru proiectele dvs. de codare pentru o lună întreagă, complet gratuit. Și mai mult, veți obține descărcări nelimitate, astfel încât să puteți apuca cât doriți în acea lună și să plătiți numai dacă decideți să continuați!,

Pentru a profita de această ofertă, faceți clic pe acest special de înscriere link sau introduceți codul de mai jos pe pagina de înregistrare:

elements_cont_tuts-freemonth1-4bwkbp

nu așteptați prea mult timp—oferta este valabilă doar pentru o perioadă limitată de timp!