Het maken van een website is een geweldige manier om jezelf te uiten. 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 zowel met HTML als CSS aan de slag.
Wat is CSS?
CSS staat voor Cascading Style Sheet. Het is een programmeertaal waarmee u opmaaktalen kunt opmaken. Een dergelijke opmaaktaal is HTML of Hyper-Text Markup Language. HTML wordt gebruikt om websites te maken. Hoewel u een deel van de websitestijl kunt bepalen met HTML, biedt CSS veel meer controle- en ontwerpopties.
Een eenvoudige website maken met HTML
Omdat CSS slechts een stijltaal is, moeten we eerst iets stijlen om het te gebruiken. Een heel eenvoudige website is voldoende om met CSS te gaan spelen. Op onze pagina wordt "Hallo wereld" weergegeven.
Hallo Wereld
Als u niet bekend bent met HTML, laten we dan even 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. Elke keer dat je een woord ziet omgeven door
<> het is een tag. Er zijn twee soorten tags: een tag die het begin van een sectie markeert met <> en een die het einde van een sectie markeert metIn 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 tags. 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
Meer weten over het gebruik van CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen, en pas ze vervolgens toe op uw eigen webpagina's.
CSS toevoegen aan HTML
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 deze kunnen onderscheiden van de achtergrond door een rand toe te voegen.
Hallo Wereld
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.
Hallo Wereld
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 bedoeld voor informatie die we nodig hebben om de website correct weer te geven.
Hallo Wereld
Nu is onze HTML gemakkelijker te lezen. Je zult merken dat we een aantal dingen moesten veranderen. De style-tag vertelt de stijlinformatie van de webbrowser, maar ook wat te stylen. In ons voorbeeld hebben we twee verschillende manieren gebruikt om hem te vertellen wat hij moet stylen. De p in de style-tag vertelt de webbrowser om die stijl toe te passen op alle alinea-tags. De #onzeParagraaf sectie vertelt het alleen aan stijlelementen met de id onze paragraaf. Let erop dat ID kaart informatie werd toegevoegd aan de p-tag in ons lichaam.
Een CSS-bestand naar uw website importeren
Door de stijlinformatie aan de koptekst toe te voegen, wordt 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 onzeCSSfile.css.
p {
text-align: center
}
#onzeParagraaf {
randstijl: solide;
opvulling: 30px;
}Importeer het bestand vervolgens naar het HTML-bestand.
Hallo Wereld
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.
lichaam{
achtergrondafbeelding: url ("sky.jpg");
}
p {
text-align: center
}
#onzeParagraaf {
randstijl: solide;
opvulling: 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 de hoofdtekst moet tussen de accolades staan. Het stijlkenmerk dat we willen wijzigen is achtergrond afbeelding. Er zijn veel stijlkenmerken. Verwacht ze niet allemaal uit het hoofd te leren. Maak een bladwijzer van een Cheatsheet voor CSS-eigenschappen met attributen die u wilt onthouden.
Verwant: 8 coole HTML-effecten die iedereen aan zijn website kan toevoegen
Gebruik na het attribuut een dubbele punt om aan te geven hoe u het attribuut gaat wijzigen. Gebruik om een afbeelding te importeren url (). het geeft aan dat u een link gebruikt om naar de afbeelding te verwijzen. Plaats de bestandslocatie tussen haakjes tussen aanhalingstekens. Eindig de regel met een puntkomma. Hoewel witruimte geen betekenis heeft in CSS, kunt u inspringen gebruiken om de CSS beter leesbaar 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 rechtstreeks 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. Voeg toe om dat uit te schakelen achtergrond herhaling: geen herhaling; naar je 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 teveel worden vervormd. Als u niet wilt dat de verhoudingen van de afbeelding worden gewijzigd, kunt u ook de achtergrondgrootte instellen op Hoes. Cover zorgt ervoor dat de achtergrondafbeelding de achtergrond bedekt, maar vervormt de afbeelding niet.
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 toe te schrijven aan wit.
lichaam{
achtergrondafbeelding: url ("sky.jpg");
}
p {
text-align: center
}
#onzeParagraaf {
achtergrondkleur: wit;
randstijl: solide;
opvulling: 30px;
}Veel beter.
Doorgaan met het ontwerpen van uw website met CSS
Nu u weet hoe u de stijl van verschillende HTML-elementen kunt wijzigen, is de lucht de limiet! De basismethode om stijlkenmerken te wijzigen is dezelfde. Identificeer het element dat u wilt wijzigen en beschrijf hoe u het attribuut 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.
Wilt u HTML leren om uw eigen websites en apps te coderen? Gebruik deze webpagina-voorbeelden en broncode om jezelf HTML en CSS te leren.
- Programmeren
- HTML
- Webdesign
- CSS
J. Seaton is een wetenschapsjournalist 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 betrokkenheid van studenten online te vergroten. Als ze niet aan het werk is, zul je haar zien lezen, videogames spelen of tuinieren.
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Nog een stap…!
Bevestig uw e-mailadres in de e-mail die we u zojuist hebben gestuurd.
