Het CSS-stijlblad maken
Op dezelfde manier hebben we een apart tekstbestand gemaakt voor de HTML, maakt u een tekstbestand voor de CSS. Als je visuals nodig hebt voor dit proces, bekijk dan de eerste tutorial. Hier zijn de stappen om uw CSS-stijlblad in Kladblok te maken:
- Kiezen 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 mijn_website op uw harde schijf
- Verander de "Opslaan als type:" naar "Alle bestanden"
- Geef uw bestand een naam "stijlen.css" (laat de aanhalingstekens weg) en klik op Sparen
Koppel het CSS-stijlblad aan uw HTML
Als je eenmaal een stylesheet voor uw website moet u deze koppelen aan de webpagina zelf. Hiervoor gebruik je de link tag. Plaats de volgende link-tag ergens in het.
De paginamarges corrigeren
Wanneer je aan het schrijven bent XHTML voor verschillende browsers zul je leren 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 door niet toe te staan dat zaken als marges standaard worden ingesteld op de browserkeuze.
We beginnen pagina's bij voorkeur in de linkerbovenhoek, zonder extra opvulling of marge rond de tekst. Zelfs als we de inhoud gaan opvullen, stellen we de marges in op nul, zodat we met dezelfde schone lei beginnen. Om dit te doen, voegt u het volgende toe aan uw styles.css-document:
html, lichaam {
marge: 0px;
opvulling: 0px;
rand: 0px;
links: 0px;
boven: 0px;
}
Het lettertype op de pagina wijzigen
Het lettertype is vaak het eerste dat u op een webpagina wilt wijzigen. De standaard lettertype op een webpagina kan lelijk zijn en is eigenlijk aan de webbrowser zelf, dus als je het lettertype niet definieert, weet je echt niet hoe je pagina eruit zal zien.
Normaal gesproken zou u het lettertype op alinea's wijzigen, of soms op het hele document zelf. Voor deze site definiëren we het lettertype op kop- en alineaniveau. Voeg het volgende toe aan uw styles.css-document:
p, ik {
lettertype: 1em Arial, Helvetica, schreefloos;
}
h1 {
lettertype: 2em Arial, Helvetica, schreefloos;
}
h2 {
lettertype: 1.5em Arial, Helvetica, schreefloos;
}
h3 {
lettertype: 1.25em Arial, Helvetica, schreefloos;
}
We begonnen met 1em als de basisgrootte voor alinea's en lijstitems en gebruikten die vervolgens om de grootte voor mijn koppen in te stellen. We verwachten niet dat we een kop gebruiken die dieper is dan h4, maar als je dat van plan bent, wil je het ook stylen.
Uw links interessanter maken
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 veranderen. Voeg het volgende toe aan je bestand styles.css:
een link {
font-familie: Arial, Helvetica, schreefloos;
kleur: #FF9900;
tekstdecoratie: onderstrepen;
}
een: bezocht {
kleur: #FFCC66;
}
een: zweef {
achtergrond: #FFFFCC;
lettergewicht: vet;
}
We hebben drie linkstijlen ingesteld, de a: link als standaard, a: bezocht voor wanneer deze is bezocht, we veranderen de kleur en a: hover. Met een: hover laten we de link een achtergrondkleur krijgen en vet maken om te benadrukken dat het een link is waarop geklikt moet worden.
Het navigatiegedeelte stylen
Aangezien we de sectie navigatie (id="nav") eerst in de HTML plaatsen, laten we deze eerst opmaken. We moeten aangeven hoe breed deze moet zijn en een bredere marge aan de rechterkant plaatsen zodat de hoofdtekst er niet tegenaan stoot. we zetten er ook een rand omheen.
Voeg de volgende CSS toe aan uw styles.css-document:
#navigatie {
breedte: 225px;
marge-rechts: 15px;
rand: medium solide #000000;
}
#nav li {
lijststijl: geen;
}
.voettekst {
lettergrootte: .75em;
beiden opschonen;
breedte: 100%;
tekst uitlijnen: midden;
}
De eigenschap list-style zorgt ervoor dat de lijst in de navigatiesectie geen opsommingstekens of cijfers bevat, en de .footer maakt de copyrightsectie kleiner en gecentreerd binnen de sectie.
Het hoofdgedeelte positioneren
Door uw hoofdgedeelte met absolute positionering te positioneren, kunt u er zeker van zijn dat het precies blijft waar u wilt dat het op uw webpagina blijft. We hebben het 800px breed gemaakt om plaats te bieden grotere monitoren, maar als je een kleinere monitor hebt, wil je die misschien smaller maken.
Plaats het volgende in uw styles.css-document:
#hoofd {
breedte: 800px;
boven: 0px;
positie: absoluut;
links: 250px;
}
Uw alinea's stylen
Aangezien ik het alinealettertype hierboven al heb ingesteld, wilde ik elke alinea een beetje extra "kick" geven om het beter te laten opvallen. Ik deed dit door bovenaan een rand te plaatsen die de alinea meer benadrukte dan alleen de afbeelding.
Plaats het volgende in uw styles.css-document:
.toplijn {
border-top: dik massief #FFCC00;
}
We besloten het te doen als een klasse genaamd "topline" in plaats van alleen alle alinea's op die manier te definiëren. Op deze manier, als we besluiten dat we een alinea willen hebben zonder een gele bovenste lijn, kunnen we de class="topline" in de alinea-tag gewoon weglaten en zal de bovenste rand niet meer hebben.
De afbeeldingen stylen
Afbeeldingen hebben meestal een rand eromheen, dit is niet altijd zichtbaar tenzij de afbeelding een link is, maar we willen graag een klasse binnen de CSS-stylesheet die de rand automatisch uitschakelt. Voor deze stylesheet hebben we 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. We wilden dat ze deel uitmaakten van de alinea waarin ze zich bevonden zonder tabellen te gebruiken om ze uit te lijnen. De eenvoudigste manier om dit te doen, is door de CSS-eigenschap float te gebruiken.
Plaats het volgende in uw styles.css-document:
#hoofdafbeelding {
zweven: links;
marge-rechts: 5px;
marge-onder: 15px;
}
.geen grens {
rand: 0px geen;
}
Zoals u kunt zien, zijn er ook marge-eigenschappen ingesteld op de afbeeldingen, om ervoor te zorgen dat ze niet worden verpletterd tegen de zwevende tekst die ernaast in de alinea's staat.
Kijk nu naar uw voltooide pagina
Nadat u uw CSS heeft opgeslagen, kunt u de pagina pets.htm opnieuw laden in uw webbrowser. Uw pagina zou er ongeveer zo uit moeten zien als op deze afbeelding, met afbeeldingen uitgelijnd en de navigatie correct aan de linkerkant van de pagina geplaatst.
Volg dezelfde stappen voor al uw interne pagina's voor deze site. U wilt voor elke pagina in uw navigatie één pagina hebben.