Share
Velkommen til den femte leksjonen i vår Web Design for Kids-serie, alt om CSS.
Vi har jobbet veldig hardt med vårt HTML-innhold, så nå er det på tide å få det til å se pen ut! Vi legger til ting på vår HTML-side her, så vel som å starte en ny fil: a CSS dokument.
Ta en titt på den gjennomførte nettsiden vi bygger. Filene til denne leksjonen kan lastes ned her og ikke glem å stille spørsmål i kommentarfeltet nederst på denne siden.
Før vi begynner å kode bort, må vi først sørge for at vi forstår hva CSS er. CSS står for Cascading Style Sheets og det er et språk som hjelper oss med å endre måten vår HTML-side ser ut.
I bildet ovenfor viser nettleseren til venstre et nettsted uten CSS, nei styling, mens nettsiden til høyre har styling. Stylingen er skrevet i en CSS-fil-mye bedre!
CSS er skrevet i en egen fil ved hjelp av tekstredigeringsprogrammet. Vår HTML-dokument ble lagret med en .html utvidelse, men vårt CSS-dokument vil bli lagret med en .css forlengelse.
Vi må starte et helt nytt dokument i tekstredigeringsprogrammet og lagre dette som "tutstown.css" i "tutsfolder"; sammen med "index.html" og "bilder" -mappen.
For at vårt CSS-dokument skal kunne bruke stiler til vårt HTML-dokument, må vi koble dem sammen. Dette gjøres gjennom a elementet i hodeelementet øverst i vårt HTML-dokument.
Vi legger til denne linken direkte under tittelen vår:
Tuts Town
Det er noen viktige egenskaper å inkludere innenfor dette selvlukkende elementet, den første er type. Typeattributtet forteller nettleseren hva type av innhold vi knytter sammen. I dette tilfellet er det a text / css fil.
Det andre attributtet vi ser her er rel, som forteller nettleseren hva forholdet er mellom HTML og det koblede dokumentet (vårt CSS). CSS-dokumentet er a stilark for vår HTML, så vil det være det vi inkluderer her.
Til slutt har vi href som du kanskje husker fra vår elementer. Det peker et annet sted. I dette tilfellet forteller nettleseren hvor du finner CSS-filen som vi har koblet til.
Hvis alt er koblet riktig, vil siden se annerledes ut når du oppdaterer den i nettleseren:
I vår CSS-fil kan vi liste opp HTML-elementene vi har brukt og si hvordan vi vil at de skal se ut. Det er mange måter å peke på elementene vi vil ha, og HTML-klasser er en av disse måtene.
HTML-klasser er attributter som vi kan legge til elementer. Når et element har et klassenavn, kan vi bruke dette i vårt CSS.
Det valgte klassenavnet skal være et ord eller ord som beskriver innholdet i det aktuelle elementet.
Legge til en klasse til vår kan se slik ut som:
Klasser er ikke unike, så flere forskjellige elementer kan ha samme klassenavn. Dette gjør det enklere å legge til de samme stilene til mange elementer. Vi ser dette i gang når vi kommer til butikkbildene våre!
Måten du skriver kode kalles sin syntaks. På samme måte som med HTML, må CSS skrives på riktig måte for å kunne fungere.
La oss hoppe over til vår CSS-fil, og bare for å øve, endre bakgrunnsfarge av overskriften til blå.
.Primæroverskrift bakgrunnsfarge: blå;
Det er mange stykker å få rett!Så vår CSS forstår at det vi målretter mot er et klassenavn, vi må gjøre noen ting:
Accentsconagua
. før navnet.bakgrunnsfarge) følges umiddelbart av en kolon : blå i dette tilfellet). ; Det kan være veldig enkelt å glemme disse!
Lagre denne CSS-filen og oppdatere nettleseren; Hvis du ikke har dette åpent, kan du gjøre det ved å dobbeltklikke på "index.html" -filen i "tutsfolder". Hvor pent er det?!
Viktig! La oss nå slette denne stilen fordi siden vår ikke har en blå topptekst!
CSS tillater oss også å inkludere kommentarer i vår fil som nettleseren vil ignorere, men de vil se litt annerledes ut enn våre HTML-kommentarer.
En CSS-kommentar finnes i disse symbolene: / * * /
/ * Dette er en kommentar i CSS * /
CSS-dokumentet i treningsfilene vil inneholde noen nyttige nyttige kommentarer for å forklare ting.
Den aller første delen av den faktiske styling vi kan gjøre på vår nettside er å endre bakgrunnsfarge til den vakre lysegulen. Det er noen fargeverdier som kan skrives ut i CSS, som blå i eksempelkoden ovenfor, og nettleseren forstår. For andre mindre vanlige farger må vi inkludere fargen heksadesimale, eller hex, nummer i stedet.
Alle farger har et hex-nummer som passer. Nettlesere forstår ikke mange farger når de skrives ut, men de forstår hex-nummer veldig bra. Heks nummeret for vår lyse gule farge er # FAF8DA, og vi vil bruke det til , å fylle hele siden.
kropp bakgrunnsfarge: # FAF8DA;
Viktig! Det er ikke behov for en prikk foran kropp her fordi det ikke er et klassenavn. I stedet har vi pekt på kroppselementet med en gang.
Hvis du er nysgjerrig på hex-verdien av andre farger, kan dette fargeheks-området være svært nyttig.
Vi kan også sette font (bokstavsstilen) for nettstedet vårt bruker kropp i vårt CSS.
Alt vi trenger å vite på dette punktet er at vi må link en skrift fra Google til vårt HTML-dokument. Når dette er koblet, vil nettleseren forstå og vi kan bruke den.
Her er en titt på lenken vi må legge til i av vår HTML (samme sted vi koblet vårt CSS-dokument!)
Da kan vi lagre dette og gå over til vårt CSS-dokument:
kropp font-family: 'Open Sans';
Dette vil angi skriften for all teksten på siden som Åpne Sans.
Innen forteksten vil vi endre tekstfarge og -størrelse, samt byens bildestørrelse.
Først må vi legge til de riktige HTML-klassene til elementene i overskriften, slik at vi kan bruke dem i vårt CSS.
Innenfor åpningen tag la oss legge til en klasse av hovedrubrikken og innenfor by-preview:
Velkommen til Tuts + Town
I vårt CSS-dokument kan vi nå peke på disse elementene gjennom klassenavnene vi angir og begynner styling.
Vi setter en ganske stor skriftstørrelse her av 70 piksler. px eller piksler, er som en prikk på skjermen. Denne prikken er fylt med farge og brukes som en måleenhet. Bildet av byen vår er også ganske stort, så vi setter det på 650 piksler bred.
De farge eiendom setter fargen på teksten, som her (# 205D76) Er en mørk blå.
.hovedoppgave font-size: 70px; farge: # 205D76; .town-forhåndsvisning bredde: 650px;
Husk, i hovedsak har vi mindre seksjoner som inneholder et bilde og en tekst. Vi må sette en størrelse på disse bildene og stil overskriftene og lister med CSS.
Det første vi må gjøre er å angi størrelsen på byggbildene. For å sette bildestørrelsene sammen kan vi bruke samme klassenavn for flere elementer.
Vi vil legge til samme klassenavn, bygning, til alle tre butikkbilder i vår HTML, og deretter endre størrelsen på dem alle samtidig i vårt CSS, slik som dette:
.bygge bredde: 200px;
Våre tre mindre overskrifter kan også ha samme klassenavn, og vi bruker det for å endre farge og skriftstørrelse av teksten.
.kategori-overskrift farge: # 205D76; skriftstørrelse: 30px;
Etter overskriften i hver seksjon har vi våre uordnede butikklister - husk dem? I tillegg til å endre størrelsen og fargen på linkene her, må vi også endre fargen på listen nøkkelpunkter.
La oss legge til en klasse av butikk-liste til butikk-link til i vårt HTML-dokument og lagre det deretter.
.butikkliste farge: # FFC122; / * Endrer listens punktpunktfarge * / .store-link color: # EA6E2F; skriftstørrelse: 20px;
Du kan merke, når du ser på nettstedet vårt i nettleseren, at det ikke er mye mellomrom mellom listeposter, slik at det ser litt overfylt ut. Vi vil snakke alt om avstand og legge til noen her i oppsettveiledningen senere i serien.
Etter at vi legger til en klasse av primær-footer til og laget av til element i denne footeren kan vi erklære bakgrunnsfarge så vel som teksten farge og skriftstørrelse:
.primærfotograf bakgrunnsfarge: # FFC122; .created-by color: #FFFFFF; skriftstørrelse: 20px;
I denne leksjonen lærte vi alt om hvordan du kobler et HTML- og et CSS-dokument sammen, og deretter legger til flotte stiler til elementene våre gjennom klasser. På dette punktet ser vi ikke nettleserens forhåndsdefinerte nettside som vi har referert, men se på hvilken forskjell noen farger og størrelser kan gjøre! Det kommer bare til å bli bedre.
Deretter skal vi flytte innholdet på plass på skjermen ved hjelp av noe ekstra smart CSS oppsett teknikker.
Se deg rundt i byen!
