Hvordan sette et bakgrunnsbilde i CSS

Å lage et nettsted er en fin måte å uttrykke deg på. Selv om det finnes mange verktøy for nettstedsbygging, er det en morsom måte å lære mer om hvordan nettsteder fungerer bak kulissene, å skrive det selv. Et godt nybegynnerprosjekt er å lage et nettsted og legge til et bakgrunnsbilde med CSS. Dette prosjektet vil få deg i gang med både HTML og CSS.

Hva er CSS?

CSS står for Cascading Style Sheet. Det er et programmeringsspråk som lar deg utforme markeringsspråk. Et slikt markeringsspråk er HTML eller Hyper-Text Markup Language. HTML brukes til å lage nettsteder. Selv om du kan kontrollere noe av nettstedets stil ved hjelp av HTML, tilbyr CSS mye mer kontroll og designalternativer.

Opprette et grunnleggende nettsted med HTML

Siden CSS bare er et stilspråk, for å bruke det, trenger vi først noe å style. Et veldig grunnleggende nettsted vil være nok til at vi kan begynne å spille med CSS. Siden vår vil vise "Hello World."

Hei Verden

I tilfelle du ikke er kjent med HTML, la oss raskt gå gjennom hva alle elementene gjør. HTML er som nevnt et markeringsspråk, noe som betyr at den bruker koder for å markere hva teksten er. Når du ser et ord omgitt av

<> det er en tag. Det er to typer koder, en tag som markerer begynnelsen på en seksjon ved hjelp av <> og en som markerer slutten av en seksjon ved hjelp av

I vårt eksempel har vi fire koder. De html tag indikerer hvilke elementer som er en del av nettstedet. De hode tag inneholder topptekstinformasjonen som ikke vises på siden, men som er nødvendig for å opprette siden. Alle elementene som vises er mellom kropp koder. Vi har bare ett vist element, s stikkord. Den forteller nettleseren at teksten er et avsnitt.

I slekt: 10 enkle eksempler på CSS-koder du kan lære på 10 minutter

10 enkle eksempler på CSS-koder du kan lære på 10 minutter

Vil du vite mer om bruk av CSS? Prøv disse grunnleggende CSS-kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.

Legger til CSS i HTML

Nå som vi har en enkel side, kan vi tilpasse stilen med CSS. Siden vår er ganske enkel akkurat nå, og det er ikke mye vi kan gjøre, men la oss begynne med å gjøre avsnittet vårt skiller seg ut, slik at vi kan skille det fra bakgrunnen ved å legge til en kant.

Hei Verden

Nå vil avsnittet vårt være omgitt av en svart kant. Å legge til en stilbeskrivelse i CSS til avsnittskoden vår fortalte nettstedet hvordan du skal styre avsnittet. Vi kan legge til flere beskrivelser. La oss øke det hvite rommet eller polstringen rundt avsnittet vårt og sentrere teksten.

Hei Verden

Nettstedet vårt ser bedre ut, men HTML-en vår begynner å se rotete ut med alle beskrivelsene i avsnittstaggen. Vi kan flytte denne informasjonen til overskriften vår. Overskriften vår er for informasjon som vi trenger for å vise nettstedet riktig.

Hei Verden

Nå er HTML-en vår lettere å lese. Du vil merke at vi måtte endre noen ting. Stilkoden forteller nettleserens stilinformasjon, men også hva du skal utforme også. I vårt eksempel har vi brukt to forskjellige måter å fortelle det hva du skal style. De s i stilkoden blir fortalt nettleseren å bruke den stilen på alle avsnittstagger. De #ourParagraph delen forteller det bare stilelementer med id vårt avsnitt. Legg merke til det id informasjon ble lagt til p-koden i kroppen vår.

Importere en CSS-fil til nettstedet ditt

Å legge til stilinformasjonen i overskriften gjør koden vår mye lettere å lese. Men hvis vi ønsker å style mange forskjellige sider på samme måte, må vi legge til teksten øverst på hver side. Det virker kanskje ikke som mye arbeid, du kan kopiere og passere det tross alt, men det skaper mye arbeid hvis du vil endre et element senere.

