Inhoud
- Definieer de basisstijlen op elke website die u maakt
- CSS en de tekenset
- Het paginabody vormgeven
- Standaard lettertypestijlen
- Krantenkoppen
- Vergeet de links niet
- Volledig stijlblad
Definieer de basisstijlen op elke website die u maakt
Wanneer u een website helemaal opnieuw bouwt, is het slim om te beginnen met de gedefinieerde basisstijlen. Het is alsof je begint met een schoon canvas en verse borstels. Een van de eerste problemen waarmee webontwerpers worden geconfronteerd, is dat webbrowsers allemaal verschillend zijn. De standaard lettertypegrootte verschilt van platform tot platform, de standaard lettertypefamilie is anders, sommige browsers definiëren marges en opvulling op de body-tag, andere niet, 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, zijn sommige mogelijk gelokaliseerd - aangepast voor verschillende taalkundige en culturele context. Wanneer dat het geval is, vereenvoudigt utf-8 het proces. Het instellen van de tekenset in het externe stijlblad heeft geen voorrang op een HTTP-header, maar in alle andere situaties wel.
Het is gemakkelijk om de karakterset in te stellen. Schrijf voor de eerste regel van het CSS-document:
@charset "utf-8";
Op deze manier zal het stijlblad nog steeds correct werken als u internationale tekens gebruikt in de inhoudseigenschap of als klasse- en ID-namen.
Het paginabody vormgeven
Het volgende dat een standaard stylesheet nodig heeft, zijn stijlen om marges, opvulling en randen op nul te zetten. 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, body {
marge: 0px;
opvulling: 0px;
border: 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, maakt het hebben van deze standaardkleuren op de body en HTML-tag in eerste instantie de pagina gemakkelijker te lezen en te gebruiken.
html, body {
kleur: # 000;
achtergrond: #fff;
}
Standaard lettertypestijlen
De lettergrootte en lettertypefamilie zullen onvermijdelijk veranderen zodra het ontwerp van kracht wordt, maar beginnen met een standaardlettergrootte van 1em en een standaardlettertypefamilie 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, body, p, th, td, li, dd, dt {
lettertype: 1em Arial, Helvetica, schreefloos;
}
Er kunnen andere plaatsen zijn waar u tekst kunt vinden, maar p, th, 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 lettertypekeuzes als u alleen uw lettertypen voor de HTML of body definieert.
Krantenkoppen
HTML-koppen zijn belangrijk om te gebruiken om uw site overzichtelijk te maken en zoekmachines dieper in uw site te laten doordringen. Zonder stijlen zijn ze allemaal tamelijk lelijk, dus stel op alle stijlen standaardstijlen in en definieer de lettertypefamilie en de lettergroottes voor elk.
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
Vergeet de links niet
Het opmaken 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 een van de pseudoklassen vergeet. Definieer ze met een kleine variatie op blauw en verander ze dan zodra je het kleurenpalet voor de site hebt gedefinieerd.
Om de links in blauwtinten in te stellen, stelt u in:
- koppelingen zo blauw
- bezochte links als donkerblauw
- zwevende links als lichtblauw
- actieve links als nog bleker blauw
Zoals getoond in dit voorbeeld:
a: link {color: # 00f; }
a: bezocht {kleur: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }
Door de links te stylen met een vrij onschadelijk kleurenschema, zorgt het ervoor dat je geen van de lessen vergeet en maakt het ze ook iets minder luid dan het standaard blauw, rood en paars.
Volledig stijlblad
Hier is het volledige stijlblad:
@charset "utf-8";
html, body {
marge: 0px;
opvulling: 0px;
border: 0px;
kleur: # 000;
achtergrond: #fff;
}
html, body, p, th, td, li, dd, dt {
lettertype: 1em Arial, Helvetica, schreefloos;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
a: link {color: # 00f; }
a: bezocht {kleur: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }
