Získajte fakty s týmito tipmi
Všetky webové prehliadače zahŕňajú to, čo je známe ako "nesprávne štýly". Jedná sa o štýly, ktoré diktujú vzhľad a pocit z prvkov HTML pri absencii iných informácií o štýle. Napríklad v takmer každom prehliadači je predvolený vzhľad hypertextových odkazov jasne modrá farba s podčiarknutím. Takto vyzerajú tieto odkazy, pokiaľ im nepoviete, aby sa zobrazovali iným spôsobom.
Predvolené štýly prehliadačov môžu byť užitočné, ale v mnohých prípadoch web dizajnéri chcú odstrániť tieto štýly, aby mohli začať čerstvé so štýlmi, ktoré sú 100% pod kontrolou. To sa deje pomocou toho, čo je známe ako "master stylesheet".
Hlavný štýl listu by mal byť prvý štýl, ktorý voláte vo všetkých dokumentoch. Môžete použiť hlavný štýl, aby ste vylúčili predvolené nastavenia prehliadača, ktoré môžu spôsobiť problémy pri webovom dizajne viacerých prehliadačov. Akonáhle ste vybrali štýly s hlavným štýlom, váš návrh začína na rovnakom mieste vo všetkých prehliadačoch - ako čisté plátno pre maľovanie.
Globálne predvolené hodnoty
Váš hlavný štýl by sa mal začať vynulovaním okrajov, výplní a okrajov stránky. Niektoré webové prehliadače štandardne nastavujú telo dokumentu na 1 alebo 2 pixely odsadené od okrajov okna prehliadača. Toto zabezpečuje, aby všetci zobrazovali to isté:
html, body {margin: 0px; polstrovanie: 0px; okraj: 0px; }Tiež chcete, aby bol font zhodný. Nezabudnite tiež nastaviť veľkosť písma na 100 percent alebo 1 s, aby bola vaša stránka dostupná, ale veľkosť je stále konzistentná. A nezabudnite zahrnúť výšku čiary.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Formátovanie nadpisu
Značky nadpisu alebo hlavičky (H1, H2, H3 atď.) Sú zvyčajne predvolené na tučný text s veľkými okrajmi alebo polstrovaním okolo nich. Odstránením váhy, okrajov a polstrovania sa ubezpečujete, že tieto značky zostávajú väčšie (alebo menšie) ako text okolo nich bez toho, aby mali ďalšie štýly:
h1, h2, h3, h4, h5, h6 (rozpätie: 0; polstrovanie: 0; veľkosť písma: normálna; font-family: Arial, Helvetica, sans-serif; }Možno budete chcieť zvážiť nastavenie špecifických veľkostí, medzery medzi písmenami a paddings na vaše tagy nadpisu, ale skutočne záleží na štýle stránky, ktorú práve navrhujete, a mali by ste zostať z hlavného štýlu. Môžete pridať ďalšie štýly pre tieto položky podľa potreby pre konkrétny dizajn.
Formátovanie obyčajného textu
Okrem nadpisov existujú ďalšie textové značky, ktoré by ste mali byť istí. Jedna sada, ktorú ľudia často zabúdajú, sú značky buniek tabuľky (TH a TD) a vytvárajú značky (SELECT, TEXTAREA a INPUT). Ak ich nenastavíte na rovnakú veľkosť ako text tela a odstavca, môže byť nepríjemne prekvapený, ako to robí prehliadače.
p, th, td, li, dd, dt, ul, ol, blockquote, q, skratka, abbr, a, vstup, select, textarea {margin: 0; polstrovanie: 0; písmo: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Je tiež príjemné uviesť svoje cenové ponuky (BLOCKQUOTE a Q), skratky a skratky trochu viac štýlu, aby vynikli trochu viac:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } skratka, abbr {kurzor: help; okraj spodnej: 1px prerušený; }Odkazy a obrázky
Odkazy sa dajú ľahko spravovať a meniť sa z uvedeného jasne modrého podčiarknutého textu. Dávam prednosť tomu, aby moje odkazy zostali podčiarknuté, ale ak to radšej odlišujete, môžete tieto možnosti nastaviť samostatne. Rovnako nezahŕňam farby v hlavnom štýle, pretože to závisí od dizajnu.
a, a: odkaz, a: navštívil, a: aktívny, a: vznášať {text-decoration: underline; }S obrázkami je dôležité vypnúť hranice. Zatiaľ čo väčšina prehliadačov nezobrazuje okraj okolo obyčajného obrázka, keď je obraz prepojený, prehliadače zapínajú hranicu. Opravte toto:
img {okraj: žiadne; }stoly
Zatiaľ čo tabuľky sa už nepoužívajú na účely usporiadania, stránky ich môžu stále používať na skutočné údaje tabluar. Toto je skvelé použitie tabuliek HTML. Už sme sa uistili, že predvolená veľkosť textu je pre vaše tabuľkové bunky rovnaká, ale existuje niekoľko ďalších štýlov, ktoré by ste mali nastaviť tak, aby zostali rovnaké:
tabuľka {margin: 0; polstrovanie: 0; hranica: žiadna; }formuláre
Rovnako ako u iných prvkov, mali by ste vyčistiť okraje a paddings okolo vašich formulárov. Ďalšia vec, ktorú by som rád urobil, je prepísať značku formulára ako " inline ", aby sa nepridávalo ďalšie miesto, kde umiestnite značku do kódu. Rovnako ako u iných textových prvkov definujem informácie o písme pre výber, textarea a zadanie vyššie, aby bolo to isté ako zvyšok môjho textu.
formulár {margin: 0; polstrovanie: 0; zobrazenie: inline; }Je tiež dobré zmeniť kurzor pre štítky. To pomáha ľuďom vidieť, že štítok niečo urobí, keď na neho kliknú.
štítok {kurzor: ukazovateľ; }Spoločné triedy
V tejto časti štýlu hlavných šablón by ste mali definovať triedy, ktoré vám dávajú zmysel. To sú niektoré z tried, ktoré používam najčastejšie. Upozorňujeme, že nie sú nastavené na žiadny konkrétny prvok, takže ich môžete priradiť všetkým, čo potrebujete:
.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 {zobrazenie: blok; margin-left: auto; margin-right: auto; } / * nezabudnite nastaviť šírku * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; polstrovanie vľavo: 0; }. nomargin {margin: 0; }. nepovolenie {padding: 0; } .nobullet {style-list: none; zoznam-štýl-obrázok: žiadny; }Nezabudnite, že pretože tieto triedy sú napísané pred akýmikoľvek inými štýlmi a sú to len triedy, je ľahké ich prepísať so špecifickými vlastnosťami štýlu, ktoré sa objavia neskôr v kaskáde . Ak zistíte, že nastavíte spoločnú triedu na prvok a neuplatní sa, mali by ste skontrolovať, či nie je v jednom z vašich neskorších štýlov, ktoré majú vplyv na ten istý prvok, iný štýl.
Celý Master Stylesheet
/ * Globálne predvolené hodnoty * / html, body {margin: 0px; polstrovanie: 0px; okraj: 0px; } telo {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Titulky * / h1, h2, h3, h4, h5, h6 {margin: 0; polstrovanie: 0; veľkosť písma: normálna; font-family: Arial, Helvetica, sans-serif; } / * Textové štýly * / p, th, td, li, dd, dt, ul, ol, blockquote, q, skratka, abbr, a, vstup, select, textarea {margin: 0; polstrovanie: 0; písmo: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } skratka, abbr {kurzor: help; okraj spodnej: 1px prerušený; } malý {font-size: .85em; veľká {font-size: 1.2m; } / * Odkazy a obrázky * / a, a: odkaz, a: navštívil, a: aktívny, a: vznášať {text-decoration: underline; } img {okraj: žiadne; } / * Tabuľky * / tabuľka {margin: 0; polstrovanie: 0; hranica: žiadna; } / * Formuláre * / formulár {margin: 0; polstrovanie: 0; zobrazenie: inline; } štítok {kurzor: ukazovateľ; } / * Spoločné triedy * / .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 {zobrazenie: blok; margin-left: auto; margin-right: auto; } / * nezabudnite nastaviť šírku * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; polstrovanie vľavo: 0; }. nomargin {margin: 0; }. nepovolenie {padding: 0; } .nobullet {style-list: none; zoznam-štýl-obrázok: žiadny; }Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 10/6/17