Share
CSS este un limbaj relativ simplu de învățat. Stăpânirea, pe de altă parte, se poate dovedi un pic mai dificilă. Compensarea pentru diferite incoerențe ale browserului poate produce o migrenă. În acest articol, vom demistifica cinci dintre cele mai mari probleme care se întâmplă când veți crea aplicații web.
Am făcut toate astea. Te gândești la tine, "Wow, acest text ar arăta grozav dacă ar fi roșu aprins". (într-adevăr?) Din păcate, când adăugați styling-ul necesar, textul rămâne negru. Cum se face?
Ar putea exista câteva motive pentru care stilurile tale nu au efect. Inutil să spun, poate fi o problemă urâtă - mai ales pentru începători dezvoltatori CSS. Mai întâi, plătiți o vizită în fișierul dvs. CSS și asigurați-vă că nu există vreo greșeală. Am pierdut multe ore dezmembrarea documentelor mele doar pentru a găsi că am scos un cuvânt greșit. Dar dacă nu ți-ai lovit capul de perete la un moment dat, nu ai voie să te numești un dezvoltator de web! Cel mai probabil, aveți de-a face cu o problemă de specificitate. Încercați să adăugați "!important"alături de stilul care nu are efect.În cazul în care funcționează brusc, înseamnă că aveți cu siguranță o problemă de" greutate ".. Ca o practică bună, nu lăsați niciodată" important "oriunde în foaia dvs. de stil. o metodă de depanare. Luați în considerare următorul exemplu:
#wrap #myStyle culoare: negru;
Pentru că aici există o mai mare specificitate, culoarea va rămâne neagră. Prin includerea identificatorului suplimentar, "#wrap", există mai multă greutate pe acest selector. În consecință, primul stil nu va fi luat în considerare în favoarea acestuia.
Cum putem rezolva această problemă? Mai întâi trebuie să verificați dacă cel de-al doilea stil poate fi complet șters. Dacă nu se poate, va trebui pur și simplu să adăugați mai multă specificitate selectorului original. Vom trece conceptul de specificitate "cu mult mai multe detalii în scurt timp. Să încercăm să adăugăm:
#wrap p # myStyle culoare: roșu;
Acum, textul va deveni în cele din urmă roșu. Prin adăugarea selectorului suplimentar "p", am adăugat încă un punct, eliminând astfel orice alt stil.
Poate mai mult decât orice altceva, poziționarea se poate dovedi a fi un subiect inutil de confuz pentru începătorii de proiectanți CSS intermediari. Cea mai bună modalitate de a învăța este de a aborda mai întâi poziția absolută. Să presupunem că avem un document html și CSS gol. Dacă am plasa apoi o imagine absolut pe pagină - spunem 100px din partea de sus și 100px din stânga marginilor ferestrei - am putea scrie următorul stil ...
img poziție: absolut; top: 100px; stânga: 100px;
Elementele poziționate în mod absolut sunt poziționate în raport cu cele mai apropiate elemente părinte poziționate. În acest caz, în cazul în care pe pagină nu există elemente poziționate relativ, imaginea va fi poziționată în raport cu fereastra.
Acum, imaginați-vă că am înfășurat o poziție relativ poziționată în jurul imaginii noastre.
Pentru a stabili un context de poziționare, trebuie să adăugăm "poziție: relativă" la stilul părintelui div.
div # wrapper poziție: relativă; fundal: gri; / * Doar pentru a vedea frontierele. * / Height: 600px; / * Deoarece imaginea este absolut poziționată, trebuie să forțăm înălțimea. * / Width: 770px; marja: auto;
Acum, când poziționăm absolut imaginea, aceasta va fi poziționată "relativ" față de divizia "împachetător". Rețineți că dacă am elimina această proprietate, imaginea va fi din nou plasată în funcție de fereastra browserului. Proprietatea "poziție" este aici.
Chris Coyier trece peste câteva exemple practice care arată exact cum și când să folosească poziționarea. Include un demo și un cod sursă descărcabil.
Vizitați articolul
"Să aruncăm o lumină asupra misteriilor umbrite ale poziționării CSS. Dacă abilitățile dvs. CSS sunt limitate sau chiar moderate, veți afla ce aveți nevoie pentru a stăpâni poziționarea".
Vizitați articolul
Pentru cei care nu sunt familiarizați cu "Bug-ul cu două marje", dacă plutiți un element și apoi procedați pentru a adăuga marje în aceeași direcție ca flotorul, Internet Explorer 6 va dubla incorect valoarea. În realitate, o margine stângă de "100px" devine "200px" în IE6. Există trei remedii diferite pe care le vom examina.
Schimbați afișarea în linie. Cea mai simplă soluție, descoperită de Steve Clason, este de a schimba proprietatea afișajului elementului dvs..
#floatElement display: inline; plutește la stânga; margin-stânga: 100px;
Utilizați comentariile condiționate. Din fericire, schimbarea afișajului va remedia această problemă urâtă. Cu toate acestea, dacă, din anumite motive, aveți nevoie de o metodă diferită? Internet Explorer vă permite să vizați diferite versiuni de browser utilizând "comentarii condiționate". Adăugați următoarele în eticheta capului documentului dvs.:
În termeni de layman, acest cod spune: "Dacă un vizitator al paginii dvs. folosește Internet Explorer 6 sau o versiune inferioară, importați o foaie de stil numită" ie6.css ".Un rezultat, browserele moderne vor ignora această declarație.I IE 6 și mai jos, pe de altă parte, va implementa fișierul. Acum, în fișierul nostru ie6.css, va trebui să adăugăm un anumit stil de suprascriere.
#floatElement float: left; margin-stânga: 50px;
Deoarece știm că IE 6 va dubla marjele pe elemente plutitoare, dacă vom reduce valoarea marjei cu 50%, aceasta ne va fixa documentul. Această metodă este potrivită în special atunci când aveți multe stiluri care vizează direct IE6. Este important să vă păstrați toate "hack-urile" într-o locație centralizată.
Punerea în aplicare a subcontractării. Există multe modalități de a direcționa versiuni mai vechi ale Internet Explorer direct din foaia de stiluri primare. În general, prefer să folosesc comentarii condiționate. Cu toate acestea, dacă am nevoie doar de a schimba o singură proprietate, voi folosi de multe ori hack-ul de subliniere. Luați în considerare următoarele:
#floatElement float: left; margin-stânga: 100px; _margin-stânga: 50px;
Browserele moderne vor trece prin aceste proprietăți. Când ajung la subliniere, vor sări peste tot în stil. Pe de altă parte, IE6 va ignora sublinierea și va implementa marjele noi. Ceea ce sfârșim este cu browserele moderne care adaugă "100px" la marginea din stânga. IE 6, respectiv, va adăuga doar "50px".
Dustin oferă o explicație rapidă pentru depășirea acestei erori. Asigurați-vă că pentru a verifica tutoriale sale legate, de asemenea.
Vizitați articolul
Asigurați-vă că verificați acest articol ușor de citit dacă sunteți încă puțin confuz.
Vizitați articolul
Absolut! Cu toate acestea, foarte puțini oameni cunosc ecuația exactă. Multi dintre voi, probabil, mergi prin metoda "pastreaza adaugarea mai multor identificatori pana cand functioneaza". Practic vorbind, acest lucru va funcționa foarte bine. Dar, ar trebui să știți cum să calculați greutatea selectorilor dvs. niciodată.
Mai întâi, să asociem fiecare tip de selector cu o valoare.
Să încercăm să calculam greutatea următorului stil ...
body #wrap div # bara laterala ul li a.selected styling aleatoriu ...
Referindu-ne la calculatorul nostru de mai sus, vom diseca acest selector. Elementul corpului primește un punct. Apoi, avem un identificator (#wrap). Aceasta va adăuga 100 de puncte la înregistrare. Continuând, avem "div bar # sidebar". Câte puncte credeți că merită acest lucru? Dacă ai ghicit 100 de puncte, ai fi incorect. Trebuie să influențezi elementul "div" în greutatea ta. Răspunsul corect este de 101 de puncte. Elementele "ul", "li" și "a" câștigă câte un punct. În cele din urmă, clasa "selectată" primește încă 10 puncte. Adăugând totul, ajungem la o sumă 215.
Vă recomandăm să petreceți câteva minute și să memorați acest sistem punct. Vă va salva mult timp pierdut atunci când vă aflați într-o dilemă de specificitate!
Pentru o explicație aprofundată a specificității, vă recomand să citiți acest articol de sus în jos.
Vizitați articolul
Aflați arta specificității într-o distracție "Star Wars". Este necesar să citim.
Vizitați articolul
Un pas necesar atunci când lucrați pe un site este să îl revedeți în fiecare browser modern: Firefox, Internet Explorer, Safari și Opera. Pasul doi este de a testa site-ul dvs. în versiunea mai veche a IE. Vă recomandăm să descărcați IE Tester, care vă va permite să vizualizați site-ul dvs. în IE 5 - IE 8. Pasul final este de a verifica toate browserele mai puțin obișnuite. Vizitați BrowserShots.org pentru a vizualiza instantanee ale site-ului dvs. în fiecare browser disponibil.
Nu vă place să treceți între IE și Firefox atunci când testați site-ul dvs.? De ce nu descărcați fila IE?
Vizitați articolul
Orice întrebări confuze pe care le-am pierdut? Sunt sigur că există o mulțime. Lasă un comentariu și voi încerca să-i încorporăm în partea a doua. Sper că voi transforma aceste articole de stil "Intrebare și Răspuns" într-o serie în curs.
Accentsconagua
