Stap 2: kleuren toevoegen Je ziet waarschijnlijk wat zwarte tekst op een witte achtergrond, maar het hangt ervanaf hoe de browser is geconfigureerd. Dus een eenvoudige handeling om de pagina er wat stijlvoller uit te laten zien is kleuren toe te voegen. Laat de browser open, we gebruiken hem zo weer. We beginnen met een stylesheet ingebed in het HTML-bestand.
Het stylesheet komt binnen dat element. Dus, ga terug naar de editor en voeg de volgende vijf regels toe in het head-gedeelte van het HTML-bestand. De derde regel maakt de kleur van de tekst paars en de volgende regel maakt van de achtergrond een soort groen-geel.
Stylsheets in CSS bestaan uit regels. Het voorbeeld laat zien dat regels kunnen worden gecombineerd. Kleuren kunnen in CSS op verschillende manieren worden aangegeven. Er zijn ongeveer Engelse namen van kleuren en de hexadecimale codes zijn genoeg voor meer dan 16 miljoen kleuren. Adding a touch of style [Engelse pagina] vertelt meer over deze codes. Stap 3: lettertypes toevoegen Iets anders dat eenvoudig te doen is, is onderscheid te maken in de lettertypes voor de verschillende elementen op de pagina.
Op het Web weet je nooit zeker welke lettertypes je lezers op hun computer hebben, dus geven we ook wat alternatieven aan: als Georgia niet beschikbaar is, kunnen Times New Roman of Times er ook mee door en als dat ook faalt, mag de browser een willekeurig font met schreven serifs gebruiken. Als Helvetica er niet is, zijn Geneva, Arial en SunSans-Regular gelijksoortig van vorm en als geen ervan werkt, kan de browser een willekeurig schreefloos lettertype kiezen. De rest van tekst heeft nu een ander lettertype als het kopje.
We zullen hem aan de linkerkant zetten, omdat dat iets interessanter is dan langs de bovenkant… Het menu staat al in de HTML-pagina. Op een echte website mogen natuurlijk geen gebroken links voorkomen. We moeten dus het menu naar links verplaatsen en de rest van de pagina iets naar rechts, zodat er plaats voor ontstaat. De CSS-properties die we daarvoor gebruiken zijn 'padding-left' om de body te verplaatsen en 'position', 'left' en 'top' om het menu te verplaatsen.
Er zijn ander manieren om dit te doen. Maar deze is goed genoeg voor ons doel. Dat ziet er al een stuk interessanter uit, nietwaar? De hoofdtekst is naar rechts verplaatst en de lijst met links is nu links ervan, in plaats van erboven.
De 'position: absolute' zegt dat het element ul onafhankelijk van alle andere tekst wordt neergezet en de 'left' en 'top' geven aan wat die positie is. In dit geval 2em van boven en 1em van links in het venster. De 'em' is een erg nuttige eenheid in CSS, omdat hij zich automatisch aanpast aan het lettertype dat de gebruiker heeft.
De meeste browsers hebben een menu om de lettergootte te veranderen: je kunt het proberen en je zult zien, dat het menu meegroeit met het lettertype. Dat zou niet het geval zijn als we een grootte in pixels hadden gebruikt. Stap 5: de links opmaken Het navigatie-menu ziet er nog steeds als een lijst uit. Laten we er wat stijl aan toevoegen. We halen de rondjes weg en verplaatsen de items naar links, naar waar de rondjes waren. We geven elk item ook z'n eigen witte achtergrond en een zwarte rechthoek.
Zomaar, omdat het kan. Get certified by completing a course today! If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:.
Example Specify a value for the download attribute, which will be the new filename of the downloaded file "w3logo. Report Error. Your message has been sent to W3Schools. W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
0コメント