Stap 4: Het toevoegen van enkele stijl
CSS staat voor Cascading Style Sheets. En wordt gebruikt voor het geven van uw webpagina een beetje meer stijl.
Sommige dingen over de syntaxis van css. Ik zal je laten zien een kleine code container van css:
input { background-color: red; padding: 12px; font-size: 18px; } input betekent dat we deze stijl aan elk element met de tag input toevoegen. Vervolgens definiëren we binnen de accolades sommige dingen zoals achtergrond en rand u kunt ook definiëren welke lettertype o gebruik.
Wij gaan er dus nu css aan onze pagina toevoegen. We doen dit door toevoeging van de volgende code binnen de stijltags die wij hebben gemaakt in het begin van stap 3.
body { text-align: center; background: url("http://bit.ly/19naIXk"); color:white; font-family: Helvetica; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 24px; } input { border: 0; padding: 12px; font-size: 18px; } input[type="submit"] { background: limegreen; color: black; } Vervang de url na achtergrond met uw eigen url.
Dit is hoe uw code zou moeten uitzien:
<! DOCTYPE html >< html xmlns = "http://www.w3.org/1999/xhtml" >< hoofd >< titel > A website over mij! < / title >< stijl > <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A website about me!</title> <style> body { text-align: center; background: url("http://bit.ly/19naIXk"); color:white; font-family: Helvetica; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 24px; } input { border: 0; padding: 12px; font-size: 18px; } input[type="submit"] { background: limegreen; color: black; } </style> </head> <body> <img src="http://bit.ly/KYvaEA" width="250" height="250" /> <p>Hi, My name is ... and i like ... and ...</p> <input type="email" placeholder="Email"> <input type="submit"> </body> </html> < / style >< / head >< lichaam >< img src = "http://bit.ly/KYvaEA" width = "250" height = "250" / >< p > Hallo, mijn naam is... en ik... en... < /p > p { font-size: 35px; } Goed gedaan! Het gedaan!
Om te zien hoe mooi je website ziet er. je moet het vinden van een groene afspeelknop en klik op de pijl ernaast. Selecteer vervolgens de pagina inspecteur naar weergave in visuele studio anders Selecteer een browser die u wenst. Nadat die net sloeg dat groene afspeelknop!
