Share
Bine ați venit la a șasea lecție din seria Web Design pentru copii, CSS Layout!
Aici punem toate elementele exact acolo unde le dorim pe ecran. Vom adăuga atât fișierelor noastre HTML, cât și CSS, pentru a face acest lucru.
Pentru a vă reaminti, aruncați o privire la site-ul pe care îl construim. Fișierele pentru acest curs pot fi descărcate aici și nu uitați să puneți întrebările pe care le aveți în secțiunea de comentarii din partea de jos a acestei pagini.
Există câteva lucruri pe care trebuie să le cunoaștem înainte să sarăm direct în schemă. În această primă secțiune vom analiza cum să rămânem organizați. Vom acoperi câteva elemente de bază despre poziționare și vom vorbi despre ce fel de CSS proprietăţi sunt utilizate pentru aspect.
Păstrarea unui document CSS organizat este foarte importantă. Organizarea corectă ne va face mai ușor să găsim toate piesele din fișierul nostru, facilitând schimbarea și adăugarea de lucruri mai târziu. În general, este mai bine să comandați CSS-ul nostru declaraţii în ordinea în care se desfășoară pe pagină.
Vom adăuga stiluri în această lecție principal, de exemplu. Acest stil adăugat la un astfel de element important ar trebui inclus în documentul nostru CSS inainte de orice alte elemente care sunt imbricate în interiorul principal.
Elementele HTML sunt un fel de cutii dreptunghiulare. Modelul cutiei CSS descrie distanța acestor cutii.
Fiecare cutie are patru laturi. Putem aplica o valoare tuturor celor patru părți simultan în CSS prin intermediul nostru umplutură, frontieră, și / sau margine. Cu toate acestea, dacă vrem să stilisem o parte a unui element, putem face și asta. De exemplu:
padding-left: 20px; frontieră: 4px solid # 205D76;
Să presupunem că această casetă roz reprezintă text. Putem vedea că umplutura a fost adăugată numai la stânga și o acoperire albastră albastră acoperă toate patru părți ale conținutului.
CSS ne dă un set de proprietăți special concepute pentru a ne ajuta cu aspectul site-ului nostru. Deci, în timp ce modelul cutiei explică spaţierea în jurul elementelor HTML, flexbox ne va permite mișcare aceste elemente în loc.
Atunci când folosim flexbox pe un element container, acest element devine a flex container și toate elementele din ea devin elemente flexibile.
Atunci când aplicăm flexboxul la un container, acesta va plasa automat elementele de-a lungul unei linii drepte (orizontal) și apoi vom putea obține mai multe detalii cu alte proprietăți flexbox.
Nu vom fi nevoiți să folosim prea mult flexbox pentru site-ul nostru, dar este important să ne gândim la flexbox, deoarece este considerat cel mai modern și adecvat mod de a poziționa mici fragmente de conținut pe un site web.
h1 și imaginea orașului în cadrul antet sunt centrate pe pagină. Există câteva modalități diferite de a centra ceva cu CSS, dar pentru moment vom folosi text-align: centru; pe antet.
Vom îndrepta antetul folosind numele de clasă pe care l-am adăugat anterior:
.header-header text-aliniere: centru;
Nu uita! Salvați documentele și reîmprospătați browserul pentru a vedea modificările pe care le facem!
Primul lucru pe care vom dori să-l facem pentru secțiunile noastre este de a face conținutul, imaginea și lista, în cadrul fiecărei secțiuni, să stea alături unul de celălalt decât să fie stivuite.
Pentru a realiza acest lucru vom folosi flexbox. Flexbox se aplică elementelor din cadrul unui element de container utilizând afișaj: flex; pe container:
.magazin-secțiune display: flex; afișare: -webkit-flex; / * Acesta este un prefix de vânzător! * /
Pentru a aduce acest lucru înapoi la ceea ce am vorbit mai devreme, imaginea și div care conțin lista magazinelor sunt acum elemente flexibile, pentru că sunt în interiorul lor flex container.
Deși există multe opțiuni pentru a specifica exact unde ar trebui să meargă un element, comportamentul implicit al flexbox aici funcționează perfect pentru noi - iar lista magazinelor noastre este acum în partea dreaptă a imaginii magazinului.
Deoarece Flexbox este destul de nou, nu toate browserele au avut șansa să o includă în mod corespunzător. Pentru a rezolva acest lucru putem include a prefixul furnizorului la proprietățile flexbox, adăugând pentru moment acest suport lipsă. Chiar dacă ne concentrăm doar pe cele mai recente versiuni ale browserelor moderne pentru acest proiect, va trebui să includem și o -WebKit- prefixul furnizorului pentru flexbox pentru a vă asigura că funcționează în "Safari".
Am putea folosi un pic de spațiere între imagine și elementul care conține tot textul, astfel încât în HTML să adăugăm o clasă de magazin-detalii la div conținând textul.
După ce salvăm acest lucru, putem să trecem la CSS și să adăugăm această distanță, dar numai la stânga din div:
.detalii despre magazin margin-left: 30px;
Există câteva spații în stânga listelor neordonate ale magazinului nostru. Acest lucru se datorează faptului că există unele stilul implicit care vine împreună cu utilizarea unei liste HTML. Uneori, acest stil implicit este OK, iar alteori este posibil să nu producă efectul pe care îl urmăm.
Putem să scăpăm de acest spațiu de listă implicit utilizând umplutura: 0; pe lista neordonată, dar asta ar face ca punctele noastre de glonț să meargă prea departe spre stânga, comparativ cu poziția listei noastre.
Vrem puțin umplutură aici, dar nu la fel de mult ca este furnizat de stilul implicit al listei. Setarea a -Padding la stânga de 15px pe listă vom marca linia noastră cu titlul destul de frumos, așa că vom adăuga acest lucru în plus față de lucrurile pe care le-am adăugat la listă în lecția anterioară:
.lista de depozite padding-left: 15px; / * stil nou adăugat * / culoare: # FFC122;
Încă mai avem problema pe care am menționat-o în lecția anterioară, elementele de listă fiind prea apropiate. Pentru a rezolva aceasta, să adăugăm o clasă de numele magazinului la toate elementele listate, , în HTML. Apoi vom adăuga o mică marjă la fund din aceste articole.
.nume-magazin margin-bottom: 10px;
Spațierea trebuie adăugată la secțiuni, precum și orientarea acestora pe pagină. Vom face acest lucru prin margine și lăţime proprietăţi.
Din nou, vom adăuga stilul pe care l-am scris deja:
.magazin-secțiune display: flex; afișare: -webkit-flex; margine: 50 pixeli automat; lățime: 450px;
50px valoare în interiorul margine aici se aplică acea cantitate de spațiu la top din fiecare magazie. În urma acestui lucru auto spune browser-ului să ia în considerare lățimea elementului (pe care am setat-o la 450px) și centralizați-l automat în fereastra browserului.
Pentru noi subsol vom centra textul și vom adăuga o cantitate mică umplutură pentru a vă asigura că acest text nu este prea aproape de marginile subsolului.
.prim-subsol padding: 2px; text-align: centru; fundal-culoare: # FFC122;
Am vorbit despre stilul implicit un pic când luam listele pe loc. corp elementul vine cu propriile stiluri implicite, dintre care unul este a margine care înconjoară întreaga pagină. În timp ce uneori aceasta nu este o problemă, putem vedea că aceasta împiedică culoare de fundal a noastră subsol de la întinderea pe laturile ferestrei browserului.
Soluția de aici este să sari înapoi la corp în documentul nostru CSS și să adăugăm următoarele:
corp marja: 0;
În acest curs am reușit să punem la punct toate elementele noastre prin tehnicile layout-ului CSS. Deși există de obicei mai multe moduri diferite de a realiza un aspect specific, obținerea unui confort sporit cu modelul cutiei CSS și flexbox oferă o înțelegere foarte solidă față de aceste abordări diferite.
Deoarece site-ul nostru este complet (felicitări!), Vom vorbi totul proiecta, tipografie, și culoare în lecțiile de urmat. Acest lucru vă va ajuta să deveniți un designer web bine informat și informat.
Ne vedem în jurul orașului!
Accentsconagua