Sådan indstilles et baggrundsbillede i CSS

Oprettelse af et websted er en fantastisk måde at udtrykke dig på. Selvom der er mange værktøjer til webstedsopbygning, er det sjovt at skrive det selv, en sjov måde at lære mere om, hvordan websteder fungerer bag kulisserne. Et godt begynderprojekt er at oprette et websted og tilføje et baggrundsbillede med CSS. Dette projekt får dig i gang med både HTML og CSS.

Hvad er CSS?

CSS står for Cascading Style Sheet. Det er et programmeringssprog, der giver dig mulighed for at style markup-sprog. Et sådant markup-sprog er HTML eller Hyper-Text Markup Language. HTML bruges til at oprette websteder. Selvom du kan kontrollere nogle af hjemmesidens stil ved hjælp af HTML, tilbyder CSS meget mere kontrol- og designmuligheder.

Oprettelse af et grundlæggende websted med HTML

Da CSS bare er et stilsprog, skal vi bruge det til at style det for at bruge det. Et meget grundlæggende websted vil være nok for os til at begynde at spille med CSS. Vores side viser "Hello World".

Hej Verden

Hvis du ikke er fortrolig med HTML, lad os hurtigt gennemgå, hvad alle elementerne gør. Som nævnt er HTML et markup-sprog, hvilket betyder, at det bruger tags til at markere, hvad teksten er. Når du ser et ord omgivet af

<> det er et mærke. Der er to typer tags, et tag, der markerer begyndelsen af ​​et afsnit ved hjælp af <> og et, der markerer slutningen af ​​et afsnit ved hjælp af

I vores eksempel har vi fire tags. Det html tag angiver, hvilke elementer der er en del af hjemmesiden. Det hoved tag indeholder de headeroplysninger, der ikke vises på siden, men som er nødvendige for at oprette siden. Alle de viste elementer er mellem legeme tags. Vi har kun et vist element, det s tag. Det fortæller webbrowseren, at teksten er et afsnit.

Relaterede: 10 enkle CSS-kodeeksempler, du kan lære på 10 minutter

10 enkle CSS-kodeeksempler, du kan lære på 10 minutter

Vil du vide mere om brug af CSS? Prøv disse grundlæggende CSS-kodeeksempler til at begynde med, og anvend dem derefter på dine egne websider.

Tilføjelse af CSS til HTML

Nu hvor vi har en enkel side, kan vi tilpasse stilen med CSS. Vores side er ret enkel lige nu, og der er ikke meget, vi kan gøre, men lad os begynde med at få vores afsnit til at skille sig ud, så vi kan skelne det fra baggrunden ved at tilføje en kant.

Hej Verden

Nu vil vores afsnit være omgivet af en sort kant. Tilføjelse af en stilbeskrivelse i CSS til vores afsnitstag fortalte webstedet, hvordan man styler afsnittet. Vi kan tilføje flere beskrivelser. Lad os øge det hvide rum eller polstringen omkring vores afsnit og centrere vores tekst.

Hej Verden

Vores hjemmeside ser bedre ud, men vores HTML begynder at se rodet ud med alle disse beskrivelser i afsnitstaggen. Vi kan flytte disse oplysninger til vores overskrift. Vores header er til information, som vi har brug for for at vise webstedet korrekt.

Hej Verden

Nu er vores HTML lettere at læse. Du vil bemærke, at vi var nødt til at ændre nogle ting. Stilmærket fortæller oplysningerne om webbrowserstil, men også hvad man også skal style. I vores eksempel har vi brugt to forskellige måder til at fortælle det, hvad man skal style. Det s i typografikoden fortæller webbrowseren at anvende den typografi på alle afsnitskoder. Det #ourParagraph sektion fortæller det kun om stilelementer med id'et vores afsnit. Læg mærke til det id information blev føjet til p-koden i vores krop.

Import af en CSS-fil til dit websted

Tilføjelse af stiloplysninger til overskriften gør vores kode meget lettere at læse. Men hvis vi ønsker at style mange forskellige sider på samme måde, skal vi tilføje teksten øverst på hver side. Det virker måske ikke som meget arbejde, du kan trods alt kopiere og forbi det, men det skaber meget arbejde, hvis du senere vil ændre et element.

