A Cascading stíluslapok áttekintése minta stíluslap segítségével
Ha weboldalt épít a semmiből, okos az alapértelmezett stílusok megkezdésével. Olyan ez, mintha egy tiszta vászonból és friss kefékből kezdene. Az egyik első probléma, hogy a webes tervezők szembesülnek, hogy a webböngészők mind különbözőek. Az alapértelmezett betûméret különbözik a platformtól a platformig, az alapértelmezett betûkészlet különbözõ, egyes böngészõk definiálják a margókat és a párnázást a testtáblán, míg mások nem, és így tovább. Keresse meg ezeket az ellentmondásokat az internetes oldalak alapértelmezett stílusainak meghatározásával.
CSS és a karakterkészlet
Elsőként először állítsd be a CSS dokumentumok karakterkészletét utf-8-ra . Bár valószínű, hogy a tervezett oldalak nagy része angol nyelven van írva, egyesek lehetnek lokalizálva - a különböző nyelvi és kulturális környezethez igazítva. Amikor ez utf-8 leegyszerűsíti a folyamatot. A külső stíluslapon lévő karakterkészlet beállítása nem fog elsőbbséget élvezni egy HTTP fejléccel szemben , de minden más helyzetben.
Könnyű beállítani a karakterkészletet. A CSS dokumentum első sorában írd be:
@charset "utf-8";Így, ha nemzetközi karaktereket használ a tartalomban, vagy osztály- és azonosítónevekként, akkor a stíluslap továbbra is megfelelően működik.
Az oldal testének kialakítása
A következő dolog, amire az alapértelmezett stíluslapra szükség van, a stílusok a margók, a kitöltés és a határok leküzdésére szolgálnak. Ez biztosítja, hogy minden böngésző ugyanarra a helyre helyezi a tartalmat, és a böngésző és a tartalom között nincs rejtett terület. A legtöbb weboldal esetében ez túl közel van a szöveg széléhez, de fontos, hogy ott elinduljon, így a háttérképek és az elrendezésosztályok rendben vannak.
html, body {margin: 0px; párnázottság: 0px; határ: 0px; }Állítsa az alapértelmezett előtér vagy a betűtípus színét feketere, és az alapértelmezett háttérszínt fehérre. Bár ez nagy valószínűséggel megváltozik a legtöbb weboldalon, mivel ezek a szabványos színek a testen és a HTML-címkén állnak , előbb az oldal könnyebben olvasható és működik.
html, body {color: # 000; háttér: #fff; }Alapértelmezett betűtípus stílusok
A betűméret és a betűtípus család olyan dolgot jelent, amely elkerülhetetlenül megváltozik, miután a design megragad, de kezdődik az alapértelmezett betűméret 1 em és az alapértelmezett Arial, Geneva vagy egy másik sans-serif betűtípus. Az ems használata az oldalat annyira hozzáférhetővé teszi, és a sans-serif betűtípus olvashatóbb a képernyőn.
html, test, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Lehetnek olyan helyek is, ahol szöveget találhat, de a p , th , td , li , dd és dt egy jó kiindulási pont az alap betűkészlet meghatározásához. Ha HTML-ben és testben is szerepel, akkor sok böngésző felülírja a betűtípus-választásokat, ha csak a HTML vagy a testhez tartozó betűtípusokat határozza meg.
Aktualitások
A HTML-címek fontosak ahhoz, hogy segítsenek webhelyének körvonalazásában, és hagyják, hogy a keresőmotorok mélyebben bejussanak a webhelyére. Stílusok nélkül, mindegyikük meglehetősen csúnya, ezért állítsa be az alapértelmezett stílusokat mindegyikükre, és határozza meg a betűtípuscsaládot és a betűméreteket mindegyik számára.
h1, h2, h3, h4, h5, h6 {font-család: Arial, Helvetica, sans-serif; } h1 {betűméret: 2em; } h2 {betűméret: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {betűméret: 0.8em; }Ne felejtsd el a linkeket
A linkszínek kialakítása szinte mindig kritikus része a designnak, de ha nem definiálod őket az alapértelmezett stílusokban, valószínű, hogy elfelejted legalább az ál-osztályokat. Határozzuk meg őket kicsi kis változattal, majd változtassuk meg őket, miután megadta a megadott színpaletta használatát.
A kék színárnyalatok beállításához állítsa be:
- linkek kék
- látogatott linkeket sötétkék
- húzza át a kapcsolatokat világoskékként
- aktív kapcsolatokat még világosabb kék
amint azt a példa mutatja:
a: link {color: # 00f; } a: visited {color: # 009; } a: ugrás {color: # 06f; } a: aktív {color: # 0cf; } Azáltal, hogy a kapcsolatokat meglehetősen ártatlan színsémával rendezi, biztosítja, hogy ne felejtsek el minden osztályt, és egy kicsit kevésbé hangos, mint az alapértelmezett kék, piros és lila.Teljes stíluslap
Itt van a teljes stíluslap:
@charset "utf-8"; html, body {margin: 0px; párnázottság: 0px; határ: 0px; szín: # 000; háttér: #fff; } html, test, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-család: Arial, Helvetica, sans-serif; } h1 {betűméret: 2em; } h2 {betűméret: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {betűméret: 0.8em; } a: link {color: # 00f; } a: visited {color: # 009; } a: ugrás {color: # 06f; } a: aktív {color: # 0cf; }