Ismerd meg a tényeket ezekkel a tippekkel
Minden web böngésző tartalmazza az úgynevezett "alapértelmezett stílusokat". Ezek olyan stílusok, amelyek bármely más stílusinformáció hiányában diktálják a HTML elemek megjelenését és érzését. Például, szinte minden böngészőben a hiperhivatkozások alapértelmezett megjelenése világos kék színű, aláhúzással. Így néz ki ezek a linkek, hacsak nem azt mondja meg nekik, hogy más módon jelenjenek meg.
Az alapértelmezett böngészőstílusok hasznosak lehetnek, de sok esetben a webes tervezők el akarják távolítani ezeket a stílusokat, hogy új stílusokkal kezdjenek, amelyek 100% -ban irányíthatók. Ezt a "master stíluslap" néven ismerjük el.
A mester stíluslap legyen az első olyan stíluslap, amelyet az összes dokumentumban hív. A mester stíluslap használatával törölheti az alapértelmezett böngészõbeállításokat, amelyek problémákat okozhatnak a böngészõböngészõben. Miután törölte a stílusokat egy master stíluslap segítségével, a design ugyanabból a helyből indul el minden böngészőben - például egy tiszta vásznat a festéshez.
Globális alapértékek
A mesterek stíluslapjának el kell kezdődnie az oldal margóinak, szegélyeinek és szegélyeinek nullázásával . Néhány webböngésző alapértelmezés szerint a dokumentum testét 1 vagy 2 képpontra bontja a böngésző ablaktáblájából. Ez biztosítja, hogy mindegyik megjelenjen:
html, body {margin: 0px; párnázottság: 0px; határ: 0px; }A betűtípust is meg kell őrizni. Győződjön meg róla, hogy a betűméretet 100 százalékra vagy 1em-re állítja, így az oldal elérhető, de a mérete továbbra is konzisztens. És győződjön meg róla, hogy a sor magasságát is tartalmazza.
test {font: 1em / 1,25 Arial, Helvetica, sans-serif; }Headline formázás
A fejléc vagy a fejléc címkéi (H1, H2, H3 stb.) Jellemzően vastag betűméretű szövegek, amelyek nagy margókat tartalmaznak vagy körülötte vannak. A súly, a margók és a párnázás törlésével biztosítja, hogy ezek a címkék még mindig nagyobbak (vagy kisebbek), mint az őket körülvevő szöveg, anélkül, hogy extra stílusok lennének:
h1, h2, h3, h4, h5, h6 {margin: 0; párnázottság: 0; font súly: normál; betűtípus-család: Arial, Helvetica, sans-serif; }Érdemes fontolóra venni konkrét méretek, levélközponthoz és paddings címsorokhoz való hozzárendelését, de ez valóban attól függ, hogy milyen tervezett webhely stílusa van, és ki kell hagyni a master stíluslapból. Több stílusot is hozzáadhat ezekhez a fejlécekhez, amire szükség van az Ön konkrét terveihez.
Egyszerű szöveg formázás
A főcímeken túl más szöveges címkék is vannak, amelyeket biztosan törölni kell. Az egyik olyan csoport, amelyet az emberek gyakran elfelejtenek, az asztali cella-címkék (TH és TD) és űrlapkódok (SELECT, TEXTAREA és INPUT). Ha nem állítja be a testével és a bekezdés szövegével megegyező méretűeket, kellemetlenül meglephet, hogy a böngészők hogyan renderelik őket.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; párnázottság: 0; font: normál normál normál 1em / 1.25 Arial, Helvetica, sans-serif; }Az is szép, hogy az Ön idézeteit (BLOCKQUOTE és Q), betűszavakat és rövidítéseket egy kicsit extra stílusban adja meg, hogy kicsit kiemelkedjenek:
blockquote {margin: 1.25em; párnázottság: 1.25em} q {font-style: dőlt; } betűszó, abbr {kurzor: help; szegélyes alj: 1px szaggatott; }Linkek és képek
A linkek könnyen kezelhetők és megváltoztathatók a fent említett világoskék aláhúzott szövegből. Szeretném, ha a linkjeim mindig aláhúztak, de ha más módot szeretne, külön is beállíthatja ezeket a lehetőségeket. Nem is szerepelnek a színek a mester stíluslapon, mert ez a tervezéstől függ.
a, a: link, a: meglátogatott, a: aktív, a: lebeg (text-decoration: underline; }A képekkel fontos, hogy kikapcsolja a határokat. Míg a legtöbb böngésző nem jelenít meg egy sima képet körülvevő szegélyt, amikor a kép kapcsolódik, a böngészők bekapcsolják a határt. A probléma megoldásához:
img {border: none; }asztalok
Bár a táblákat már nem használják elrendezési célokra, a webhely még mindig felhasználhatja őket a tényleges táblázatos adatokhoz. Ez a HTML táblák finom használata. Már megbizonyosodtunk arról, hogy az alapértelmezett szövegméret megegyezik az asztalcelláival, de van néhány olyan stílus is, amelyet úgy kell beállítania, hogy a táblázatok ugyanazok maradjanak:
táblázat {margin: 0; párnázottság: 0; határ: nincs; }Forms
Mint más elemekhez is, ki kell tenned a margókat és a lapokat az űrlapod körül. Egy másik dolog, amit szeretni szeretnék, a formanyomtató " inline " átírása, így nem ad hozzá extra helyet, ahol a kódot a kódba helyezi. A többi szövegelemhez hasonlóan a betűinformációkat a kijelöléshez, a textarea-hoz és a bemenethez fel kell tüntetni, így ugyanaz lesz, mint a szövegem többi része.
form {margin: 0; párnázottság: 0; kijelző: inline; }Szintén jó ötlet a kurzor megváltoztatására a címkéken. Ez segít az embereknek abban, hogy a címke valamit megtegyen, amikor rákattintanak.
címke {kurzor: mutató; }Közös osztályok
A mester stíluslap ezen részében meg kell határoznia az Ön számára értelmes osztályokat . Ezek a leggyakrabban használt osztályok. Ne feledje, hogy nincsenek meghatározott elemek, így mindegyikhez hozzárendelheti azokat, amire szüksége van:
clear clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: blokk; margin-left: automatikus; margin-right: automatikus; } / * ne felejtse el beállítani a szélességet * / .bold {font-weight: bold; } .italic {font-style: dőlt; } .underline {text-decoration: aláhúzás; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: nincs; }Ne feledje, hogy mivel ezek az órák bármely más stílus előtt íródnak, és csak osztályok, könnyű felülbírálni azokat a specifikusabb tulajdonságokat, amelyek később a kaszkádban fordulnak elő. Ha úgy találja, hogy közös elemet állít be egy elemen, és nem lép érvénybe, akkor ellenőrizze, hogy nincs-e más stílus az egyik későbbi stíluslapon, amely ugyanazt az elemet érinti.
A teljes mester stíluslap
/ * Globális alapértelmezések * / html, body {margin: 0px; párnázottság: 0px; határ: 0px; } body {font: 1em / 1,25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; párnázottság: 0; font súly: normál; betűtípus-család: Arial, Helvetica, sans-serif; } / * Szövegstílusok * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; párnázottság: 0; font: normál normál normál 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; párnázottság: 1.25em} q {font-style: dőlt; } betűszó, abbr {kurzor: help; szegélyes alj: 1px szaggatott; } small {font-size: .85em; } big {font-size: 1.2em; } / * Linkek és képek * / a, a: link, a: visited, a: aktív, a: ugrás {text-decoration: aláhúzás; } img {border: none; } / * Táblázatok * / table {margin: 0; párnázottság: 0; határ: nincs; } / * Formák * / form {margin: 0; párnázottság: 0; kijelző: inline; } label {kurzor: mutató; } / * Közös osztályok * / .clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: blokk; margin-left: automatikus; margin-right: automatikus; } / * ne felejtse el beállítani a szélességet * / .bold {font-weight: bold; } .italic {font-style: dőlt; } .underline {text-decoration: aláhúzás; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: nincs; }Jennifer Krynin eredeti cikke. Szerkesztette: Jeremy Girard, 10/6/17