Share
Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
Deci ai învățat baza id, clasă, și descendent selectori - și apoi l-au sunat o zi? Dacă da, pierdeți un nivel enorm de flexibilitate. În timp ce mulți dintre selectorii menționați în acest articol fac parte din spec. CSS3 și, prin urmare, sunt disponibili numai în browserele moderne, vă datorați să le angajați în memorie.
Apropo, dacă aveți probleme cu CSS și vreți ca un profesionist să se uite peste el și să remedieze orice eroare, puteți găsi unii freelanceri calificați pe Envato Studio.
* marja: 0; umplutura: 0;
Să le batem pe cele evidente, pentru începători, înainte de a ne deplasa pe selectorii mai avansați.
Simbolul stea va viza fiecare element din pagină. Mulți dezvoltatori vor folosi acest truc pentru a zero margineși umplutură. Deși acest lucru este bine pentru teste rapide, vă sfătuiesc să nu folosiți niciodată acest lucru în codul de producție. Se adaugă prea mult greutate pe browser și nu este necesar.
* poate fi de asemenea utilizat cu selectori pentru copii.
#container * border: 1px solid black;
Aceasta va viza fiecare element care este un copil al lui #container div. Din nou, încercați să nu utilizați această tehnică foarte mult, dacă vreodată.
Vizualizați demonstrația
#container width: 960px; marja: auto;
Prefixarea simbolului hash la un selector ne permite să vizăm id. Aceasta este cu ușurință cea mai obișnuită utilizare, cu toate acestea, aveți grijă atunci când utilizați id selectoare.
Întrebați-vă: este absolut necesar să aplicați unul
idla acest element pentru a-l viza?
id selectorii sunt rigizi și nu permit reutilizarea. Dacă este posibil, mai întâi încercați să utilizați un nume de etichetă, unul dintre elementele HTML5 noi sau chiar o pseudo-clasă.
Vizualizați demonstrația
.eroare culoare: roșu;
Acesta este un clasă selector. Diferența dintre idși clasăes este că, cu acesta din urmă, puteți viza mai multe elemente. Utilizare clasăes atunci când doriți ca stilul dvs. să se aplice unui grup de elemente. Alternativ, utilizați idpentru a găsi un ac în carul de vânt, și stil doar acel element specific.
Vizualizați demonstrația
li a text-decoration: nimic;
Cel mai mare selector de comentarii este descendent selector. Când trebuie să fii mai specific cu selectorii tăi, folosești aceste. De exemplu, ce se întâmplă dacă, mai degrabă decât direcționarea toate anchor tags, trebuie doar să vizați ancorele care se află într-o listă neordonată? Aceasta este în mod special atunci când ați folosi un selector descendent.
Pro-sfat - Dacă selectorul dvs. arată
X Y Z A B.error, o faci gresit. Întrebați-vă întotdeauna dacă este absolut necesar să aplicați toate acestea greutate.
Vizualizați demonstrația
a culoare: roșu; ul marginea-stânga: 0;
Ce se întâmplă dacă doriți să direcționați toate elementele dintr-o pagină, în funcție de ele tip, mai degrabă decât unul id sau clasăNume? Păstrați-l simplu și utilizați un selector de tip. Dacă trebuie să vizați toate listele neordonate, utilizați ul .
Vizualizați demonstrația
a: link culoare: roșu; a: visted culoare: mov;
Noi folosim :legătură pseudo-clasă pentru a viza toate ancorele tag-uri care nu au fost încă să faceți clic pe.
În mod alternativ, avem și :vizitat pseudo-clasă, care, după cum ați fi de așteptat, ne permite să aplicăm stilul specific numai la etichetele de ancorare de pe pagină care avea a fost făcută clic pe, sau vizitat.
Vizualizați demonstrația
ul + p culoare: roșu;
Acesta este denumit selector adiacent. 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.
Vizualizați demonstrația
div # container> ul frontieră: 1px solid negru;
Diferența dintre standard X y și X> Y este că acesta din urmă va selecta numai copiii direcți. De exemplu, luați în considerare următorul marcaj.
- Listează articolul
- Copil
- Listează articolul
- Listează articolul
- Listează articolul
Un selector de #container> ul va viza numai ulcare sunt copii direcți ai div cu un id de recipient. Nu va viza, de exemplu, ul care este un copil al primului Li.
Din acest motiv, există beneficii de performanță în utilizarea combinatorului pentru copii. De fapt, este recomandat mai ales atunci când lucrați cu motoare selective CSS bazate pe JavaScript.
Vizualizați demonstrația
ul ~ p culoare: roșu;
Acest combinator frate este similar cu X + Y, cu toate acestea, 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. Acesta va selecta, referindu-ne la exemplul de mai sus, orice p elemente, atâta timp cât acestea urmează ul.
Vizualizați demonstrația
o [titlu] culoare: verde;
A fost denumită ca o atribut selector, în exemplul nostru de mai sus, acesta va selecta doar etichetele de ancorare care au a titlu atribut. Etichetele ancore care nu vor primi acest stil special. Dar, dacă trebuie să fii mai specific? Bine?
Vizualizați demonstrația
o [href = "http://net.tutsplus.com"] culoare: # 1f6053; / * nettuts verde * /
Fragmentul de mai sus va stoca toate etichetele de ancorare la care se face legătura http://net.tutsplus.com; ei vor primi culoarea noastră verde de marcă. Toate celelalte etichete de ancorare vor rămâne neafectate.
Rețineți că ambalăm valoarea în citate. Nu uitați să faceți acest lucru și atunci când utilizați un motor selector CSS JavaScript. Când este posibil, utilizați întotdeauna selectorii CSS3 prin metode neoficiale.
Acest lucru funcționează bine, totuși, este un pic rigid. Ce se întâmplă dacă legătura se îndreaptă într-adevăr către Nettuts +, dar poate că este calea nettuts.com mai degrabă decât urlul complet? În aceste cazuri putem folosi un pic de sintaxă a expresiilor regulate.
Vizualizați demonstrația
a [href * = "tuts"] culoare: # 1f6053; / * nettuts verde * /
Acolo mergem; asta este ceea ce avem nevoie. Steaua indică faptul că trebuie să apară valoarea procesului undeva în valoarea atributului. În acest fel, aceasta acoperă nettuts.com, net.tutsplus.com, și chiar tutsplus.com.
Rețineți că aceasta este o declarație generală. Ce se întâmplă dacă eticheta de ancorare este conectată la un site non-Envato cu șirul tuts în url? Când trebuie să fii mai specific, folosește ^ și $, pentru a face referire la începutul și sfârșitul unui șir, respectiv.
Vizualizați demonstrația
a [href ^ = "http"] background: url (cale / spre / extern / icon.png) no-repeat; padding-left: 10px;
Vă întrebați vreodată cum unele site-uri web pot afișa o pictogramă lângă link-urile care sunt externe? Sunt sigur că ați mai văzut aceste lucruri înainte; sunt amintiri minunate că link-ul vă va îndruma către un site complet diferit.
Acesta este un cinch cu simbolul caratei. Este cel mai des folosit în expresii regulate pentru a desemna începutul unui șir. Dacă vrem să vizăm toate etichetele de ancorare care au a href care începe cu http, am putea folosi un selector similar cu fragmentul prezentat mai sus.
Observați că nu căutăm
http: //; este inutil și nu ține cont de urlările care încep cuhttps: //.
Acum, dacă am vrut să modelem toate ancorele care se leagă, de exemplu, de o fotografie? În aceste cazuri, hai să căutăm Sfârșit a șirului.
Vizualizați demonstrația
o [href $ = ". jpg"] culoarea: roșu;
Din nou, folosim un simbol de expresii regulate, $, 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ă .jpg. Țineți minte că acest lucru nu va funcționa cu siguranță gif-uri și pngs.
Vizualizați demonstrația
un [date-filetype = "imagine"] culoare: roșu;
Reveniți la numărul opt; cum putem compensa toate tipurile diferite de imagini: png, jpeg,jpg, gif? Ei bine, am putea crea mai mulți selectori, cum ar fi:
o [href $ = ". jpg"], o [href $ = ". jpeg"], o [href $ = ".
Dar, este o durere în fund și este ineficientă. O altă soluție posibilă este utilizarea atributelor personalizate. Dacă am adăugat pe noi Date-filetype atribut fiecărei ancore care se leagă de o imagine?
Image Link
Apoi, cu asta cârlig în loc, putem folosi un selector de atribute standard pentru a viza numai acele ancore.
un [date-filetype = "imagine"] culoare: roșu;
Vizualizați demonstrația
a [date-info ~ = "extern"] culoare: roșu; a [data-info ~ = "imagine"] border: 1px solid negru;
Iată unul special care vă va impresiona prietenii. Nu prea mulți oameni știu despre acest truc. Tilda (~) ne permite să vizăm un atribut care are o listă de valori separate.
Mergem împreună cu atributul nostru personalizat de la numărul cincisprezece, deasupra, am putea crea un a Date-info atribut, care poate primi o listă separată de spațiu cu tot ce avem nevoie pentru a face notă. În acest caz, vom nota legături externe și linkuri către imagini - doar pentru exemplul respectiv.
"Faceți clic pe mine, prostule
Cu acest marcaj în loc, acum putem viza orice etichete care au oricare dintre aceste valori, prin folosirea trucului de selectare a atributelor.
/ * Target data-info attr care conține valoarea "extern" * / a [date-info ~ = "extern"]] culoare: roșu; / * Și care conțin valoarea "imagine" * / a [data-info ~ = "imagine"] border: 1px solid black;
Destul de minunat, ay?
Vizualizați demonstrația
intrare [type = radio]: verificat border: 1px solid black;
Această clasă pseudo va viza doar un element de interfață utilizator care a fost verificat - ca un buton radio sau caseta de selectare. Este la fel de simplu ca asta.
Vizualizați demonstrația
inainte de și după pseudo clase lovi cu capul. În fiecare zi, se pare că oamenii găsesc modalități noi și creative de a le folosi eficient. Acestea generează pur și simplu conținut în jurul elementului selectat.
Mulți dintre ei au fost introduși pentru prima dată în aceste clase atunci când au întâlnit hack-ul clar.
.clarfix: după content: ""; afișare: bloc; clar: ambele; vizibilitate: ascuns; font-size: 0; înălțime: 0; .clearfix * display: inline-block; _height: 1%;
Acest hack utilizează :după clasa pseudo pentru a adăuga un spațiu după element, apoi ștergeți-l. Este un truc excelent pe care îl aveți în geanta pentru instrumente, în special în cazurile în care overflow: ascuns; metoda nu este posibilă.
Pentru o altă utilizare creativă a acestui lucru, consultați sfatul meu rapid de a crea umbre.
Conform specificației CSS3 Selectors, ar trebui să utilizați tehnic sintaxa pseudo-element a două colonițe
::. Cu toate acestea, pentru a rămâne compatibil, agentul utilizator va accepta și o singură utilizare a colonului. De fapt, în acest moment, este mai inteligent să utilizați versiunea cu un singur colon în proiectele dvs..
div: hover background: # e3e3e3;
O, haide. Știi asta. Termenul oficial pentru asta este acțiunea utilizatorului pseudo-clasă. Suna confuz, dar într-adevăr nu este. Doriți să aplicați un stil specific atunci când un utilizator se deplasează peste un element? Aceasta va face treaba!
Rețineți că versiunea mai veche a Internet Explorer nu răspunde atunci când
:planarepseudo-clasa este aplicată la orice altceva decât o etichetă de ancorare.
Veți folosi cel mai adesea acest selector atunci când aplicați, de exemplu, a border-bottom să ancoreze etichetele, atunci când se deplasează.
a: hover border-bottom: 1px solid negru;
Pro-sfat -
margine de fund: 1px solid negru;arata mai bine decattext-decorare: subliniere;.
div: nu (#container) culoare: albastru;
negare pseudo-clasa este deosebit de util. Să presupunem că vreau să selectați toate divs, cu excepția celui care are un id de recipient. Fragmentul de mai sus se va ocupa perfect de această sarcină.
Sau, dacă aș vrea să selectez fiecare element (nu este recomandat), cu excepția etichetelor din paragraf, am putea face:
*: nu (p) culoare: verde;
Vizualizați demonstrația
p :: prima linie font-weight: bold; font-size: 1.2m;
Putem folosi pseudo elemente (desemnate de ::) pentru fragmente de stil ale unui element, cum ar fi prima linie sau prima literă. Rețineți că acestea trebuie aplicate elementelor de blocare pentru a intra în vigoare.
Un pseudo-element este compus din două elemente:
::
p :: prima literă float: left; font-size: 2m; font-weight: bold; font-family: cursive; padding-right: 2px;
Acest fragment este o abstracție care va găsi toate paragrafele de pe pagină și apoi va sub-viza numai prima literă a acelui element.
Acest lucru este cel mai adesea folosit pentru a crea stilul de ziar pentru prima literă a unui articol.
p :: prima linie font-weight: bold; font-size: 1.2m;
În mod similar, ::prima linie elementul pseudo va fi, după cum era de așteptat, primul rând al elementului.
"Pentru compatibilitatea cu foile de stil existente, agenții utilizator trebuie, de asemenea, să accepte notația anterioară unu-colon pentru pseudo-elementele introduse în nivelurile CSS 1 și 2 (și anume: prima linie: prima literă:: înainte și după). Această compatibilitate nu este permisă pentru noile pseudo-elemente introduse în această specificație. " - Sursă
Vizualizați demonstrația
li: n-copil (3) culoare: roșu;
Amintiți-vă de zilele în care nu am avut nici o posibilitate de a viza anumite elemente dintr-o stivă? nth-copil pseudo-clasa rezolvă asta!
Vă rugăm să rețineți că nth-copil acceptă un număr întreg ca parametru, cu toate acestea, acesta nu este bazat pe zero. Dacă doriți să vizați cel de-al doilea element de listă, utilizați li: nth-copil (2).
Putem chiar folosi 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ă.
Vizualizați demonstrația
li: n-ultimul copil (2) culoare: roșu;
Ce ar fi dacă ai avea o listă uriașă de elemente într-un ul, și trebuie doar să accesați, să zicem, al treilea la ultimul element? Mai degrabă decât să faci li: nth-copil (397), ați putea folosi în schimb nth-ultimul-copil pseudo-clasă.
Această tehnică funcționează aproape identic de la numărul șaisprezece de mai sus, cu toate acestea, diferența este că aceasta începe la sfârșitul colecției și funcționează înapoi.
Vizualizați demonstrația
ul: n-a-tip (3) graniță: 1px solid negru;
Vor exista momente când, mai degrabă decât selectarea a copil, în schimb, trebuie să selectați în funcție de tip de element.
Imaginați-vă o marjă care conține cinci liste neordonate. Dacă ați vrut să stil doar al treilea ul, și nu au avut un caracter unic id să intri în, ai putea folosi nth-de-tip (n) pseudo-clasă. În fragmentul de mai sus, numai al treilea ul va avea o graniță în jurul lui.
Vizualizați demonstrația
ul: n-ul-de-tip (3) graniță: 1px solid negru;
Și da, pentru a rămâne consecvenți, putem folosi și ea nth-ultimul-de-tip pentru a începe la sfârșitul listei selectorilor și pentru a ne întoarce în direcția dorită.
ul li: primul copil border-top: nimic;
Această clasă pseudo structurală ne permite să vizăm doar primul copil al părintelui elementului. Veți folosi adesea acest lucru pentru a elimina margini din prima și ultima listă.
De exemplu, să presupunem că aveți o listă de rânduri și fiecare are o border-top și a border-bottom. Ei bine, cu acel aranjament, primul și ultimul element din acel set vor părea un pic ciudat.
Mulți designeri aplică clase de primul și ultimul pentru a compensa acest lucru. În schimb, puteți folosi aceste pseudo-clase.
Vizualizați demonstrația
ul> li: ultimul copil culoare: verde;
Opusul primul copil, ultimul copil va viza ultimul element al părintelui elementului.
Să construim un exemplu simplu pentru a demonstra o posibilă utilizare a acestor clase. Vom crea un element listat în stil.
Nimic special aici; doar o listă simplă.
ul width: 200px; fundal: # 292929; culoare albă; listă: nu există; padding-left: 0; li padding: 10px; margine de fund: 1px solid negru; frontieră-sus: 1px solid # 3c3c3c;
Acest stil va seta un fundal, va elimina padding-ul implicit de browser pe ul, și să aplicați frontiere fiecăruia Li pentru a oferi un pic de adâncime.
Pentru a adăuga adâncimea la liste, aplicați a
border-bottomPentru fiecareLicare este o umbră sau două mai întunecate decâtLiculoarea fundalului. Apoi, aplicați aborder-topcare este o pereche de nuanțe mai usoara.
Singura problemă, așa cum se arată în imaginea de mai sus, este că o margine va fi aplicată chiar în partea superioară și inferioară a listei neordonate - care pare ciudat. Să folosim :primul copil și :ultimul copil pseudo-clase pentru a rezolva acest lucru.
li: primul copil border-top: nici unul; li: ultimul-copil border-bottom: nici unul;
Acolo mergem; care o rezolvă!
Vizualizați demonstrația
Da - IE8 suportate :primul copil, dar nu :ultimul copil. Dă-ți seama.
div p: numai-copil culoare: roșu;
Adevărat, probabil că nu vă veți găsi folosind singurul copil pseudo clasa prea des. Cu toate acestea, este disponibil, dacă aveți nevoie de el.
Vă permite să direcționați elemente care sunt numai copilul părintelui său. De exemplu, făcând referire la fragmentul de mai sus, numai paragraful care este singurul copil din div va fi colorat, roșu.
Să presupunem următorul marcaj.
Paragraful meu aici.
Două paragrafe în total.
Două paragrafe în total.
În acest caz, al doilea divnu vor fi vizate paragrafe; doar primul div. De îndată ce aplicați mai mult de un copil unui element, singurul copil clasa pseudo nu mai produce efecte.
Vizualizați demonstrația
li: numai de tip font-weight: bold;
Această clasă pseudo structurală poate fi folosită în moduri inteligente. Se va viza elemente care nu au nici frați în containerul părinte. Ca exemplu, hai să vizăm toate uls, care au doar un singur element de listă.
În primul rând, întrebați-vă cum ați îndeplini această sarcină? Ai putea face ul li, dar aceasta ar fi ținta toate elemente de listă. Singura soluție este de a utiliza numai de tip.
ul> li: numai de tip font-weight: bold;
Vizualizați demonstrația
primul-de-tip Clasa pseudo vă permite să selectați primii frați ai tipului.
Pentru a înțelege mai bine acest lucru, hai să facem un test. Copiați următorul marcaj în editorul de cod:
Paragraful meu aici.
- Listează articolul 1
- Listează articolul 2
- Listează articolul 3
- Listează articolul 4
Acum, fără a citi mai departe, încercați să aflați cum să vizați numai "Listă de post 2". Când v-ați dat seama (sau renunțat), citiți mai departe.
Există o varietate de modalități de a rezolva acest test. Vom examina câteva dintre ele. Să începem prin utilizarea primul-de-tip.
ul: prima de tip> li: nth-child (2) font-weight: bold;
Acest fragment explică în esență: "găsiți prima listă neordonată pe pagină, apoi găsiți numai copiii imediați, care sunt elemente de listă. Apoi, filtrați-l numai în cel de-al doilea element din lista din set.
O altă opțiune este folosirea selectorului adiacent.
p + ul li: ultimul copil font-weight: bold;
În acest scenariu, găsim ul care continuă imediat p și apoi găsiți ultimul copil al elementului.
Putem fi la fel de neplăcuți sau de jucăuși pe cât vrem cu acești selectori.
ul: primul de tip li: n-ultimul copil (1) font-weight: bold;
De data asta, luăm prima ul pe pagina, apoi găsiți primul element de listă, dar pornind de la partea de jos! :)
Vizualizați demonstrația
Dacă compensați browserele mai vechi, cum ar fi Internet Explorer 6, trebuie să fiți atenți când utilizați aceste selectori mai noi. Dar, vă rog, nu vă lăsați să vă descurajeze să învățați aceste lucruri. Ai face o mare dezavantaj pentru tine. Asigurați-vă că vă referiți aici pentru o listă de compatibilitate cu browserul. Alternativ, puteți utiliza scriptul excelent IE9.js al lui Dean Edward pentru a oferi suport pentru acești selectori pentru browserele mai vechi.
În al doilea rând, atunci când lucrăm cu biblioteci JavaScript, cum ar fi jQuery populare, încercați întotdeauna să utilizați acești selectori CSS3 nativi peste metodele / selectorii personalizați ai bibliotecii, atunci când este posibil. Acesta va face codul dvs. mai rapid, deoarece motorul selector poate folosi parsarea nativă a browserului, mai degrabă decât propria sa.
Este minunat să petreceți timpul învățând fundamentele designului web, dar dacă aveți nevoie de o soluție rapidă, una dintre șabloanele CSS gata de utilizare ar putea fi o opțiune bună. De asemenea, avem câteva elemente CSS premium pentru a vă putea lua în considerare:
Iată câteva elemente de gata de utilizare a codului CSS de la Envato Market pe care le puteți găsi utile.
Acest Mega Drop Down Menu este o soluție flexibilă și ușor de integrat pentru a vă construi meniurile personalizate. Deschiderea se bazează numai pe CSS / XHTML și vine cu un formular complet de contact.
CSS3 Mega Drop Down MenuCSS3 Tabele responsabile de stabilire a prețurilor Web Grids reprezintă un pachet de tabele de prețuri CSS3 pure, responsive și cu retină. Șablonul vine cu 2 stiluri de masă, 20 de skin-uri predefinite, cu stări animate de hover, posibilitatea de a seta una sau mai multe coloane activ (implicit), panglici CSS3, tooltip-uri CSS3, 20 pictograme yes / no.
Această versiune este dedicată pentru orice site bazat pe CMS personalizat, precum și pentru site-ul non-CMS și va funcționa cu site-uri HTML simple sau bazate pe PHP.
CSS3 Tabele de evaluare a tabelelor responsabile de webTooltip este un gentleman frumos, modern care apare atunci când este timpul de spectacol. Caracteristicile sale includ:
Bara de instrumenteMegaNavbar este o componentă de navigare HTML5 / CSS3 pură care folosește clasificarea navbar standard și clasele sistemului de grilă fluidă din Bootstrap 3. Funcționează pentru module fixe și receptive și are posibilitatea de a include și alte componente Bootstrap. MegaNavbar este compatibil cu dispozitive mobile și browsere web moderne.
MegaNavbar (v 2.2.0). Meniul avansat Mega pentru Bootstrap 3.0+Acest pachet de tabel de prețuri CSS3 este o soluție completă pentru construirea de mese minunate în câteva minute. Dispune de 6 variante de culori, precum și 2 variante de tabel (ușor sau întunecat).
Tabele de preț CSS3 responsabile
Accentsconagua