Når du bygger et websted fra bunden, er det smart at starte med de grundlæggende stilarter, der er defineret. Det er som at starte med et rent lærred og friske børster. Et af de første problemer, som webdesignere står overfor, er, at webbrowsere er alle forskellige. Standard skrifttypestørrelse er forskellig fra platform til platform, standardfontsfamilien er anderledes, nogle browsere definerer margener og polstring på kropsetiketten, mens andre ikke gør det osv. Omgå disse inkonsekvenser ved at definere standardstile for dine websider.
CSS og tegnsætet
Første ting skal du først indstille tegnsættet af dine CSS-dokumenter til utf-8 . Selvom det er sandsynligt, at de fleste af de sider, du designer, er skrevet på engelsk, kan nogle lokaliseres til en anden sproglig og kulturel sammenhæng. Når de er, forenkler utf-8 processen. Indstilling af tegnsættet i det eksterne stilark har ikke forrang over et HTTP-overskrift, men i alle andre situationer vil det.
Det er nemt at indstille tegnsættet. For den første linje i CSS-dokumentet skriv:
@charset "utf-8";
På denne måde fungerer stilarket stadig korrekt, hvis du bruger internationale tegn i indholdsegenskaben eller som klasse- og id-navne. Den næste ting en standard stilark behov er stilarter til nul ud margener, polstring og grænser. Dette sikrer, at alle browsere placerer indholdet på samme sted, og der er ikke skjulte mellemrum mellem browseren og indholdet. For de fleste websider er dette for tæt på kanten til tekst, men det er vigtigt at starte der, så baggrundsbilleder og layoutafdelinger er opstillet korrekt. html, krop { margin: 0px; polstring: 0px; grænse: 0px; }
Indstil standard forgrunds- eller skriftfarve til sort og standard baggrundsfarve til hvid. Selvom dette sandsynligvis vil ændre sig for de fleste websidedesigner, vil det være lettere at læse og arbejde sammen med disse standardfarver på kroppen og HTML-mærket. html, krop { farve: # 000; baggrund: #fff; } Skrifttypestørrelsen og skrifttypefamilien er noget, der uundgåeligt vil ændre sig, når designet tager fat, men begynder med en standard skrifttypestørrelse på 1em og en standard skrifttypefamilie af Arial, Genève eller en anden sans-serif skrifttype. Brug af ems holde siden så tilgængelig som muligt, og en sans-serif skrifttype er mere læselig på skærmen. html, krop, p, th, td, li, dd, dt { skrifttype: 1em Arial, Helvetica, sans-serif; }
Der kan være andre steder, hvor du måske finder tekst, men p , th , TD , li , dd , og dt er en god start til at definere basis skrifttypen. Omfatte HTML og legeme bare i tilfælde, men mange browsere tilsidesætter skrifttyperne, hvis du kun definerer dine skrifttyper til HTML eller krop. HTML overskrifter er vigtige at bruge til at hjælpe dit websted skitsere og lade søgemaskiner dybere ind i dit websted. Uden stilarter er de alle temmelig grimme, så angiv standardstile på dem alle, og definer skrifttypefamilien og skrifttypestørrelserne for hver. h1, h2, h3, h4, h5, h6 { skrifttype-familie: 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; } Styling af linkfarverne er næsten altid en kritisk del af designet, men hvis du ikke definerer dem i standardstilerne, vil du sandsynligvis glemme mindst en af pseudoklasserne. Definer dem med en lille variation på blå og ændrer dem, når du har farvepaletten til det definerede websted. For at indstille forbindelserne i blå nuancer skal du indstille: som vist i dette eksempel: a: link {farve: # 00f; }a: besøgte {farve: # 009; }a: svever {farve: # 06f; }a: aktiv {farve: # 0cf; }
Ved at stylere forbindelserne med et temmelig uskyldigt farveskema sørger det for, at du ikke glemmer nogen af klasserne og også gør dem lidt mindre højt end standard blå, rød og lilla. Her er det fulde stilark: @charset "utf-8"; html, krop { margin: 0px; polstring: 0px; grænse: 0px; farve: # 000; baggrund: #fff; } html, krop, p, th, td, li, dd, dt { skrifttype: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { skrifttype-familie: 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 {farve: # 00f; } a: besøgte {farve: # 009; } a: svever {farve: # 06f; } a: aktiv {farve: # 0cf; } Styling af sidekroppen
Standard skrifttyper
Overskrifter
Glem ikke linkene
Fuldt stilark
