Share
Welkom bij de zesde les van onze Web Design for Kids-reeks, CSS-lay-out!
Hier plaatsen we al onze elementen precies op de plek waar we ze op het scherm willen hebben. We zullen dit voor zowel onze HTML- als CSS-bestanden toevoegen.
Om jezelf te herinneren, neem een kijkje op de website die we aan het bouwen zijn. De bestanden voor deze cursus kunnen hier worden gedownload en vergeet niet om vragen te stellen in het gedeelte Opmerkingen onderaan deze pagina.
Er zijn een paar dingen die we moeten weten voordat we er meteen in springen lay-out. In dit eerste deel zullen we bekijken hoe we georganiseerd kunnen blijven. We bespreken een aantal basisprincipes en praten over wat voor soort CSS eigenschappen worden gebruikt voor lay-out.
Het is erg belangrijk om een CSS-document georganiseerd te houden. Een goede organisatie zal het ons gemakkelijker maken om alle stukken in ons bestand te vinden, waardoor het later gemakkelijker is om dingen te veranderen en toe te voegen. Over het algemeen is het het beste om onze CSS te bestellen declaraties in de volgorde waarin ze op de pagina plaatsvinden.
We zullen stijlen in deze les toevoegen aan hoofd, bijvoorbeeld. Deze toegevoegde stijl op zo'n belangrijk element moet worden opgenomen in ons CSS-document voor alle andere elementen die erin zijn genest hoofd.
HTML-elementen lijken een beetje op rechthoekige vakken. De CSS-doosmodel beschrijft de afstand van deze vakken.
Elke doos heeft vier zijden. We kunnen een waarde toepassen op alle vier de kanten tegelijk in onze CSS via vulling, grens, en / of marge. Als we echter een kant van een element willen stylen, kunnen we dat ook doen. Bijvoorbeeld:
padding-links: 20px; rand: 4px vast # 205D76;
Laten we zeggen dat dit roze vak tekst vertegenwoordigt. We kunnen zien dat opvulling is toegevoegd enkel en alleen naar links en een dikke blauwe randafdekking allemaal vier kanten van de inhoud.
CSS geeft ons een aantal eigenschappen die speciaal zijn gemaakt om ons te helpen met de lay-out van onze website. Dus terwijl het doosmodel helpt de tussenruimte rond HTML-elementen, flexbox zal ons toestaan om verhuizing deze elementen op hun plaats.
Wanneer we flexbox op een containerelement gebruiken, wordt dit element een flexibele container en alle elementen erin worden flex items.
Wanneer we flexbox toepassen op een container, leggen deze de items automatisch langs een rechte lijn (horizontaal) uit en kunnen we meer in detail treden met andere flexbox-eigenschappen.
Flexbox hoeft niet te veel te worden gebruikt voor onze website, maar het is belangrijk om te denken aan flexbox, omdat dit de meest moderne, juiste manier is om kleine stukjes inhoud op een website te plaatsen.
De h1 en stadsbeeld binnen de hoofd zijn gecentreerd op de pagina. Er zijn verschillende manieren om iets met CSS te centreren, maar voor nu zullen we gebruiken text-align: center; op de hoofd.
We wijzen naar de header door de klassenaam te gebruiken die we eerder hebben toegevoegd:
.primary-header text-align: center;
Vergeet niet! Sla de documenten op en vernieuw de browser om onze wijzigingen te bekijken terwijl we ze maken!
Het allereerste dat we aan onze secties willen doen, is dat de inhoud, het beeld en de lijst binnen elke sectie naast elkaar staan in plaats van gestapeld.
Om dit te bereiken zullen we gebruiken flexbox. Flexbox wordt toegepast op de items in een container-element met behulp van weergave: flex; op de container:
.winkelsectie weergave: flex; weergave: -webkit-flex; / * Dit is een leveranciersprefix! * /
Om dit terug te brengen naar waar we eerder over gesproken hebben, het beeld en div met de winkellijst zijn nu flex items, omdat ze hierbinnen zitten flexibele container.
Hoewel er veel opties zijn om exact aan te geven waar een element naartoe moet, werkt het standaardgedrag van flexbox hier perfect voor ons - en de lijst van onze winkel leeft nu rechts van de afbeelding van de winkel.
Omdat Flexbox vrij nieuw is, hebben niet alle browsers de kans gehad om het correct op te nemen. Om dit te omzeilen, kunnen we een voorvoegsel van de verkoper naar flexbox-eigenschappen, voorlopig met het toevoegen van deze ontbrekende ondersteuning. Hoewel we alleen zijn gericht op de meest recente versies van moderne browsers voor dit project, moeten we er nog steeds een opnemen -webkit- voorvoegsel van de leverancier voor flexbox om te controleren of het werkt in "Safari".
We zouden een beetje ruimte tussen de afbeelding en het element met alle tekst kunnen gebruiken, dus laten we in onze HTML een klasse van toevoegen store-informatie naar de div met de tekst.
Nadat we dit hebben opgeslagen, kunnen we naar onze CSS springen en deze tussenruimte toevoegen, maar alleen aan de links van de div:
.winkelgegevens margin-left: 30px;
Er is enige ruimte links van onze winkel ongeordende lijsten. Dit komt omdat er een aantal is standaard styling dat komt samen met het gebruik van een HTML-lijst. Soms is deze standaardstijl OK, en soms produceert dit misschien niet het effect waar we voor gaan.
We kunnen deze standaard lijstafstand verwijderen door te gebruiken opvulling: 0; op de ongeordende lijst, maar dat zou ertoe leiden dat onze opsommingstekens te ver naar links gaan vergeleken met de kop van onze lijst.
We willen een beetje vulling hier, maar niet zoveel als wordt geboden door de standaardstijl van de lijst. Een instellen -Padding left van 15px op de lijst zullen onze opsommingstekens heel mooi op de rij staan, dus we voegen dit toe naast de dingen die we in de vorige les aan de lijst hebben toegevoegd:
.winkellijst padding-links: 15px; / * nieuw toegevoegde styling * / kleur: # FFC122;
We hebben nog steeds de kwestie die we in de vorige les noemden, waarbij de lijstitems te dicht bij elkaar lagen. Om dit op te lossen, voegen we een klasse toe van winkel naam voor alle lijstitems, , in onze HTML. We voegen dan een kleine marge toe aan de bodem van deze items.
.winkelnaam margin-bottom: 10px;
Er moet ruimte worden toegevoegd aan de secties en ze moeten worden gecentreerd op de pagina. We zullen dit doen via de marge en breedte eigenschappen.
Nogmaals, we zullen toevoegen aan de styling die we al hebben geschreven:
.winkelsectie weergave: flex; weergave: -webkit-flex; marge: 50px auto; breedte: 450 px;
De 50px waarde binnen marge hier is het toepassen van die hoeveelheid ruimte op de top van elke winkelsectie. Hierna volgen met auto vertelt de browser om de breedte van het element te bekijken (die we ingesteld hebben 450px) en centreren deze automatisch in het browservenster.
Voor onze footer we zullen de tekst centreren en een kleine hoeveelheid toevoegen vulling om ervoor te zorgen dat deze tekst niet te dicht bij de randen van de voettekst komt.
.primary-footer opvulling: 2px; text-align: center; achtergrondkleur: # FFC122;
We spraken over standaard styling een beetje toen we onze lijsten op hun plaats kregen. De lichaam element wordt geleverd met zijn eigen standaardstijlen, waarvan er één een is marge die de hele pagina omringt. Hoewel dit soms geen probleem is, kunnen we zien dat het de Achtergrond kleur van onze footer van zich volledig uitstrekken naar de zijkanten van het browservenster.
De oplossing hier is om terug te springen naar lichaam in ons CSS-document en het volgende toe te voegen:
body marge: 0;
In deze cursus kregen we al onze elementen op hun plek met CSS lay-outtechnieken. Hoewel er meestal verschillende manieren zijn om een specifieke lay-out te bereiken, biedt een comfortabeler CSS-doosmodel en flexbox een zeer goed begrip van deze verschillende benaderingen.
Aangezien onze site compleet is (gefeliciteerd!) Zullen we het hier hebben over ontwerp, typografie, en kleur in de lessen om te volgen. Dit zal u helpen een goed afgeronde, geïnformeerde webdesigner te worden.
Ik zie je in de stad!
Accentsconagua