Home-theater-designers
Oprettelse af et websted er en fantastisk måde at udtrykke dig selv på. Selvom der er mange værktøjer til opbygning af websteder, er det 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 markeringssprog. Et sådant markeringssprog er HTML eller Hyper-Text Markup Language. HTML bruges til at oprette websteder. Selvom du kan styre nogle af webstedets 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 først bruge noget at style for at bruge det. Et meget grundlæggende websted vil være nok til, at vi kan begynde at spille med CSS. Vores side viser 'Hej verden'.
Hello World
Hvis du ikke kender HTML, lad os hurtigt gå over, 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 på et afsnit ved hjælp af og et, der markerer slutningen på et afsnit ved hjælp af. Teksten i et afsnit er også beregnet til at gøre denne sondring lettere at se.
I vores eksempel har vi fire tags. Det html tag angiver, hvilke elementer der er en del af webstedet. Det hoved tag indeholder overskriftsoplysningerne, der ikke vises på siden, men er nødvendige for at oprette siden. Alle de viste elementer er mellem legeme mærker. Vi har kun et vist element, s tag. Det fortæller webbrowseren, at teksten er et afsnit.
Relaterede: 10 simple CSS -kodeeksempler, du kan lære på 10 minutter
Tilføjelse af CSS til HTML
Nu hvor vi har en simpel side, kan vi tilpasse stilen med CSS. Vores side er ret simpel 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.
Hello World
Nu vil vores afsnit være omgivet af en sort kant. Tilføjelse af en stilbeskrivelse i CSS til vores afsnitsmærke fortalte webstedet, hvordan man skulle style afsnittet. Vi kan tilføje flere beskrivelser. Lad os øge det hvide mellemrum eller polstring omkring vores afsnit og centrere vores tekst.
Hello World
Vores websted ser bedre ud, men vores HTML begynder at se rodet ud med alle disse beskrivelser i afsnittet. Vi kan flytte disse oplysninger til vores header. Vores overskrift er til information om, at vi har brug for at vise webstedet korrekt.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Nu er vores HTML lettere at læse. Du vil bemærke, at vi var nødt til at ændre nogle ting rundt. Stilmærket fortæller webbrowserens stiloplysninger, men også hvad du også skal style. I vores eksempel har vi brugt to forskellige måder at fortælle det, hvad de skal style. Det s i stilmærket fortæller webbrowseren at anvende denne stil på alle afsnitstags. Det #vores afsnit sektion fortæller det kun til stilelementer med id'et vores afsnit . Læg mærke til det id oplysninger blev føjet til p -mærket i vores krop.
der har boet i mit hus
Import af en CSS -fil til dit websted
Tilføjelse af stiloplysningerne til overskriften gør vores kode meget lettere at læse. Men hvis vi vil 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 jo kopiere og forbi det, men det skaber meget arbejde, hvis du vil ændre et element senere.
I stedet vil vi beholde CSS -oplysningerne i en separat fil og importere filen for at style siden. Kopier og indsæt oplysningerne mellem stilmærkerne i en ny CSS -fil voresCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Importer derefter filen til HTML -filen.
Hello World
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 tilføjer vi en baggrund til hele siden. Det betyder, at vi ønsker at ændre stilen på legeme . Husk, at body -tagsne indeholder alle de synlige elementer.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}For at ændre kropsstilen i CSS skal du først bruge legeme nøgleord. Tilføj derefter krøllede parenteser som vi gjorde før {}. Alle stilinformation til kroppen skal være mellem de krøllede beslag. Den stilattribut, vi vil ændre, er baggrundsbillede . Der er mange stilattributter. Forvent ikke at huske dem alle udenad. Tilføj et bogmærke til et snydeblad med CSS-egenskaber med attributter, som du vil huske.
Relaterede: 8 seje HTML -effekter, som alle kan føje til deres websted
macbook air m1 vs macbook pro m1
Efter attributten skal du bruge et kolon til at angive, hvordan du vil ændre attributten. For at importere et billede skal du bruge url () . det angiver, at du bruger et link til at pege på billedet. Placer filplaceringen i parenteserne mellem anførselstegn. Endelig slut linjen med et semikolon. Selvom hvidt mellemrum ikke har betydning i CSS, skal du bruge indrykning til 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, tilføj baggrund-gentag:ingen gentagelse; 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 forvrænge billedet for meget. Hvis du ikke vil have billedets proportioner ændret, kan du også indstille baggrundsstørrelsen til dække over . Cover vil få baggrundsbilledet til at dække baggrunden, men ikke forvrænge 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 dens baggrund hvid. Processen ligner. Det element, vi ønsker at ændre, er #ourParagraph. # Angiver, at 'ourParagraph' er et id -navn. Dernæst vil vi indstille baggrundsfarve tilskrives hvid.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Meget bedre.
Fortsætter med at designe dit websted med CSS
Nu hvor du ved, hvordan du ændrer stilen på forskellige HTML -elementer, er himlen grænsen! Den grundlæggende metode til at ændre stilattributter 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.
Del Del Tweet E -mail De 8 bedste eksempler på HTML -kodning af kvalitetVil du lære HTML at kode dine egne websteder og apps? Brug disse websides eksempler og kildekode til at lære dig selv HTML og CSS.
Læs Næste Relaterede emner- Programmering
- HTML
- Webdesign
- CSS
J. Seaton er en Science Writer, der har specialiseret sig i at nedbryde komplekse emner. Hun har en ph.d. fra University of Saskatchewan; hendes forskning fokuserede på at udnytte spilbaseret læring til at øge elevernes engagement online. Når hun ikke arbejder, finder du hende med sin læsning, videospil eller havearbejde.
Mere fra Jennifer SeatonAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere