Home-theater-designers
Het maken van een website is een geweldige manier om jezelf uit te drukken. Hoewel er veel tools voor het bouwen van websites zijn, is het zelf schrijven een leuke manier om meer te weten te komen over hoe websites achter de schermen werken. Een goed beginnersproject is om een website te maken en een achtergrondafbeelding toe te voegen met CSS. Met dit project kunt u aan de slag met zowel HTML als CSS.
Wat is CSS?
CSS staat voor Cascading Style Sheet. Het is een programmeertaal waarmee je opmaaktalen kunt stylen. Een dergelijke opmaaktaal is HTML of Hyper-Text Markup Language. HTML wordt gebruikt om websites te maken. Hoewel je een deel van de stijl van de website kunt bepalen met HTML, biedt CSS veel meer controle en ontwerpopties.
Een basiswebsite maken met HTML
Omdat CSS slechts een stijltaal is, hebben we eerst iets nodig om te stylen om het te gebruiken. Een zeer eenvoudige website is voldoende voor ons om met CSS te gaan spelen. Op onze pagina wordt 'Hallo wereld' weergegeven.
Hello World
In het geval dat u niet bekend bent met HTML, laten we snel eens kijken wat alle elementen doen. Zoals gezegd is HTML een opmaaktaal, wat betekent dat het tags gebruikt om aan te geven wat de tekst is. Telkens wanneer je een woord ziet omringd door het is een label. Er zijn twee soorten tags, een tag die het begin van een sectie markeert met en een die het einde van een sectie markeert met . De tekst binnen een sectie is ook bedoeld om dit onderscheid beter zichtbaar te maken.
In ons voorbeeld hebben we vier tags. De html tag geeft aan welke elementen deel uitmaken van de website. De hoofd tag bevat de koptekstinformatie die niet op de pagina wordt weergegeven, maar die nodig is om de pagina te maken. Alle weergegeven elementen bevinden zich tussen de lichaam labels. We hebben maar één weergegeven element, de P label. Het vertelt de webbrowser dat de tekst een alinea is.
Verwant: 10 eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren
CSS aan HTML toevoegen
Nu we een eenvoudige pagina hebben, kunnen we de stijl aanpassen met CSS. Onze pagina is op dit moment vrij eenvoudig en we kunnen niet veel doen, maar laten we beginnen met onze alinea te laten opvallen, zodat we hem van de achtergrond kunnen onderscheiden door een rand toe te voegen.
Hello World
Nu wordt onze alinea omgeven door een zwarte rand. Door een stijlbeschrijving in CSS toe te voegen aan onze alinea-tag, vertelde de website hoe de alinea moest worden opgemaakt. We kunnen meer beschrijvingen toevoegen. Laten we de witruimte of opvulling rond onze alinea vergroten en onze tekst centreren.
Hello World
Onze website ziet er beter uit, maar onze HTML begint er rommelig uit te zien met al die beschrijvingen in de alinea-tag. We kunnen deze informatie naar onze header verplaatsen. Onze header is voor informatie die we nodig hebben om de website correct weer te geven.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Nu is onze HTML gemakkelijker te lezen. U zult merken dat we wel het een en ander hebben moeten veranderen. De stijltag vertelt de stijlinformatie van de webbrowser, maar ook wat te stylen. In ons voorbeeld hebben we twee verschillende manieren gebruikt om het te vertellen wat het moet stylen. De P in de stijltag vertelt de webbrowser om die stijl op alle alineatags toe te passen. De #onze paragraaf sectie vertelt het om alleen elementen te stylen met de id onze paragraaf . Let erop dat ID kaart informatie is toegevoegd aan de p-tag in ons lichaam.
hoe gif als achtergrond te hebben
Een CSS-bestand naar uw website importeren
Door de stijlinformatie aan de koptekst toe te voegen, is onze code veel gemakkelijker te lezen. Als we echter veel verschillende pagina's op dezelfde manier willen opmaken, moeten we die tekst bovenaan elke pagina toevoegen. Dat lijkt misschien niet veel werk, je kunt het toch kopiëren en plakken, maar het levert veel werk op als je later een element wilt wijzigen.
In plaats daarvan gaan we de CSS-informatie in een apart bestand bewaren en het bestand importeren om de pagina op te maken. Kopieer en plak de informatie tussen de stijltags in een nieuw CSS-bestand onsCSSbestand.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Importeer het bestand vervolgens naar het HTML-bestand.
Hello World
Een achtergrondafbeelding toevoegen met CSS
Nu je een solide basis hebt in HTML en CSS, is het toevoegen van een achtergrondafbeelding een fluitje van een cent. Bepaal eerst aan welk element u een achtergrondafbeelding wilt geven. In ons voorbeeld voegen we een achtergrond toe aan de hele pagina. Dit betekent dat we de stijl van de lichaam . Onthoud dat de body-tags alle zichtbare elementen bevatten.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Om de body-stijl in CSS te wijzigen, gebruikt u eerst de lichaam trefwoord. Voeg vervolgens accolades toe zoals we eerder deden {}. Alle stijlinformatie voor het lichaam moet tussen de accolades staan. Het stijlkenmerk dat we willen wijzigen is achtergrond afbeelding . Er zijn veel stijlkenmerken. Verwacht niet dat je ze allemaal kunt onthouden. Maak een bladwijzer van een cheatsheet met CSS-eigenschappen met attributen die u wilt onthouden.
Verwant: 8 coole HTML-effecten die iedereen aan zijn website kan toevoegen
hisense roku tv-afstandsbediening werkt niet
Gebruik na het kenmerk een dubbele punt om aan te geven hoe u het kenmerk gaat wijzigen. Om een afbeelding te importeren, gebruik url() . het geeft aan dat u een link gebruikt om naar de afbeelding te verwijzen. Plaats de bestandslocatie tussen haakjes tussen aanhalingstekens. Sluit ten slotte de regel af met een puntkomma. Hoewel witruimte geen betekenis heeft in CSS, kunt u inspringen gebruiken om de CSS leesbaarder te maken.
Ons voorbeeld ziet er als volgt uit:
Als uw afbeelding niet correct wordt weergegeven vanwege de grootte van de afbeelding, kunt u de afbeelding direct wijzigen. Er zijn echter achtergrondstijlkenmerken in CSS die u kunt gebruiken om de achtergrond te wijzigen. Afbeeldingen die kleiner zijn dan de achtergrond worden automatisch op de achtergrond herhaald. Om dat uit te schakelen, voeg achtergrond herhaling:niet herhalen; naar jouw element.
Er zijn ook twee manieren om een afbeelding de hele achtergrond te laten bedekken. Ten eerste kunt u de achtergrondgrootte instellen op de grootte van het scherm met achtergrondgrootte: 100% 100%; , maar hierdoor wordt het beeld uitgerekt en kan het beeld te veel worden vervormd. Als u niet wilt dat de verhoudingen van de afbeelding worden gewijzigd, kunt u de achtergrondgrootte ook instellen op Hoes . Cover zorgt ervoor dat de achtergrondafbeelding de achtergrond bedekt, maar de afbeelding niet vervormt.
De achtergrondkleur wijzigen
Laten we nog een laatste ding veranderen. Nu we een achtergrond hebben, is onze paragraaf moeilijk te lezen. Laten we de achtergrond wit maken. Het proces is vergelijkbaar. Het element dat we willen wijzigen is #ourParagraph. De # geeft aan dat 'ourParagraph' een id-naam is. Vervolgens willen we de Achtergrond kleur toeschrijven aan wit.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Veel beter.
Doorgaan met het ontwerpen van uw website met CSS
Nu je weet hoe je de stijl van verschillende HTML-elementen kunt veranderen, is de hemel de limiet! De basismethode voor het wijzigen van stijlkenmerken is hetzelfde. Identificeer het element dat u wilt wijzigen en beschrijf hoe u het kenmerk kunt wijzigen. De beste manier om meer te leren is door met verschillende attributen te spelen. Daag jezelf uit om vervolgens de kleur van je tekst te veranderen.
Deel Deel Tweeten E-mail De 8 beste sites voor hoogwaardige HTML-coderingsvoorbeeldenWil je HTML leren om je eigen websites en apps te coderen? Gebruik deze webpaginavoorbeelden en broncode om uzelf HTML en CSS te leren.
Lees volgende Gerelateerde onderwerpen- Programmeren
- HTML
- Webdesign
- CSS
J. Seaton is een wetenschapsschrijver die gespecialiseerd is in het opsplitsen van complexe onderwerpen. Ze is gepromoveerd aan de Universiteit van Saskatchewan; haar onderzoek was gericht op het gebruik van game-based learning om de online betrokkenheid van studenten te vergroten. Als ze niet aan het werk is, vind je haar terwijl ze leest, videospelletjes speelt of tuiniert.
Meer van Jennifer SeatonAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren