'N Oorsig van Cascading Style Sheets Met Voorbeeld Style Sheet
Wanneer jy 'n webwerf van nuuts af opbou, is dit slim om te begin met die basiese style gedefinieer. Dit is soos om te begin met 'n skoon seil en vars borsels. Een van die eerste probleme wat webontwerpers in die gesig staar, is dat webblaaiers almal anders is. Die standaard font grootte verskil van platform tot platform, die standaard font familie is anders. Sommige blaaiers definieer marges en opskrifte op die liggend etiket terwyl ander nie, en so aan. Kry hierdie inkonsekwensies deur die standaardstyle vir jou webblaaie te definieer.
CSS en die karakterset
Eerstens, stel eers die karakterset van u CSS-dokumente op utf-8 . Alhoewel dit waarskynlik is dat die meeste bladsye wat jy ontwerp, in Engels geskryf word, kan sommige gelokaliseer word vir verskillende taalkundige en kulturele konteks. Wanneer dit is, vereenvoudig utf-8 die proses. Die stel van die karakterstel in die eksterne stylblad sal nie voorrang geniet bo 'n HTTP-kop nie , maar in alle ander situasies sal dit.
Dit is maklik om die karakterstel te stel. Vir die eerste reël van die CSS-dokument skryf:
@ Charset "utf-8";Op hierdie manier, as jy internasionale karakters in die inhoudseiendom of as klas- en ID-name gebruik, sal die stylblad steeds korrek werk.
Styl die bladsy liggaam
Die volgende ding wat 'n standaard stylvel benodig, is style om die marges, opvulling en grense te nul. Dit verseker dat alle blaaiers die inhoud op dieselfde plek plaas, en daar is geen verborge spasies tussen die blaaier en die inhoud nie. Vir die meeste webbladsye is dit te naby aan die rand vir teks, maar dit is belangrik om daar te begin sodat agtergrondbeelde en uitlegafdelings korrek opgestel word.
html, liggaam {marge: 0px; vulling: 0px; grens: 0px; }Stel die verstekvoorgrond- of fontkleur in swart en die verstek agtergrondkleur na wit. Alhoewel dit heel waarskynlik vir die meeste webbladontwerpe sal verander, sal die bladsy makliker wees om te lees en werk met hierdie standaard kleure op die liggaam en HTML-tag .
html, liggaam (kleur: # 000; agtergrond: #fff; }Standaard fontstyle
Die fontgrootte en fontfamilie is iets wat onvermydelik sal verander sodra die ontwerp in die wiele ry, maar begin met 'n standaard lettergrootte van 1 em en 'n standaard fontfamilie van Arial, Genève of 'n ander sans-serif font. Die gebruik van ems hou die bladsy so toeganklik as moontlik, en 'n sans-serif font is meer leesbaar op die skerm.
html, liggaam, p, th, td, li, dd, dt (font: 1em Arial, Helvetica, sans-serif; }Daar kan ander plekke wees waar jy teks kan vind, maar p , th , td , li , dd en dt is 'n goeie begin om die basisletter te definieer. Sluit HTML en liggaam net in, maar baie blaaiers ignoreer die fontkeuses as jy net jou lettertipes vir die HTML of liggaam definieer.
nuus
HTML-opskrifte is belangrik om te gebruik om jou werf se uiteensetting te help en soek soekenjins dieper in jou werf. Sonder style, hulle is almal taamlik lelik, so stel standaardstyle op almal en definieer die fontfamilie en die lettergroottes vir elkeen.
h1, h2, h3, h4, h5, h6 (font-familie: Arial, Helvetica, sans-serif; } h1 (font-size: 2em; } h2 (font-grootte: 1.5em; } h3 (font-size: 1.2em; } h4 (font-size: 1.0em; } h5 (font-grootte: 0.9em; } h6 (font-grootte: 0.8em; }Moenie die skakels vergeet nie
Die styl van die skakelkleure is byna altyd 'n kritiese deel van die ontwerp, maar as jy dit nie in die verstekstyle definieer nie, is die kans dat jy minstens een van die pseudoklasse sal vergeet. Definieer hulle met 'n klein variasie op blou en verander hulle sodra jy die kleurpalet vir die gedefinieerde webwerf het.
Om die skakels in skakerings van blou te stel, stel:
- skakels soos blou
- besoek skakels as donkerblou
- hover skakel as ligblou
- aktiewe skakels as selfs ligter blou
soos in hierdie voorbeeld getoon:
a: skakel {kleur: # 00f; } a: besoek {kleur: # 009; } a: hover {kleur: # 06f; } a: aktief {kleur: # 0cf; } Deur die skakels met 'n redelik onskadelike kleurskema te stilmaak, verseker ek dat ek nie van die klasse sal vergeet nie, en maak hulle ook 'n bietjie minder hard as die standaard blou, rooi en pers.Volledige stylblad
Hier is die volledige stylblad:
@ Charset "utf-8"; html, liggaam {marge: 0px; vulling: 0px; grens: 0px; kleur: # 000; agtergrond: #fff; } html, liggaam, p, th, td, li, dd, dt (font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-familie: Arial, Helvetica, sans-serif; } h1 (font-size: 2em; } h2 (font-grootte: 1.5em; } h3 (font-size: 1.2em; } h4 (font-size: 1.0em; } h5 (font-grootte: 0.9em; } h6 (font-grootte: 0.8em; } a: skakel {kleur: # 00f; } a: besoek {kleur: # 009; } a: hover {kleur: # 06f; } a: aktief {kleur: # 0cf; }