Amikor te honlapot készítsen a semmiből, okos a definiált alapvető stílusokkal kezdeni. Olyan, mintha tiszta vászonnal és friss ecsetekkel kezdhetnénk. Az egyik első probléma, amellyel a webdesignerek szembesülnek, az az webböngészők mind különböznek. Az alapértelmezett betűméret platformonként eltérő, az alapértelmezett betűtípus-család eltérő, egyes böngészők margókat és kitöltést határoznak meg a törzscímkén, míg mások nem, és így tovább. Keresse meg ezeket az ellentmondásokat, meghatározva a weboldalak alapértelmezett stílusait.
CSS és a karakterkészlet
Először állítsa a CSS-dokumentumok karakterkészletét a következőre: utf-8. Bár valószínű, hogy az Ön által tervezett oldalak nagy része angol nyelven íródott, néhányuk lokalizálható - a különböző nyelvi és kulturális kontextushoz igazítva. Amikor vannak, az utf-8 egyszerűsíti a folyamatot. A karakterkészlet beállítása a külső stíluslap nem fog elsőbbséget élvezni egy HTTP fejléc, de minden más helyzetben ez megtörténik.
Könnyű beállítani a karakterkészletet. Írja be a CSS-dokumentum első sorába:
@charset "utf-8";
Ilyen módon, ha nemzetközi karaktereket használ a tartalomtulajdonságban vagy másként osztály és azonosító nevek, a stíluslap továbbra is megfelelően fog működni.
Az oldal törzsének stílusa
Az alapértelmezett stíluslap következő dolga a stílus nullázza a margókat, a betéteket és a szegélyeket. Ez biztosítja, hogy minden böngésző ugyanarra helyezze a tartalmat, és a böngésző és a tartalom között ne legyen rejtett szóköz. A legtöbb weboldal esetében ez túl közel van a szöveg széléhez, de fontos, hogy ott kezdjük, hogy a háttérképek és az elrendezés felosztása megfelelő legyen.
html, body {
margó: 0px;
párnázás: 0px;
határ: 0px;
}
Állítsa az alapértelmezett előtér vagy betűtípus színét feketére, az alapértelmezett háttérszínt pedig fehérre. Bár ez nagy valószínűséggel megváltozik a legtöbb weboldal-tervnél, ezeknek a standard színeknek a beállítása a testen és a HTML címke eleinte megkönnyíti az oldal olvashatóságát és kezelését.
html, body {
szín: # 000;
háttér: #fff;
}
Alapértelmezett betűtípusok
A betűméret és a betűcsalád olyan dolog, amely elkerülhetetlenül megváltozik, amint a design érvényesül, de az alapértelmezett 1-es betűmérettel kezdődik em és alapértelmezett betűtípus család Arial, Genf vagy valami más sans-serif betűtípus. Az ems használata az oldalt a lehető legkönnyebben elérhetővé teszi, a sans-serif betűtípus pedig olvashatóbb a képernyőn.
html, body, p, th, td, li, dd, dt {
betűtípus: 1em Arial, Helvetica, sans-serif;
}
Lehet, hogy más helyeken is talál szöveget, de o, th, td, li, dd, és dt jó kezdet az alap betűtípus meghatározásához. Tartalmazza HTML és test csak abban az esetben, de sok böngésző felülírja a betűtípus választás ha csak a HTML-hez vagy a törzshöz adja meg a betűtípusokat.
Címsorok
HTML fejlécek fontos, hogy segítsen a webhelyének körvonalazásában és a keresőmotorok mélyebb bejutásában az Ön webhelyébe. Stílusok nélkül ezek mind meglehetősen csúnyák, ezért állítson be mindegyikre alapértelmezett stílust, és határozza meg mindegyikhez a betűcsaládot és a betűméretet.
h1, h2, h3, h4, h5, h6 {
font-család: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {betűméret: 1,5em; }
h3 {betűméret: 1,2em; }
h4 {font-size: 1.0em; }
h5 {betűméret: 0,9em; }
h6 {betűméret: 0,8em; }
Ne felejtsd el a linkeket
A link színek stílusa szinte mindig a tervezés kritikus része, de ha nem az alapértelmezett stílusokban definiálja őket, akkor nagy eséllyel elfelejti az egyik álosztályt. Definiálja őket néhány apró változtatással a kék színen, majd változtassa meg őket, amint megkapta a webhely színpalettáját.
A linkek kék árnyalatokban, készlet:
- linkek mint kék
- meglátogatott linkek mint sötétkék
- lebegő linkek mint világoskék
- aktív linkek mint még halványabb kék
Amint az ebben a példában látható:
a: link {color: # 00f; }
a: meglátogatott {color: # 009; }
a: lebeg {szín: # 06f; }
a: aktív {color: # 0cf; }
A linkek meglehetősen ártalmatlan színvilággal történő megformálásával biztosítja, hogy ne felejtsen el egyetlen osztályt sem, és kissé kevésbé hangossá teszi őket, mint az alapértelmezett kék, piros és lila.
Teljes stíluslap
Itt van a teljes stíluslap:
@charset "utf-8";
html, body {
margó: 0px;
párnázás: 0px;
határ: 0px;
szín: # 000;
háttér: #fff;
}
html, body, p, th, td, li, dd, dt {
betűtípus: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-család: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {betűméret: 1,5em; }
h3 {betűméret: 1,2em; }
h4 {font-size: 1.0em; }
h5 {betűméret: 0,9em; }
h6 {betűméret: 0,8em; }
a: link {color: # 00f; }
a: meglátogatott {color: # 009; }
a: lebeg {szín: # 06f; }
a: aktív {color: # 0cf; }