Share
Välkommen till den femte lektionen i vår webbdesign för barn serie, allt om CSS.
Vi har arbetat väldigt hårt på vårt HTML-innehåll, så nu är det dags att få det att se bra ut! Vi lägger till saker på vår HTML-sida här, såväl som att starta en ny fil: a CSS dokumentera.
Ta en titt på den färdiga webbplatsen vi bygger. Filerna för den här lektionen kan hämtas här och glöm inte att ställa några frågor i kommentarfältet längst ner på denna sida.
Innan vi börjar koda bort, låt oss först se till att vi förstår vad CSS är. CSS står för Cascading Style Sheets och det är ett språk som hjälper oss att ändra hur vår HTML-sida ser ut.
I bilden ovan visar webbläsaren till vänster en webbplats utan CSS, nr styling, medan webbplatsen till höger har styling. Styling har skrivits i en CSS-fil-mycket bättre!
CSS skrivs i en separat fil med hjälp av vår textredigerare. Vår HTML-dokument sparades med en .html förlängning, men vårt CSS-dokument sparas med en .css förlängning.
Vi måste starta ett helt nytt dokument i vår textredigerare och spara det som "tutstown.css" i "tutsfolder"; tillsammans med "index.html" och "bilder" -mappen.
För att vårt CSS-dokument ska kunna använda stilar till vårt HTML-dokument måste vi länka dem ihop. Detta görs genom a element i huvudelementet längst upp i vårt HTML-dokument.
Vi lägger till den här länken direkt under vår titel:
Tuts Town
Det finns några viktiga attribut att inkludera inom detta självslutande element, vars första är typ. Typattributet berättar webbläsaren vad typ av innehåll som vi länkar. I det här fallet är det a text / css fil.
Det andra attributet vi ser här är rel, vilket berättar för webbläsaren vad förhållandet är mellan HTML och det länkade dokumentet (vår CSS). CSS-dokumentet är a format för vår HTML, så blir det vad vi inkluderar här.
Slutligen har vi href som du kanske kommer ihåg från vår element. Det pekar någon annanstans. I det här fallet berättar webbläsaren var man hittar den CSS-fil som vi har länkat till.
Om allt är kopplat ordentligt kommer sidan att se annorlunda ut när du uppdaterar det i webbläsaren:
I vår CSS-fil kan vi lista de HTML-element som vi har använt och säga hur vi vill att dom ska se ut. Det finns många sätt att peka på de element vi vill ha, och HTML-klasser är ett av dessa sätt.
HTML-klasser är attribut som vi kan lägga till i element. När ett element har ett klassnamn kan vi använda det här i vår CSS.
Det valda klassnamnet ska vara ett ord eller ord som beskriver innehållet i det här elementet.
Lägger till en klass i vår kan se ut så här:
Klasser är inte unika, så flera olika element kan ha samma klassnamn. Detta gör att du lägger samma stilar på många element mycket enklare. Vi ser detta i åtgärd när vi kommer till våra butiksbilder!
Hur du skriver kod kallas dess syntax. Precis som med HTML måste CSS skrivas på rätt sätt för att kunna fungera.
Låt oss hoppa över till vår CSS-fil och, bara för övning, ändra bakgrundsfärg av rubriken till blå.
.primärrubrik bakgrundsfärg: blå;
Det finns massor av bitar att få rätt!Så vår CSS förstår att det vi riktar in är ett klassnamn, vi behöver göra några saker:
Accentsconagua
. före namnet.bakgrundsfärg) följs omedelbart av ett kolon : blå I detta fall). ; Det kan vara mycket lätt att glömma dessa!
Spara den här CSS-filen och uppdatera webbläsaren; Om du inte har det här, kan du göra det genom att dubbelklicka på filen "index.html" i "tutsfolder". Så snyggt är det?!
Viktig! Låt oss nu ta bort denna stil eftersom vår webbplats inte har en blå rubrik!
CSS tillåter oss också att inkludera kommentarer i vår fil som webbläsaren ignorerar, men de kommer att se lite annorlunda ut än våra HTML-kommentarer.
En CSS-kommentar finns i dessa symboler: / * * /
/ * Detta är en kommentar i CSS * /
CSS-dokumentet i träningsfilerna innehåller några användbara kommentarer för att ytterligare förklara saker.
Den allra första delen av den faktiska stilen vi kan göra på vår hemsida är att ändra bakgrundsfärg till den härliga ljusgula. Det finns några färgvärden som kan skrivas ut i CSS, som blå i exemplet ovan, och webbläsaren förstår. För andra mindre vanliga färger måste vi inkludera färgens hexadecimalt, eller hex, numret istället.
Alla färger har ett hextal för att matcha. Webbläsare förstår inte många färger när de skrivs ut, men de förstår hex-nummer mycket bra. Hextalet för vår ljusgula färg är # FAF8DA, och vi vill tillämpa det på , att fylla hela sidan.
kropp bakgrundsfärg: # FAF8DA;
Viktig! Det finns inget behov av en prick framför kropp här eftersom det inte är ett klassnamn. I stället har vi pekat på kroppsdelen genast.
Om du är nyfiken på hex-värdet av andra färger kan den här färg-hex-webbplatsen vara mycket användbar.
Vi kan också ställa in font (bokstavsstilen) för vår hemsida med kropp i vår CSS.
Allt vi behöver veta vid denna tidpunkt är att vi måste länk ett teckensnitt från Google till vårt HTML-dokument. När detta är länkat kommer webbläsaren att förstå och vi kan använda den.
Här är en titt på länken som vi behöver lägga till i av vår HTML (samma plats vi länkade vårt CSS-dokument!)
Då kan vi spara det här och gå vidare till vårt CSS-dokument:
kropp font-family: 'Open Sans';
Detta ställer in teckensnittet för all text på sidan som Öppna Sans.
Inom huvudet kommer vi att ändra textens färg och storlek samt stadens bildstorlek.
Först måste vi lägga till rätt HTML-klasser till elementen i rubriken, så vi kan använda dem i vår CSS.
Inom öppningen tagg lägger till en klass av huvudrubrik och inom town-preview:
Välkommen till Tuts + Town
I vårt CSS-dokument kan vi nu peka på dessa element genom de klassnamn vi ställer in och börjar styling.
Vi ställer in en ganska stor typsnitt här 70 bildpunkter. px eller pixlar, är som en punkt på skärmen. Denna punkt är fylld med färg och används som en måttenhet. Bilden av vår stad är också ganska stor, så vi ställer in det på 650 px bred.
De Färg egenskapen sätter färgen på texten, vilken här (# 205D76) Är en mörkblå.
.huvudrubrik font-size: 70px; färg: # 205D76; .town-preview width: 650px;
Kom ihåg att inom huvuddelen har vi mindre sektioner som innehåller en bild och text. Vi måste ange en storlek på dessa bilder och utforma rubrikerna och listorna med CSS.
Det första vi behöver göra är att ställa in storleken på byggbilderna. För att ställa in bildstorlekarna tillsammans kan vi använda samma klassnamn för flera element.
Vi vill lägga till samma klassnamn, byggnad, till alla tre butiksbilder i vår HTML och sedan ändra storlek på dem på en gång i vår CSS, så här:
.byggnad bredd: 200px;
Våra tre mindre rubriker kan också ha samma klassnamn och vi använder det för att ändra Färg och textstorlek av texten.
.kategorirubrik färg: # 205D76; typsnittstorlek: 30px;
Efter rubriken inom varje avsnitt har vi våra oorderade butikslistor - kom ihåg dem? Förutom att ändra storleken och färgen på länkarna här måste vi också ändra färgen på listan punktpunkter.
Låt oss lägga till en klass av store-lista till store-link till i vårt HTML-dokument och spara sedan det.
.butikslista färg: # FFC122; / * Ändrar listans punktpunktsfärg * / .store-link color: # EA6E2F; fontstorlek: 20px;
Du kanske märker, när du tittar på vår hemsida i webbläsaren, att det inte finns mycket mellanrum mellan listobjekt, så att det ser lite trångt ut. Vi kommer att prata allt om avstånd och lägga till några här i layouttutorialen senare i serien.
När vi lägger till en klass av primär-footer till och skapad av till element inom denna footer kan vi förklara bakgrundsfärg såväl som texten Färg och textstorlek:
.primärfoten bakgrundsfärg: # FFC122; .created-by color: #FFFFFF; fontstorlek: 20px;
I den här lektionen lärde vi oss allt om hur man länkar ett HTML- och ett CSS-dokument tillsammans och sedan lägger till härliga stilar till våra element genom klasser. Vid det här laget ser vi inte webbläsarens förhandsgranskning av webbläsaren, men vi tittar på vilken skillnad någon färg och storlek kan göra! Det kommer bara att bli bättre.
Nästa kommer vi att flytta vårt innehåll på plats på skärmen med hjälp av lite extra smart CSS layout tekniker.
Vi ses runt om i staden!
