Att skapa en webbplats är ett bra sätt att uttrycka sig. Även om det finns många verktyg för att bygga webbplatser är det ett roligt sätt att lära sig mer om hur webbplatser fungerar bakom kulisserna. Ett bra nybörjarprojekt är att skapa en webbplats och lägga till en bakgrundsbild med CSS. Detta projekt kommer att komma igång med både HTML och CSS.
Vad är CSS?
CSS står för Cascading Style Sheet. Det är ett programmeringsspråk som låter dig utforma markeringsspråk. Ett sådant markeringsspråk är HTML eller Hyper-Text Markup Language. HTML används för att skapa webbplatser. Även om du kan styra en del av webbplatsens stil med HTML, erbjuder CSS mycket mer kontroll- och designalternativ.
Skapa en grundläggande webbplats med HTML
Eftersom CSS bara är ett stilspråk, för att kunna använda det, behöver vi först något att utforma. En mycket grundläggande webbplats kommer att räcka för att vi ska kunna börja spela med CSS. Vår sida visar "Hello World."
Hej världen
Om du inte känner till HTML, låt oss snabbt gå igenom vad alla element gör. Som nämnts är HTML ett markeringsspråk, vilket innebär att det använder taggar för att markera vad texten är. Närhelst du ser ett ord omgivet av
<> det är en tagg. Det finns två typer av taggar, en tagg som markerar början på ett avsnitt med <> och en som markerar slutet på ett avsnitt medI vårt exempel har vi fyra taggar. De html tagg anger vilka element som ingår i webbplatsen. De huvud taggen innehåller rubrikinformationen som inte visas på sidan men som behövs för att skapa sidan. Alla visade element ligger mellan kropp taggar. Vi har bara ett visat element, sid märka. Det berättar för webbläsaren att texten är ett stycke.
Relaterad: 10 enkla CSS-exempel som du kan lära dig på tio minuter
Vill du veta mer om att använda CSS? Prova med dessa grundläggande CSS-kodexempel till att börja med och använd dem sedan på dina egna webbsidor.
Lägga till CSS till HTML
Nu när vi har en enkel sida kan vi anpassa stilen med CSS. Vår sida är ganska enkel just nu, och det finns inte mycket vi kan göra, men låt oss börja med att göra vårt stycke så att vi kan skilja det från bakgrunden genom att lägga till en ram.
Hej världen
Nu kommer vårt stycke att omges av en svart kant. Att lägga till en stilbeskrivning i CSS till vår stycke-tagg berättade för webbplatsen hur man stilerade stycket. Vi kan lägga till fler beskrivningar. Låt oss öka det vita utrymmet, eller vadderingen, runt vårt stycke och centrera vår text.
Hej världen
Vår webbplats ser bättre ut, men vår HTML börjar se rörig ut med alla dessa beskrivningar i avsnittstaggen. Vi kan flytta denna information till vår rubrik. Vår rubrik är för information som vi behöver för att visa webbplatsen korrekt.
Hej världen
Nu är vår HTML lättare att läsa. Du kommer att märka att vi måste ändra på några saker. Stil taggen berättar information om webbläsarens stil, men också vad man ska utforma också. I vårt exempel har vi använt två olika sätt att berätta vad den ska utforma. De sid i stiltaggen säger åt webbläsaren att tillämpa den stilen på alla stycketaggar. De #ourParagraph avsnittet berättar det för endast stilelement med id vårt stycke. Lägg märke till att id information lades till p-taggen i vår kropp.
Importera en CSS-fil till din webbplats
Att lägga till stilinformation i rubriken gör vår kod mycket lättare att läsa. Men om vi vill utforma många olika sidor på samma sätt måste vi lägga till texten högst upp på varje sida. Det verkar kanske inte som mycket arbete, du kan trots allt kopiera och klistra in det, men det skapar mycket arbete om du vill ändra ett element senare.
Istället ska vi behålla CSS-informationen i en separat fil och importera filen för att utforma sidan. Kopiera och klistra in informationen mellan stiltaggarna i en ny CSS-fil ourCSSfile.css.
p {
text-align: center
}
#ourParagraph {
kant-stil: solid;
stoppning: 30 pixlar;
}Importera sedan filen till HTML-filen.
Hej världen
Lägga till en bakgrundsbild med CSS
Nu när du har en solid bas i HTML och CSS, blir det en bit av att lägga till en bakgrundsbild. Identifiera först vilket element du vill ge en bakgrundsbild till. I vårt exempel lägger vi till en bakgrund till hela sidan. Detta innebär att vi vill ändra stil på kropp. Kom ihåg att body-taggarna innehåller alla synliga element.
kropp{
bakgrundsbild: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
kant-stil: solid;
stoppning: 30 pixlar;
}För att ändra kroppsstilen i CSS, använd först kropp nyckelord. Lägg sedan till lockiga parenteser som vi gjorde tidigare {}. All stilinformation för kroppen måste ligga mellan de lockiga parenteserna. Stilattributet vi vill ändra är bakgrundsbild. Det finns många stilattribut. Förvänta dig inte att memorera dem alla. Bokmärke a CSS egenskaper cheat-sheet med attribut som du vill komma ihåg.
Relaterad: 8 coola HTML-effekter som alla kan lägga till på sin webbplats
Efter attributet, använd ett kolon för att ange hur du ändrar attributet. För att importera en bild, använd url (). det indikerar att du använder en länk för att peka på bilden. Placera filplatsen inom parentes mellan citattecken. Slutligen avsluta raden med ett semikolon. Även om vitt utrymme inte har betydelse i CSS, använd indrag för att göra CSS lättare att läsa.
Vårt exempel ser ut så här:
Om din bild inte visas korrekt på grund av bildens storlek kan du ändra bilden direkt. Det finns dock bakgrundsstilattribut i CSS som du kan använda för att ändra bakgrunden. Bilder som är mindre än bakgrunden upprepas automatiskt i bakgrunden. För att stänga av det, lägg till bakgrund-upprepa: nej-upprepa; till ditt element.
Det finns också två sätt att få en bild att täcka hela bakgrunden. Först kan du ställa in bakgrundsstorleken till skärmens storlek med bakgrundsstorlek: 100% 100%;, men detta sträcker bilden och kan förvränga bilden för mycket. Om du inte vill att bildens proportioner ska ändras kan du också ställa in bakgrundsstorleken till omslag. Omslaget gör att bakgrundsbilden täcker bakgrunden, men inte snedvrider bilden.
Ändra bakgrundsfärg
Låt oss ändra en sista sak. Nu när vi har en bakgrund är vårt avsnitt svårläst. Låt oss göra bakgrunden vit. Processen är liknande. Elementet vi vill ändra är #ourParagraph. # Indikerar att "ourParagraph" är ett id-namn. Därefter vill vi ställa in bakgrundsfärg attribut till vit.
kropp{
bakgrundsbild: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
bakgrundsfärg: vit;
kant-stil: solid;
stoppning: 30 pixlar;
}Mycket bättre.
Fortsätter att utforma din webbplats med CSS
Nu när du vet hur du ändrar stilen för olika HTML-element är himlen gränsen! Den grundläggande metoden för att ändra stilattribut är densamma. Identifiera det element som du vill ändra och beskriv hur du ändrar attributet. Det bästa sättet att lära sig mer är att leka med olika attribut. Utmana dig själv att ändra färgen på din text nästa.
Vill du lära dig HTML för att koda dina egna webbplatser och appar? Använd dessa webbsidaexempel och källkod för att lära dig HTML och CSS.
- Programmering
- HTML
- Webbdesign
- CSS
J. Seaton är en Science Writer som specialiserar sig på att bryta ner komplexa ämnen. Hon har en doktorsexamen från University of Saskatchewan; hennes forskning fokuserade på att använda spelbaserat lärande för att öka elevernas engagemang online. När hon inte jobbar hittar du henne med att läsa, spela videospel eller arbeta i trädgården.
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e-böcker och exklusiva erbjudanden!
Ett steg till…!
Bekräfta din e-postadress i e-postmeddelandet som vi just skickade till dig.