I stedet skal vi beholde CSS-informasjonen i en egen fil og importere filen for å style siden. Kopier og lim inn informasjonen mellom stilkoder i en ny CSS-fil ourCSSfile.css.

p {
tekstjustering: sentrum
}
#ourParagraph {
border-stil: solid; 
polstring: 30px;
}

Importer deretter filen til HTML-filen.

Hei Verden

Legge til et bakgrunnsbilde med CSS

Nå som du har en solid base i HTML og CSS, vil det være et stykke kake å legge til et bakgrunnsbilde. Identifiser først hvilket element du vil gi et bakgrunnsbilde til. I vårt eksempel vil vi legge til en bakgrunn på hele siden. Dette betyr at vi vil endre stilen på kropp. Husk at kroppskodene inneholder alle de synlige elementene.

kropp{
bakgrunnsbilde: url ("sky.jpg");
}
p {
tekstjustering: sentrum
}
#ourParagraph {
border-stil: solid; 
polstring: 30px;
}

For å endre kroppsstilen i CSS, bruk først kropp nøkkelord. Legg deretter til krøllete parenteser som vi gjorde før {}. All stilinformasjonen for kroppen må være mellom de krøllete parentesene. Stilattributtet vi vil endre er bakgrunnsbilde. Det er mange stilattributter. Ikke forvent å huske dem alle. Bokmerke a CSS egenskaper jukseark med attributter du vil huske.

I slekt: 8 kule HTML-effekter som alle kan legge til på nettstedet sitt

Etter attributtet, bruk et kolon for å indikere hvordan du vil endre attributtet. Bruk for å importere et bilde url (). det indikerer at du bruker en lenke for å peke på bildet. Plasser filplasseringen i parentes mellom anførselstegn. Avslutt til slutt linjen med semikolon. Selv om hvite mellomrom ikke har betydning i CSS, bruk innrykk for å gjøre CSS lettere å lese.

Eksemplet vårt ser slik ut:

Hvis bildet ditt ikke vises riktig på grunn av størrelsen på bildet, kan du endre bildet direkte. Imidlertid er det bakgrunnsstilattributter i CSS som du kan bruke til å endre bakgrunnen. Bilder som er mindre enn bakgrunnen gjentas automatisk i bakgrunnen. For å slå det av, legg til bakgrunn-gjenta: nei-gjenta; til elementet ditt.

Det er også to måter å få et bilde til å dekke hele bakgrunnen. Først kan du stille bakgrunnsstørrelsen til størrelsen på skjermen med bakgrunnsstørrelse: 100% 100%;, men dette vil strekke bildet og kan forvride bildet for mye. Hvis du ikke vil at proporsjonene til bildet skal endres, kan du også stille bakgrunnsstørrelsen til dekke. Cover vil gjøre at bakgrunnsbildet dekker bakgrunnen, men ikke forvrenger bildet.

Endre bakgrunnsfarge

La oss endre en siste ting. Nå som vi har bakgrunn, er avsnittet vårt vanskelig å lese. La oss gjøre bakgrunnen hvit. Prosessen er lik. Elementet vi vil endre er #ourParagraph. # Indikerer at "ourParagraph" er et ID-navn. Deretter vil vi sette bakgrunnsfarge attributt til hvitt.

kropp{
bakgrunnsbilde: url ("sky.jpg");
}
p {
tekstjustering: sentrum
}
#ourParagraph {
bakgrunnsfarge: hvit;
border-stil: solid; 
polstring: 30px;
}

Mye bedre.

Fortsetter å designe nettstedet ditt med CSS

Nå som du vet hvordan du kan endre stilen til forskjellige HTML-elementer, er himmelen grensen! Den grunnleggende metoden for å endre stilattributter er den samme. Identifiser elementet du vil endre, og beskriv hvordan du endrer attributtet. Den beste måten å lære mer på er å leke med forskjellige attributter. Utfordre deg selv til å endre fargen på teksten din neste.

De 8 beste nettstedene for kvalitetseksempler på HTML-koding

Vil du lære HTML å kode dine egne nettsteder og apper? Bruk disse nettsideeksemplene og kildekoden for å lære deg HTML og CSS.

Om forfatteren