Jak odebrat výchozí styling prohlížeče pomocí šablony stylů

Získejte fakta s těmito tipy

Všechny webové prohlížeče obsahují to, co je známé jako "defaulní styly". Jedná se o styly, které diktují vzhled a pocit prvků HTML bez dalších informací o stylu. Například v téměř každém prohlížeči je výchozí vzhled hypertextových odkazů jasně modrá barva s podtržením. Takto vypadají tyto odkazy, pokud jim neříkáte, že se zobrazují jinak.

Výchozí styly prohlížečů mohou být užitečné, ale v mnoha případech weboví návrháři chtějí tyto styly odstranit, aby mohli začít s čerstvými styly, které mají 100% kontrolu. To se provádí pomocí toho, co je známé jako "styl stylu."

Hlavní stylový list by měl být první stylový list, který voláte ve všech dokumentech. Používáte hlavní stylový list, abyste vymazali výchozí nastavení prohlížeče, které mohou způsobit problémy s webovým designem napříč prohlížečem. Jakmile vymažete styly pomocí šablony stylu master, váš design začíná na stejném místě ve všech prohlížečích - jako čisté plátno pro malování.

Globální výchozí hodnoty

Váš hlavní stylový štáb by měl začínat vynulováním okrajů, výplní a okrajů stránky. Některé webové prohlížeče definují tělo dokumentu na 1 nebo 2 pixely odsazené od okrajů okna prohlížeče. Tím je zajištěno, že všechny zobrazují totéž:

html, tělo {margin: 0px; polstrování: 0px; hranice: 0px; }}

Také chcete, aby byl font shodný. Ujistěte se také, že jste nastavili velikost písma na 100 procent nebo 1 s, takže je stránka přístupná, ale velikost je stále stejná. A nezapomeňte zahrnout výšku řádku.

tělo {font: 1em / 1.25 Arial, Helvetica, sans-serif; }}

Formátování titulků

Značky nadpisů nebo záhlaví (H1, H2, H3 atd.) Jsou standardně nastaveny na tučný text s velkými okraji nebo polstrováním kolem nich. Vyčištěním váhy, okrajů a polstrování se ujistíte, že tyto značky stále zůstávají větší (nebo menší) než text kolem nich, aniž by měly další styly:

h1, h2, h3, h4, h5, h6 (rozpětí: 0; polstrování: 0; font-weight: normální; font-family: Arial, Helvetica, sans-serif; }}

Možná budete chtít zvážit nastavení specifických velikostí, mezery mezi písmeny a paddings na vaše značky nadpisu, ale to skutečně závisí na stylu stránek, které navrhujete, a měli byste z nich vynechat list stylu master. Můžete přidat další styly pro tyto nadpisy podle potřeby pro konkrétní návrh.

Formátování prostého textu

Kromě nadpisů existují další textové značky, které byste měli určitě vyčistit. Jedna sada, kterou lidé často zapomínají, jsou tagy buňky tabulky (TH a TD) a tvoří značky (SELECT, TEXTAREA a INPUT). Pokud je nenastavíte na stejnou velikost jako text těla a odstavce, může být nepříjemně překvapen tím, jak je prohlížeč vykresluje.

p, th, td, li, dd, dt, ul, ol, blockquote, q, zkratka, abbr, a, vstup, select, textarea {margin: 0; polstrování: 0; písmo: normální normální normální 1em / 1.25 Arial, Helvetica, sans-serif; }}

Je také příjemné dát své citace (BLOCKQUOTE a Q), zkratky a zkratky trochu extra styl tak, aby vynikly trochu víc:

blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } zkratka, abbr {kurzor: help; okraj: dolní 1px; }}

Odkazy a obrázky

Odkazy lze snadno spravovat a změnit z výše zmíněného jasně modrého podtrženého textu. Dávám přednost tomu, aby mé odkazy byly stále podtrženy, ale pokud to dáváte přednost jiným způsobem, můžete tyto možnosti nastavit samostatně. Také nezahrnují barvy v hlavičce stylu, protože to závisí na návrhu.

a, a: odkaz, a: navštívil, a: aktivní, a: vznášet {text-decoration: underline; }}

