Maak het CSS-stijlblad
Op dezelfde manier waarop we een apart tekstbestand voor de HTML hebben gemaakt, maakt u een tekstbestand voor de CSS. Zie de eerste zelfstudie als u visuals nodig hebt voor dit proces. Dit zijn de stappen om uw CSS-stylesheet te maken in Kladblok:
- Kies Bestand> Nieuw in Kladblok om een leeg venster te krijgen
- Sla het bestand op als CSS door te klikken op Bestand <Opslaan als …
- Navigeer naar de map my_website op uw harde schijf
- Wijzig de "Opslaan als type:" in "Alle bestanden"
- Noem je bestand "styles.css" (laat de aanhalingstekens weg) en klik op Opslaan
Link het CSS Style Sheet naar uw HTML
Zodra u een stijlpagina voor uw website hebt, moet u deze koppelen aan de webpagina zelf. Om dit te doen gebruikt u de koppelingstag. Plaats de volgende koppelingstag overal in het
tags van uw pets.htm-document:
03 of 10 Wanneer u XHTML schrijft voor verschillende browsers, leert u dat ze allemaal verschillende marges en regels lijken te hebben voor hoe ze dingen weergeven. De beste manier om er zeker van te zijn dat uw site er in de meeste browsers hetzelfde uitziet, is om niet toe te staan dat zaken als marges standaard worden ingesteld voor de browser. Ik start liever mijn pagina's in de linkerbovenhoek, zonder extra vulling of marge rond de tekst. Zelfs als ik de inhoud ga vullen, zet ik de marges op nul, zodat ik begin met dezelfde lege lei. Hiertoe voegt u het volgende toe aan uw styles.css-document: Het lettertype is vaak het eerste dat u op een webpagina wilt wijzigen. Het standaardlettertype op een webpagina kan lelijk zijn en bevindt zich eigenlijk in de webbrowser zelf, dus als u het lettertype niet definieert, weet u echt niet hoe uw pagina eruit zal zien. Meestal zou u het lettertype in alinea's of soms in het hele document zelf wijzigen. Voor deze site definiëren we het lettertype op het kop- en alinumniveau. Voeg het volgende toe aan uw styles.css-document: Ik begon met 1em als mijn basismaat voor alinea's en lijstitems en gebruikte dat vervolgens om de grootte voor mijn koppen in te stellen. Ik verwacht niet dat ik de kop dieper zal gebruiken dan h4, maar als je van plan bent, wil je hem ook stylen. De standaardkleuren voor links zijn blauw en paars voor respectievelijk niet-bezochte en bezochte links. Hoewel dit standaard is, past het misschien niet in het kleurenschema van uw pagina's, dus laten we het wijzigen. Voeg het volgende toe in uw styles.css-bestand: Ik heb drie linkstijlen ingesteld, de a: link als standaard, a: bezocht voor wanneer het is bezocht, ik verander de kleur en a: hover. Met a: hover heb ik de link een achtergrondkleur en vetgedrukt om te benadrukken dat het een link is om op te klikken. Omdat we eerst de navigatie (id = "nav") sectie in de HTML plaatsen, laten we het eerst opmaken. We moeten aangeven hoe breed het moet zijn en een grotere marge aan de rechterkant plaatsen, zodat de hoofdtekst er niet tegenaan stoot. Ik heb er ook een rand omheen gelegd. Voeg de volgende CSS toe aan uw styles.css-document: De eigenschap lijststijl stelt de lijst binnen het navigatiegedeelte zodanig in dat er geen opsommingstekens of cijfers zijn en de .footer neemt de auteursrechtsectie op als kleiner en gecentreerd in de sectie. Door uw hoofdsectie te positioneren met absolute positionering, kunt u er zeker van zijn dat deze precies zal blijven waar u wilt dat deze op uw webpagina blijft. Ik heb de mijne 800px breed gemaakt om grotere monitoren te ontvangen, maar als je een kleiner beeldscherm hebt, wil je dat misschien smaller maken. Plaats het volgende in uw styles.css-document: Omdat ik het alinea-lettertype hierboven al heb ingesteld, wilde ik elke alinea een beetje extra "kick" geven om hem beter te laten opvallen. Ik deed dit door een rand bovenaan te plaatsen die de alinea meer benadrukte dan alleen de afbeelding alleen. Plaats het volgende in uw styles.css-document: Ik besloot om het te doen als een klasse genaamd "topline" in plaats van alleen maar alle alinea's op die manier te definiëren. Op deze manier kan ik, als ik besluit dat ik een alinea wil zonder een bovenste gele lijn, de klasse = "topline" in de alineatielabel gewoon verlaten en deze heeft niet de bovenrand. Afbeeldingen hebben meestal een rand om hen heen, dit is niet altijd zichtbaar tenzij de afbeelding een koppeling is, maar ik vind het leuk om een klasse in mijn CSS-stylesheet te hebben die de rand automatisch uitschakelt.Voor dit stylesheet heb ik de klasse "noborder" gemaakt en de meeste afbeeldingen in het document maken deel uit van deze klasse. Het andere speciale deel van deze afbeeldingen is hun locatie op de pagina. Ik wilde dat ze deel uitmaakten van de alinea waarin ze zich bevonden zonder tabellen te gebruiken om ze op één lijn te brengen. De eenvoudigste manier om dit te doen is om de eigenschap float CSS te gebruiken. Plaats het volgende in uw styles.css-document: Zoals u ziet, zijn er ook marge-eigenschappen ingesteld op de afbeeldingen om te voorkomen dat ze tegen de zwevende tekst die naast hen staat in de alinea's worden ingegooid. Nadat u uw CSS heeft opgeslagen, kunt u de pagina pets.htm opnieuw laden in uw webbrowser. Uw pagina moet er ongeveer zo uitzien als op deze afbeelding, met afbeeldingen uitgelijnd en de navigatie correct aan de linkerkant van de pagina. Volg dezelfde stappen voor al uw interne pagina's voor deze site. U wilt één pagina voor elke pagina in uw navigatie. Los de paginamarges op
Het lettertype op de pagina wijzigen
Uw links interessanter maken
Het navigatiegedeelte stylen
Het hoofdgedeelte positioneren
Uw paragrafen stylen
De afbeeldingen stylen
Bekijk nu uw voltooide pagina
