Ia faptele cu aceste sfaturi
Toate browserele web includ ceea ce este cunoscut ca "stiluri defaudiale". Acestea sunt stiluri care dictează aspectul elementelor HTML în absența oricărei alte informații despre stil. De exemplu, în aproape fiecare browser, aspectul implicit al hyperlink-urilor este o culoare albastră strălucitoare, cu o subliniere. Acesta este modul în care arată aceste linkuri, cu excepția cazului în care îi spuneți să se afișeze într-un mod diferit.
Stilurile prestabilite ale browserului pot fi utile, însă, în multe cazuri, designerii web doresc să elimine aceste stiluri astfel încât să poată începe să fie proaspete cu stiluri pe care le controlează în mod 100%. Acest lucru se face folosind ceea ce se numește "foaie de stil master".
O foaie de stil master ar trebui să fie prima foaie de stil pe care o apelați în toate documentele. Utilizați o foaie de stil principală pentru a șterge setările prestabilite ale browserului, care pot cauza probleme în designul Web încrucișat. După ce ați scos stilurile cu o foaie de stil master, designul dvs. începe din același loc în toate browserele - ca o pânză curată pentru pictura.
Setări implicite globale
Foaia dvs. de stil master ar trebui să înceapă prin eliminarea marginilor, a zidurilor și a marginilor de pe pagină. Unele browsere web definesc corpul documentului la 1 sau 2 pixeli indentați de marginile ferestrei browserului. Acest lucru vă asigură că toate acestea sunt afișate la fel:
html, corp {margine: 0px; padding: 0px; frontieră: 0px; }De asemenea, doriți să faceți coerența fontului. Asigurați-vă că setați de asemenea dimensiunea fontului la 100% sau 1EM, astfel încât pagina dvs. să fie accesibilă, dar dimensiunea este în continuare consistentă. Și asigurați-vă că includeți înălțimea liniei.
corp {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Headline Formatting
Titlurile de antet sau de antet (H1, H2, H3, etc.) sunt de obicei implicite la text îngroșat, cu margini mari sau în jurul lor. Prin eliminarea greutății, a marjelor și a polilor, vă asigurați că aceste etichete rămân mai mari (sau mai mici) decât textul din jurul lor, fără a avea stiluri suplimentare:
h1, h2, h3, h4, h5, h6 {marja: 0; umplutura: 0; font-weight: normal; font-familie: Arial, Helvetica, sans-serif; }S-ar putea să doriți să luați în considerare setarea anumitor dimensiuni, spațierea literelor și paddings la tag-urile dvs. de titlu, însă aceasta depinde într-adevăr de stilul site-ului pe care îl proiectați și ar trebui să fie lăsat în afara foii de stil master. Puteți adăuga mai multe stiluri pentru aceste rubrici, după cum este necesar pentru designul dvs. specific.
Formatul textului simplu
Dincolo de titluri, există și alte etichete de text pe care trebuie să le ștergeți. Un set pe care oamenii uită adesea etichetele pentru celulele tablei (TH și TD) și formează etichetele (SELECT, TEXTAREA și INPUT). Dacă nu le setați pe aceleași dimensiuni ca și corpul și textul paragrafului, puteți fi surprinși neplăcut de modul în care le oferă browserele.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronim, abbr, a, input, select, textarea {marja: 0; umplutura: 0; font: normală normală normală 1em / 1.25 Arial, Helvetica, sans-serif; }Este, de asemenea, drăguț să vă oferți cotațiile (BLOCKQUOTE și Q), acronimele și abrevierile un pic mai mult stil, astfel încât acestea să iasă în evidență mai mult:
blocaj {marja: 1.25em; padding: 1.25em} q {font-style: italic; } acronim, abbr {cursor: help; frontieră-jos: 1px întreruptă; }Link-uri și imagini
Link-urile sunt ușor de gestionat și de schimbat de la acel text subliniat, albastru strălucitor. Prefer să fiu mereu subliniată legăturile mele, dar dacă o preferi într-un mod diferit, poți seta separat aceste opțiuni. De asemenea, nu includ culorile în foaia de stil de masterat, deoarece depinde de design.
a, a: link, a: vizitat, a: activ, a: hover {text-decoration: underline; }Cu imagini, este important să dezactivați marginile. În timp ce majoritatea browserelor nu afișează o margine în jurul unei imagini simple, atunci când imaginea este legată, browserele pornesc marginea. Pentru a repara acest lucru:
img {border: none; }Mese
În timp ce tabelele nu mai sunt utilizate în scopuri de aspect, site-ul le poate utiliza în continuare pentru date tabluare reale. Aceasta este o utilizare fină a tabelelor HTML. Ne-am asigurat deja că dimensiunea implicită a textului este aceeași pentru celulele dvs. de masă, dar există și alte câteva stiluri pe care ar trebui să le setați astfel încât mesele dvs. să rămână neschimbate:
tabel {marja: 0; umplutura: 0; frontieră: nici una; }Formulare
Ca și în cazul altor elemente, ar trebui să eliminați marginile și colțurile din jurul formularelor. Un alt lucru pe care mi-ar plăcea este să rescrieți eticheta de formular ca " inline ", astfel încât să nu se adauge un spațiu suplimentar în locul în care plasați eticheta în cod. Ca și în cazul altor elemente de text, definim informațiile despre fonturi pentru selectare, textarea și introducerea de mai sus, astfel încât acestea să fie identice cu restul textului meu.
forma {marja: 0; umplutura: 0; afișare: inline; }Este, de asemenea, o idee bună să modificați cursorul pentru etichetele dvs. Acest lucru îi ajută pe oameni să vadă că eticheta va face ceva atunci când o fac clic.
etichetă {cursor: pointer; }Cursuri comune
Pentru această parte a foii de stil master, ar trebui să definiți clasele care vă sunt sensibile. Acestea sunt câteva din clasele pe care le folosesc cel mai des. Rețineți că acestea nu sunt setate la un anumit element, astfel încât să le puteți atribui oricăror lucruri de care aveți nevoie:
.clear {clar: ambele; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-aliniere: stânga; } .textRight {text-align: right; } .textCenter {text-aliniere: centru; } .textJustificare {text-align: justify; } .blockCenter {display: block; margin-stânga: auto; margin-dreapta: auto; } / * nu uitați să setați lățimea * / .bold {font-weight: bold; } .ital {font-style: italic; } .underline {text-decorare: subliniere; } .noindent {margin-left: 0; padding-left: 0; } .omargin {margine: 0; } .nopadding {padding: 0; } .nobullet {style-list: none; listă-stil-imagine: nici unul; }Amintiți-vă că deoarece aceste clase sunt scrise înainte de orice alte stiluri și sunt doar clase, ele pot fi ușor de suprasolicitat cu proprietăți de stil mai specifice care apar mai târziu în cascadă . Dacă găsiți că ați stabilit o clasă comună pe un element și nu are efect, ar trebui să verificați dacă nu există un alt stil într-unul din foile de stil de mai târziu care afectează același element.
Întreaga foaie de stil Master
/ * Valori implicite globale * / html, body {margin: 0px; padding: 0px; frontieră: 0px; } corp {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Titluri * / h1, h2, h3, h4, h5, h6 {margine: 0; umplutura: 0; font-weight: normal; font-familie: Arial, Helvetica, sans-serif; } / * Stiluri text * / p, th, td, li, dd, dt, ul, ol, bloc, q, acronim, abbr, a, input, select, textarea {marja: 0; umplutura: 0; font: normală normală normală 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {marja: 1.25em; padding: 1.25em} q {font-style: italic; } acronim, abbr {cursor: help; frontieră-jos: 1px întreruptă; } mici {font-size: .85em; } mare {font-size: 1.2; } / * Link-uri și imagini * / a, a: link, a: vizitat, a: activ, a: hover {text-decorare: subliniere; } img {border: none; } / * Tabele * / tabel {margine: 0; umplutura: 0; frontieră: nici una; } / * Formulare * / formula {marja: 0; umplutura: 0; afișare: inline; } etichetă {cursor: pointer; } / * Clase obișnuite * / .clear {clar: ambele; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-aliniere: stânga; } .textRight {text-align: right; } .textCenter {text-aliniere: centru; } .textJustificare {text-align: justify; } .blockCenter {display: block; margin-stânga: auto; margin-dreapta: auto; } / * nu uitați să setați lățimea * / .bold {font-weight: bold; } .ital {font-style: italic; } .underline {text-decorare: subliniere; } .noindent {margin-left: 0; padding-left: 0; } .omargin {margine: 0; } .nopadding {padding: 0; } .nobullet {style-list: none; listă-stil-imagine: nici unul; }Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 10/6/17