Aspectul poate fi unul dintre cele mai subtile lucruri de stăpânit când vine vorba de CSS, deși acestea sunt, fără îndoială, una dintre cele mai importante. În acest sfat rapid vom privi fluxul documentului normal și cum vă poate ajuta cu aspectul.
Introducere
Înainte de a vă explica ce înseamnă documentul normal înseamnă că trebuie să explic diferitele tipuri de elemente html și modul în care acestea sunt afișate în mod implicit.
Ne vom concentra pe cele două tipuri principale de elemente HTML, și anume elementele "bloc-nivel" și "inline". De la apariția HTML5, avem o categorizare mai specifică a elementelor (phrasing, flow, and sectioning), deși browserele încă se bazează în mod efectiv pe definițiile blocului și inline.
Acesta este un exemplu de mai multe elemente inline toate conținute într-un paragraf care include o ancora o deschidereși o etichetă de accent.Redimensionați browserul și veți vedea cum un browser gestionează aceste elemente inline în mod implicit. Așa este, totul apare pe o singură linie și se înfășoară atunci când nu mai există loc.
Consultați acest demo element în linie în acțiune.
Elemente la nivel de bloc, cu toate acestea, cum ar fi divuri și paragrafe, precum și membrii mai noi ai HTML5 articol și secțiune, au proprietăți foarte diferite în mod implicit. Elementele de nivel de bloc vor conține, în mod normal, dar nu întotdeauna, elemente inline sau alte elemente la nivel de bloc. Gândiți-vă la ele ca elementul "structural" al celor două.
Browserele vor (în mod implicit) să formuleze elemente la nivel de bloc cu o rupere de linie înainte și după. Cu alte cuvinte, elementele la nivel de bloc vor începe întotdeauna pe o linie nouă (stivuirea ca blocuri), cu excepția cazului în care se face altfel.
Coafura
În toate cazurile, putem modifica modul în care un element este afișat utilizând proprietatea de afișare CSS:
element display: bloc; / * sau inline, de exemplu * /
Aceste caracteristici ale afișajului dictează și ce altceva putem stiliza. De exemplu, suntem liberi să determinăm lățimea și înălțimea unui element la nivel de bloc, dar nu și în cazul elementelor inline. Plăcuțele și marginile pot fi aplicate elementelor inline, dar ele nu vor influența dimensiunile elementului care le conține. Uitați-vă la acest exemplu pentru a vedea ce vreau să spun:
Ceilalti
În plus față de blocul comun și atributele de afișare inline, există câteva exemple mai puțin întâlnite. De exemplu, ce se întâmplă dacă doriți să afișați un element în linie, dar stilul acestuia să fie un element la nivel de bloc? Introduceți inline-block valoare. Elementele de bloc în linie păstrează proprietăți, cum ar fi lățimea, înălțimea, marginea și umplutura, deoarece acestea sunt aplicate pentru blocarea elementelor de nivel, menținând în același timp calitățile structurale ale unui element inline.
Inline-Block este o alternativă potențială a elementelor plutitoare, dar cu siguranță nu este fără problemele sale în aceste circumstanțe.
O altă valoare afișată, care nu este la fel de bine folosită, este Lista-item, care face exact ceea ce se spune pe tablă. Fiecare element cu valoarea elementului listat aplicat este afișat pe verticală, așa cum v-ați aștepta într-o listă, dar ele au, de asemenea, puncte de lângă ele. Acest lucru este util pentru listarea datelor, adică o listă de nume și este logic modul în care elementele de listă, cum ar fi:
Charles Mahogany Biggins
Tiggy Wiggins Hydrangea
Foxy Bumpkins Numpty
sunt afișate în mod implicit.
În cele din urmă, ultima valoare afișată care merită menționată este "niciuna". Poti ghici ce face? Așa este, orice element care are proprietatea de afișare setat la "none" pur și simplu nu apare pe pagină; este vizibil (împreună cu toate elementele conținute în el) eliminate din document. Marcajul pentru acel element este încă trimis la browser, dar nu generează o casetă și este ascuns de la vizualizare - ecranatorii nu o vor mai lua. Nu ocupă nici un spațiu, deci alte elemente îi pot lua locul.
Ce este fluxul normal al documentelor?
Este modul în care este prezentată o pagină când nu faceți nimic în ceea ce privește stilul structural.
Având în vedere cele de mai sus, ce anume este fluxul normal de documente? Este modul în care este prezentată o pagină când nu faceți nimic în ceea ce privește stilul structural. Browserele afișează conținutul în ordinea în care a fost întâlnit; chestii de top în primul rând, continuarea conținutului mai jos.
Când oamenii încep mai întâi designul web, sunt adesea dornici să facă față unor tot felul de trucuri fanteziste, fără a învăța elementele de bază și fundamentele. Dacă înțelegeți fluxul documentului normal, desenele dvs. de web vor fi cu atât mai bune pentru el!
Exercitarea: Marcajul
Să începem să facem o simplă galerie foto cu un CSS foarte simplu. Am făcut rapid un fișier html pentru a ne începe, în cele din urmă ne concentrăm în principal pe stil. Copiați codul de mai jos în editorul de text și vă voi explica ce este acolo.
Fluxul documentului normal
O intrare în fluxul normal al documentelor.
Bine ați venit în Galerie foto!
Eu sunt omul fără nume, Zapp Brannigan! Bender, fiind Dumnezeu, nu este ușor. Dacă faceți prea mult, oamenii devin dependenți de tine și dacă nu faceți nimic, ei își pierd speranța. Trebuie să utilizați o atingere ușoară. Ca un safecracker sau un buzunar. Hei, ghiciți la ce esti accesoriile. Leela, Bender, vom face jefuirea grave. De asemenea, Zoidberg. Aoleu! E blocată într-o buclă infinită și e un idiot! Ei bine, dragostea pentru tine.
Pot folosi pistolul? Oh nu! Profesorul mă va lovi! Dar dacă Zoidberg o rezolvă… apoi daruri! Prăji! Încetează să faci ceea ce trebuie, ești ticălos! Cine e suficient de curajos ca să zboare în ceva ce noi toți numim o sferă de moarte? Nu am simțit nimic din cauza faptului că a murit cobaiul meu.
Există un bloc css gol în partea de sus. Aici vom începe stilul. Mai jos este o legătură condițională cu scriptul HTML Shiv care va ajuta Internet Explorer să recunoască și să afișeze corect elementele HTML5. Sub aceasta, eticheta obligatorie. În interiorul etichetei corpului se află containerul pentru întreaga pagină, precum și unul pentru galeria foto. Am folosit placekitten pentru a obține imagini de tip placeholder, iar Fillerama pentru textul de umplere. Deci, este vorba despre asta.
OK, deci acum doar pentru a demonstra modul în care funcționează fluxul normal de documente, aruncați o privire la pagina pe care tocmai ați făcut-o. Cum v-ați aștepta? Imaginile sunt afișate într-o singură linie, până la lățimea elementului părinte, în acest caz este umplută cifra (setată la 100% din fereastra de vizualizare, dar probabil cu unele margini în mod implicit). Și, deși nu puteți să-l vedeți încă, toate elementele de nivel bloc, cum ar fi div, figura și articolul, sunt pe linia lor proprie.
Acesta este fluxul normal de documente în acțiune. Acum, redimensionați browser-ul pentru o secundă. Da, este fluid! Poate că nu complet așa cum am ajuns să înțelegem - imaginile își păstrează dimensiunile, indiferent de portul de vizualizare. Cu toate acestea, aspectul dvs. va fi întotdeauna fluid în mod implicit.
Exercitarea: CSS de bază
Doar pentru a dovedi că nu-ți trag piciorul cu privire la elementele la nivel de bloc, să le adăugăm câteva culori de fundal. În blocul de cod CSS din partea de sus a fișierului HTML, adăugați acest lucru:
Acum, după adăugarea unor culori de fundal, verificați rezultatul. Ar trebui să fie evident modul în care sunt afișate elementele de nivel de bloc.
Exercitarea: CSS Layout
Stilul de mai jos conține numai proprietăți CSS din modelul cutie (lățime, margine, umplutură etc.), dar arată cât de puțin CSS poate crea machete solide.
Înlocuiți CSS pe care îl aveți deja, pentru aceasta:
În acest CSS am desemnat lățimea containerului la 65%. De asemenea, am putea folosi o valoare fixă a pixelilor, dar procentele păstrează caracterul fluid al documentului și demonstrează mai eficient fluxul documentelor. De asemenea, am centrat pagina folosind marja: 0 auto.
Restul se referă la estetică. Am adaugat ceva padding pentru a da totul un spatiu de respiratie, a specificat fonturile si culorile fontului, asta e despre asta.
Salvați documentul și îl vizualizați în browser.
Ori de câte ori lucrez la un proiect, întotdeauna mă gândesc cum ar arăta în fluxul documentului normal. Acest lucru îmi permite să mă gândesc cum o pot îmbunătăți cu cât mai puțin CSS posibil.
Concluzie
Folosind principiile pe care le-am învățat astăzi, încercați să construiți propriile exemple. Veți găsi că (structural) puteți obține destul de mult înainte de a intra în tehnicile plutitoare și de poziționare.
Resurse aditionale
Elemente inline în rețeaua Mozilla Developer Network
Elemente de nivel bloc în rețeaua Mozilla Developer Network
Modelul de formatare vizuală de către W3C
Declarația de afișare pe QuirksMode
Afișajul CSS: inline-Block: De ce este roșu și de ce suferă de Robert Nyman
Care este afacerea cu afișaj: Inline-Block? de Josh Johnson
Nu utilizați afișarea: nici una pentru a ascunde vizual conținutul destinat cititorilor de ecran pe 456 Berea St.
Accentsconagua
Share