I stedet holder vi CSS-oplysningerne i en separat fil og importerer filen for at style siden. Kopier og indsæt oplysningerne mellem typografimærkerne i en ny CSS-fil voresCSSfile.css.

p {
tekstjustering: center
}
#ourParagraph {
kant-stil: solid; 
polstring: 30 px;
}

Importér derefter filen til HTML-filen.

Hej Verden

Tilføjelse af et baggrundsbillede med CSS

Nu hvor du har en solid base i HTML og CSS, vil tilføjelse af et baggrundsbillede være et stykke kage. Identificer først, hvilket element du vil give et baggrundsbillede til. I vores eksempel vil vi tilføje en baggrund til hele siden. Dette betyder, at vi vil ændre stilen på legeme. Husk, at body tags indeholder alle de synlige elementer.

legeme{
baggrundsbillede: url ("sky.jpg");
}
p {
tekstjustering: center
}
#ourParagraph {
kant-stil: solid; 
polstring: 30 px;
}

For at ændre kropsstil i CSS skal du først bruge legeme nøgleord. Tilføj derefter krøllede parenteser som vi gjorde før {}. Al stilinformation for kroppen skal være mellem de krøllede parenteser. Den stilattribut, vi vil ændre, er baggrundsbillede. Der er mange stilattributter. Forvent ikke at huske dem alle udenad. Bogmærke a CSS egenskaber snydeark med attributter, som du vil huske.

Relaterede: 8 Seje HTML-effekter, som alle kan føje til deres websted

Efter attributten skal du bruge et kolon til at angive, hvordan du vil ændre attributten. Brug for at importere et billede url (). det indikerer, at du bruger et link til at pege på billedet. Placer filplaceringen i parentes mellem anførselstegn. Endelig slut linjen med et semikolon. Selvom hvide rum ikke har betydning i CSS, skal du bruge indrykning for at gøre CSS lettere at læse.

Vores eksempel ser sådan ud:

Hvis dit billede ikke vises korrekt på grund af billedets størrelse, kan du ændre billedet direkte. Der er dog baggrundsstilattributter i CSS, som du kan bruge til at ændre baggrunden. Billeder, der er mindre end baggrunden, gentages automatisk i baggrunden. For at slå det fra skal du tilføje baggrund-gentagelse: nej-gentag; til dit element.

Der er også to måder at få et billede til at dække hele baggrunden. Først kan du indstille baggrundsstørrelsen til skærmens størrelse med baggrundsstørrelse: 100% 100%;, men dette vil strække billedet og kan forvride billedet for meget. Hvis du ikke vil ændre billedets proportioner, kan du også indstille baggrundsstørrelsen til dække over. Cover vil få baggrundsbilledet til at dække baggrunden, men ikke forvride billedet.

Ændring af baggrundsfarve

Lad os ændre en sidste ting. Nu hvor vi har en baggrund, er vores afsnit svært at læse. Lad os gøre baggrunden hvid. Processen er ens. Det element, vi vil ændre, er #ourParagraph. # Angiver, at "ourParagraph" er et id-navn. Dernæst vil vi indstille baggrundsfarve attribut til hvid.

legeme{
baggrundsbillede: url ("sky.jpg");
}
p {
tekstjustering: center
}
#ourParagraph {
baggrundsfarve: hvid;
kant-stil: solid; 
polstring: 30 px;
}

Meget bedre.

Fortsætter med at designe dit websted med CSS

Nu hvor du ved, hvordan du ændrer stilen for forskellige HTML-elementer, er himlen grænsen! Den grundlæggende metode til at ændre typeattributter er den samme. Identificer det element, du vil ændre, og beskriv, hvordan du ændrer attributten. Den bedste måde at lære mere på er at lege med forskellige attributter. Udfordre dig selv til at ændre farven på din tekst næste.

De 8 bedste websteder til kvalitetseksempler på HTML-kodning

Vil du lære HTML at kode dine egne websteder og apps? Brug disse websideeksempler og kildekode til at lære dig selv HTML og CSS.

Om forfatteren