Share
Velkommen til den sjette leksjonen i vår Web Design for Kids-serie, CSS Layout!
Her setter vi alle elementene nøyaktig hvor vi vil ha dem på skjermen. Vi legger til både våre HTML- og CSS-filer for å gjøre det.
For å minne deg selv, ta en titt på nettstedet vi bygger. Filene til dette kurset kan lastes ned her og ikke glem å stille spørsmål du har i kommentarfeltet nederst på denne siden.
Det er noen ting vi må vite før vi hopper rett inn i oppsett. I dette første avsnittet vil vi se på hvordan å holde orden. Vi vil dekke noen grunnleggende grunnleggende posisjoner og snakke om hva slags CSS eiendommer brukes til oppsett.
Å holde et CSS-dokument organisert er svært viktig. Riktig organisasjon vil gjøre det lettere for oss å finne alle brikkene i filen, noe som gjør det lettere å endre og legge til ting senere. Generelt er det best å bestille CSS erklæringer i den rekkefølgen de finner sted på siden.
Vi vil legge til stiler i denne leksjonen til hoved-, for eksempel. Denne ekstra stilen på et så stort element bør inkluderes i vårt CSS-dokument før noen andre elementer som er nestet i hoved-.
HTML-elementer er litt som rektangulære bokser. De CSS boks modell beskriver avstanden mellom disse boksene.
Hver boks har fire sider. Vi kan søke en verdi på alle fire sidene samtidig i vårt CSS gjennom padding, grense, og / eller margin. Men hvis vi ønsker å stilere en side av et element, kan vi også gjøre det. For eksempel:
polstring-venstre: 20px; grense: 4px solid # 205D76;
La oss si at denne rosa boksen representerer tekst. Vi kan se at polstring er lagt til bare til venstre og en tykk blå ramme dekker alle fire sider av innholdet.
CSS gir oss et sett med egenskaper laget spesielt for å hjelpe oss med vår nettside layout. Så mens boksemodellen bidrar til å forklare avstanden rundt HTML-elementer, flexbox vil tillate oss å bevege seg disse elementene på plass.
Når vi bruker flexboks på et beholderelement blir dette elementet a flexbeholder og alle elementene i det blir flex elementer.
Når vi bruker flexbox til en beholder, vil det automatisk legge elementene ut langs en rett linje (horisontalt) og så kan vi komme inn i mer detalj med andre flexboxegenskaper.
Vi trenger ikke å bruke flexbox for mye på nettstedet vårt, men det er viktig å tenke på flexbox, da det anses som den mest moderne og rette måten å plassere små biter av innhold på en nettside.
De h1 og bybilde innenfor Overskrift er sentrert på siden. Det finnes flere forskjellige måter å sentrere noe med CSS, men for nå skal vi bruke tekst-align: center; på Overskrift.
Vi peker på overskriften ved å bruke det klassenavnet vi la til tidligere:
.hovedtekst text-align: center;
Ikke glem det! Lagre dokumentene og oppdatere nettleseren for å se våre endringer når vi lager dem!
Det aller første vi vil gjøre i våre seksjoner er å gjøre innholdet, bildet og listen, i hver seksjon, sitte ved siden av hverandre i stedet for stablet.
For å oppnå dette vil vi bruke flexbox. Flexboks brukes på elementene i et beholderelement ved bruk av display: flex; på beholderen:
.butikk-del display: flex; display: -webkit-flex; / * Dette er et leverandør prefiks! * /
For å bringe dette tilbake til det vi snakket om tidligere, var bildet og div inneholder butikklisten er nå flex elementer, fordi de er innenfor dette flexbeholder.
Selv om det er mange alternativer for å spesifisere nøyaktig hvor et element skal gå, fungerer flexboxs standardadferd her perfekt for oss - og vår butikkliste bor nå til høyre for butikkens bilde.
Siden Flexbox er ganske ny, har ikke alle nettlesere hatt muligheten til å inkludere det riktig. For å omgå dette kan vi inkludere en leverandør prefiks å flexbox egenskaper, legge til denne manglende støtten for tiden. Selv om vi bare er fokusert på de nyeste versjonene av moderne nettlesere for dette prosjektet, må vi fortsatt inkludere en -webkit- leverandør prefiks for flexbox for å sikre at det fungerer i "Safari".
Vi kunne bruke litt avstand mellom bildet og elementet som inneholder all teksten, så i vår HTML la oss legge til en klasse av butikk-detaljer til div inneholder teksten.
Etter at vi lagrer dette, kan vi hoppe over til vårt CSS og legge til dette avstanden, men bare til venstre av div:
.butikk-detaljer margin-left: 30px;
Det er noen avstand til venstre for våre butikkordre. Dette er fordi det er noen standard styling som følger med å bruke en HTML-liste. Noen ganger er denne standard styling OK, og andre ganger kan det ikke produsere effekten vi skal til.
Vi kan bli kvitt denne standardlistenavstand ved å bruke polstring: 0; på den uordnede listen, men det ville føre til at vår kule peker på å gå for langt til venstre i forhold til listen i vår liste.
Vi vil ha litt av padding her, men ikke så mye som er gitt av listens standard styling. Setter inn en padding-left av 15px På listen vil linjepunktene våre rettes opp med overskriften ganske pent, så vi legger til dette i tillegg til de tingene vi la til i listen i forrige leksjon:
.butikkliste padding-left: 15px; / * Nylig lagt styling * / Farge: # FFC122;
Vi har fortsatt saken vi nevnte i forrige leksjon med listepostene som er for tett sammen. For å løse dette la vi legge til en klasse av butikknavn til alle listepostene, , i vår HTML. Vi legger da en liten margin til bunn av disse elementene.
.butikknavn margin-bottom: 10px;
Spacing må legges til seksjonene, så vel som å få dem sentrert på siden. Vi vil gjøre dette gjennom margin og bredde eiendommer.
Igjen legger vi til styling vi allerede har skrevet:
.butikk-del display: flex; display: -webkit-flex; margin: 50px auto; bredde: 450px;
De 50 piksler verdi innenfor margin Her bruker du den mengden plass på topp av hver butiksdel. Følg dette med auto forteller nettleseren å vurdere elementets bredde (som vi satt til 450 piksler) og sentrere den automatisk i nettleservinduet.
For vår bunntekst Vi senterer teksten og legger til en liten mengde padding for å sørge for at denne teksten ikke er for nær kantene på bunnteksten.
.primærfotograf polstring: 2px; tekst-align: center; bakgrunnsfarge: # FFC122;
Vi snakket om standard styling litt da vi fikk våre lister på plass. De kropp elementet kommer med sine egne standardstiler, hvorav en er en margin som omgir hele siden. Selv om dette noen ganger ikke er et problem, kan vi se at det hindrer bakgrunnsfarge av vår bunntekst fra strekker seg helt til sidene av nettleservinduet.
Løsningen her er å hoppe tilbake til kroppen i vårt CSS-dokument og legge til følgende:
kropp margin: 0;
I dette kurset fikk vi alle elementene på plass med CSS layout teknikker. Selv om det vanligvis finnes flere forskjellige måter å oppnå et bestemt layout på, får du mer komfort med CSS-boksemodellen og flexbox gir en meget solid forståelse for disse forskjellige tilnærmingene..
Siden nettstedet vårt er ferdig (gratulerer!), Snakker vi om design, typografi, og farge i leksjonene å følge. Dette vil hjelpe deg å bli en godt avrundet, informert webdesigner.
Se deg rundt i byen!
Accentsconagua