Home-theater-designers
Att skapa en webbplats är ett bra sätt att uttrycka sig själv. Även om det finns många verktyg för att bygga webbplatser är det ett roligt sätt att skriva det själv för att lära dig 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 få dig 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 använda det, behöver vi först något att styla. En mycket grundläggande webbplats kommer att räcka för att vi ska kunna börja spela med CSS. På vår sida visas 'Hej världen'.
Hello World
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är 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 med. Texten i ett avsnitt är också avsedd att göra denna åtskillnad lättare att se.
I vårt exempel har vi fyra taggar. De html tag anger vilka element som ingår i webbplatsen. De huvud tag innehåller rubrikinformationen som inte visas på sidan men som behövs för att skapa sidan. Alla element som visas 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 -kodexempel du kan lära dig på 10 minuter
Lägger 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 sticker ut så att vi kan skilja det från bakgrunden genom att lägga till en kant.
Hello World
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 stilar 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.
Hello World
Vår webbplats ser bättre ut, men vår HTML börjar se rörig ut med alla dessa beskrivningar i stycke -taggen. 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.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Nu är vår HTML lättare att läsa. Du kommer att märka att vi var tvungna att ändra på vissa saker. Stiltaggen berättar stilinformation för webbläsaren, men också vad du ska styla. I vårt exempel har vi använt två olika sätt att berätta vad de ska styla. De sid i stiltaggen säger till webbläsaren att den ska tillämpas på alla stycke -taggar. De #ourParagraph avsnitt berättar det bara för stilelement med id vårt stycke . Lägg märke till att id information har lagts till p -taggen i vår kropp.
hur man laddar ner filmer till min ipad
Importera en CSS -fil till din webbplats
Att lägga till stilinformationen 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 den texten högst upp på varje sida. Det kanske inte verkar vara mycket arbete, du kan kopiera och förbi det trots allt, men det skapar mycket arbete om du vill ändra ett element senare.
Istället kommer vi att 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 vårCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Importera sedan filen till HTML -filen.
Hello World
Lägga till en bakgrundsbild med CSS
Nu när du har en solid bas i HTML och CSS, blir det en kaka att lägga till en bakgrundsbild. Identifiera först vilket element du vill ge en bakgrundsbild till. I vårt exempel kommer vi att lägga till en bakgrund på hela sidan. Det betyder att vi vill ändra stilen på kropp . Kom ihåg att kroppstaggarna innehåller alla synliga element.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}För att ändra kroppsstilen i CSS, använd först kropp nyckelord. Lägg sedan till lockiga parenteser som vi gjorde innan {}. All stilinformation för kroppen måste finnas mellan de lockiga fästena. Stilattributet vi vill ändra är bakgrundsbild . Det finns många stilattribut. Förvänta dig inte att memorera dem alla. Bokmärk ett fuskblad för CSS-egenskaper med attribut som du vill komma ihåg.
Relaterad: 8 coola HTML -effekter som alla kan lägga till på sin webbplats
bästa sidladdningsappar för brand -tv
Efter attributet använder du 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 filens plats inom parentes mellan citattecken. Avsluta slutligen raden med ett semikolon. Även om vitt utrymme inte har någon betydelse i CSS, använd indragning 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:ingen upprepning; 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 på skärmens storlek med bakgrundsstorlek: 100% 100%; , men detta sträcker bilden och kan snedvrida bilden för mycket. Om du inte vill att bildens proportioner ska ändras kan du också ställa in bakgrundsstorleken på omslag . Omslaget gör att bakgrundsbilden täcker bakgrunden, men inte snedvrider bilden.
Ändra bakgrundsfärgen
Låt oss ändra en sista sak. Nu när vi har en bakgrund är vårt stycke svårt att läsa. Låt oss göra bakgrunden vit. Processen är liknande. Elementet vi vill ändra är #ourParagraph. # Anger att 'ourParagraph' är ett id -namn. Därefter vill vi ställa in bakgrundsfärg attribut till vitt.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Mycket bättre.
Fortsätter att designa din webbplats med CSS
Nu när du vet hur du ändrar stilen för olika HTML -element är himlen gränsen! Grundmetoden för att ändra stilattribut är densamma. Identifiera elementet 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 härnäst.
Dela med sig Dela med sig Tweet E-post De 8 bästa platserna för HTML -kodningsexempel av hög kvalitetVill du lära dig HTML för att koda dina egna webbplatser och appar? Använd dessa exempel på webbsidor och källkod för att lära dig HTML och CSS.
Läs Nästa Relaterade ämnen- Programmering
- HTML
- Webbdesign
- CSS
J. Seaton är en Science Writer som specialiserat 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 studentens engagemang online. När hon inte arbetar hittar du henne med sin läsning, spelande tv -spel eller trädgårdsarbete.
Mer från Jennifer SeatonPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera