Wanneer je een website helemaal opnieuw bouwen, is het slim om te beginnen met de gedefinieerde basisstijlen. Het is alsof je begint met een schoon canvas en verse penselen. Een van de eerste problemen waarmee webdesigners worden geconfronteerd, is dat: web browsers zijn allemaal verschillend. De standaardlettergrootte verschilt van platform tot platform, de standaardlettertypefamilie is anders, sommige browsers definiëren marges en opvulling op de body-tag, terwijl andere dat niet doen, enzovoort. Omzeil deze inconsistenties door de standaardstijlen voor uw webpagina's te definiëren.
CSS en de tekenset
Stel eerst de tekenset van uw CSS-documenten in op utf-8. Hoewel het waarschijnlijk is dat de meeste pagina's die u ontwerpt in het Engels zijn geschreven, kunnen sommige gelokaliseerd zijn - aangepast aan een andere taalkundige en culturele context. Als dat zo is, vereenvoudigt utf-8 het proces. De tekenset instellen in de externe stylesheet heeft geen voorrang op een HTTP header, maar in alle andere situaties wel.
Het is gemakkelijk om de tekenset in te stellen. Schrijf voor de eerste regel van het CSS-document:
@charset "utf-8";
Op deze manier, als u internationale tekens gebruikt in de inhoudseigenschap of als klasse- en ID-namen, zal het stijlblad nog steeds correct werken.
De paginatekst stylen
Het volgende dat een standaard stylesheet nodig heeft, zijn stijlen om nul uit marges, opvulling en randen. Dit zorgt ervoor dat alle browsers de inhoud op dezelfde plaats plaatsen en dat er geen verborgen spaties zijn tussen de browser en de inhoud. Voor de meeste webpagina's is dit te dicht bij de rand voor tekst, maar het is belangrijk om daar te beginnen, zodat achtergrondafbeeldingen en lay-outverdelingen correct worden uitgelijnd.
html, lichaam {
marge: 0px;
opvulling: 0px;
rand: 0px;
}
Stel de standaard voorgrond- of letterkleur in op zwart en de standaard achtergrondkleur op wit. Hoewel dit waarschijnlijk zal veranderen voor de meeste webpagina-ontwerpen, zijn deze standaardkleuren ingesteld op de body en HTML-tag maakt de pagina in eerste instantie gemakkelijker om te lezen en mee te werken.
html, lichaam {
kleur: #000;
achtergrond: #fff;
}
Standaard lettertypestijlen
De lettergrootte en lettertypefamilie zijn iets dat onvermijdelijk zal veranderen zodra het ontwerp vasthoudt, maar begin met een standaard lettergrootte van 1 em en een standaard lettertype familie van Arial, Genève of een ander schreefloos lettertype. Het gebruik van ems houdt de pagina zo toegankelijk mogelijk en een schreefloos lettertype is beter leesbaar op het scherm.
html, lichaam, p, th, td, li, dd, dt {
lettertype: 1em Arial, Helvetica, schreefloos;
}
Er kunnen andere plaatsen zijn waar u tekst kunt vinden, maar p, dit, td, li, dd, en dt zijn een goed begin voor het definiëren van het basislettertype. Opnemen HTML en lichaam voor het geval dat, maar veel browsers overschrijven de lettertype keuzes als u uw lettertypen alleen voor de HTML of body definieert.
Krantenkoppen
HTML-koppen zijn belangrijk om te gebruiken om uw site te helpen schetsen en zoekmachines dieper in uw site te laten komen. Zonder stijlen zijn ze allemaal behoorlijk lelijk, dus stel standaardstijlen in op allemaal en definieer de lettertypefamilie en de lettergroottes voor elk.
h1, h2, h3, h4, h5, h6 {
font-familie: Arial, Helvetica, schreefloos;
}
h1 { lettergrootte: 2em; }
h2 { lettergrootte: 1.5em; }
h3 { lettergrootte: 1.2em; }
h4 { lettergrootte: 1.0em; }
h5 { lettergrootte: 0.9em; }
h6 { lettergrootte: 0.8em; }
Vergeet de links niet
Het stylen van de linkkleuren is bijna altijd een cruciaal onderdeel van het ontwerp, maar als u ze niet definieert in de standaardstijlen, is de kans groot dat u ten minste één van de pseudo-klassen vergeet. Definieer ze met een kleine variatie op blauw en verander ze vervolgens zodra je het kleurenpalet voor de site hebt gedefinieerd.
Om de in te stellen links in blauwtinten, set:
- links zo blauw
- bezochte links als donkerblauw
- hover-links zo lichtblauw
- actieve links als nog bleker blauw
Zoals in dit voorbeeld wordt getoond:
een: link { kleur: #00f; }
a: bezocht { kleur: #009; }
a: zweef { kleur: #06f; }
a: actief { kleur: #0cf; }
Door de links te stylen met een vrij onschuldig kleurenschema, zorgt het ervoor dat je geen van de klassen vergeet en maakt het ze ook iets minder luid dan de standaard blauw, rood en paars.
Volledig stijlblad
Hier is het volledige stijlblad:
@charset "utf-8";
html, lichaam {
marge: 0px;
opvulling: 0px;
rand: 0px;
kleur: #000;
achtergrond: #fff;
}
html, lichaam, p, th, td, li, dd, dt {
lettertype: 1em Arial, Helvetica, schreefloos;
}
h1, h2, h3, h4, h5, h6 {
font-familie: Arial, Helvetica, schreefloos;
}
h1 { lettergrootte: 2em; }
h2 { lettergrootte: 1.5em; }
h3 { lettergrootte: 1.2em; }
h4 { lettergrootte: 1.0em; }
h5 { lettergrootte: 0.9em; }
h6 { lettergrootte: 0.8em; }
een: link { kleur: #00f; }
a: bezocht { kleur: #009; }
a: zweef { kleur: #06f; }
a: actief { kleur: #0cf; }