S obrázky je důležité vypnout hranice. Zatímco většina prohlížečů nezobrazuje okraje kolem obyčejného obrazu, když je obraz propojen, prohlížeče zapnou hranici. Opravit toto:

img {okraj: žádný; }}

Tabulky

Zatímco tabulky se již nepoužívají pro účely rozvržení, stránky je mohou stále používat pro skutečná data tabluar. Jedná se o jemné použití tabulek HTML. Už jsme se ujistili, že výchozí velikost textu je pro vaše buňky tabulky stejná, ale existuje několik dalších stylů, které byste měli nastavit tak, aby zůstaly stejné tabulky:

tabulka {margin: 0; polstrování: 0; hranice: žádné; }}

formuláře

Stejně jako u jiných prvků byste měli vyčistit okraje a paddings kolem vašich formulářů. Další věc, kterou mám ráda, je přepsat značku formuláře jako " inline ", aby nedošlo k přidání dalšího místa, kde umístíte značku do kódu. Stejně jako u ostatních textových prvků definuji informace o písmu pro výběr, textarea a zadávání výše, takže je to stejné jako zbytek textu.

forma {margin: 0; polstrování: 0; zobrazení: inline; }}

Je také dobré změnit kurzor pro vaše štítky. To lidem pomáhá vidět, že štítek něco udělá, když na ni kliknou.

štítek {kurzor: ukazatel; }}

Společné třídy

Pro tuto část šablony stylu mistra byste měli definovat třídy, které vám mají smysl. To jsou některé z tříd, které nejčastěji používám. Všimněte si, že nejsou nastaveny na žádný konkrétní prvek, takže je můžete přiřadit k tomu, co potřebujete:

.clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-zarovnání: vlevo; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {zobrazení: blok; margin-left: auto; margin-right: auto; } / * nezapomeňte nastavit šířku * / .bold {font-weight: tučné; } .italic {font-style: italic; } .underline {text-dekorace: podtržení; } .noindent {margin-left: 0; polstrování vlevo: 0; }. nomargin {margin: 0; } .popadání {padding: 0; } .nobullet {style-list: žádný; seznam - styl - obrázek: žádný; }}

Nezapomeňte, že protože tyto třídy jsou psány před jakýmikoli jinými styly a jsou pouze třídami, lze je snadno potlačit konkrétnějšími vlastnostmi stylů, ke kterým dochází později v kaskádě . Pokud zjistíte, že jste na prvku nastavili společnou třídu a neúčinkuje, měli byste zkontrolovat, zda není v jednom z vašich pozdějších stylů ovlivněn stejný prvek jiný styl.

Celý maticový stylový list

/ * Globální výchozí * / html, body {margin: 0px; polstrování: 0px; hranice: 0px; } tělo {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Titulky * / h1, h2, h3, h4, h5, h6 {okraj: 0; polstrování: 0; font-weight: normální; font-family: Arial, Helvetica, sans-serif; } / * Textové styly * / p, th, td, li, dd, dt, ul, ol, blockquote, q, zkratka, abbr, a, vstup, select, textarea {margin: 0; polstrování: 0; písmo: normální normální normální 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } zkratka, abbr {kurzor: help; okraj: dolní 1px; } malý {font-size: .85em; } velký {font-size: 1.2; } / * Odkazy a obrázky * / a, a: odkaz, a: navštívil, a: aktivní, a: vznášet {text-decoration: underline; } img {okraj: žádný; } / * Tabulky * / tabulka {okraj: 0; polstrování: 0; hranice: žádné; } / * Formuláře * / formulář {margin: 0; polstrování: 0; zobrazení: inline; } štítek {kurzor: ukazatel; } / * Společné třídy * / .clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-zarovnání: vlevo; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {zobrazení: blok; margin-left: auto; margin-right: auto; } / * nezapomeňte nastavit šířku * / .bold {font-weight: tučné; } .italic {font-style: italic; } .underline {text-dekorace: podtržení; } .noindent {margin-left: 0; polstrování vlevo: 0; }. nomargin {margin: 0; } .popadání {padding: 0; } .nobullet {style-list: žádný; seznam - styl - obrázek: žádný; }}

Původní článek Jennifer Krynin. Upravil Jeremy Girard dne 10.6.17