Aconsegueixi els fets amb aquests consells
Tots els navegadors web inclouen el que es coneix com a "estils predeterminats". Són estils que dicten l'aspecte dels elements HTML en absència d'informació d'estil. Per exemple, en gairebé tots els navegadors, l'aspecte predeterminat dels hipervincles és un color blau brillant amb subratllat. Així és com es veuen aquests enllaços tret que els digui que es mostren d'una manera diferent.
Els estils de navegació predeterminats poden ser útils, però en molts casos, els dissenyadors web volen eliminar aquests estils perquè puguin començar amb estils nous que són controlats al 100%. Això es fa amb el que es coneix com a "full d'estils mestre".
Un full d'estils mestre ha de ser el primer full d'estil que truqueu a tots els vostres documents. Utilitzeu un full d'estils mestre per esborrar la configuració predeterminada del navegador que pot causar problemes en el disseny web de diversos navegadors. Una vegada que hàgiu eliminat els estils amb un full d'estils mestre, el disseny comença des del mateix lloc en tots els navegadors, com ara un llenç net per pintar.
Valors predeterminats globals
El vostre full d'estils mestre hauria de començar desglossant els marges, els remants i les vores de la pàgina. Alguns navegadors web predeterminats del cos del document a 1 o 2 píxels sagnats des de les vores del panell del navegador. Això assegura que tots mostrin el mateix:
html, body {margin: 0px; farcit: 0px; frontera: 0 px; }També voleu que la font sigui coherent. Assegureu-vos també d'establir la mida del tipus de lletra al 100% o 1em, de manera que la vostra pàgina sigui accessible, però la mida encara és coherent. I assegureu-vos d'incloure l'alçada de la línia.
cos {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Format de títol
Les etiquetes de capçalera o capçalera (H1, H2, H3, etc.) normalment són predeterminades per al text en negreta amb marges grans o farcit al voltant d'ells. En netejar el pes, els marges i el farcit, assegureu-vos que aquestes etiquetes continuen sent més grans (o més petites) que el text que les envolta sense tenir estils addicionals:
h1, h2, h3, h4, h5, h6 {margin: 0; farcit: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }És possible que vulgueu considerar establir mides específiques, espais entre lletres i farcit a les etiquetes de titular, però això depèn en gran mesura de l'estil del lloc que esteu dissenyant i que s'hauria de deixar fora del full d'estil mestre. Podeu afegir més estils per a aquests encapçalaments segons sigui necessari per al vostre disseny específic.
Format de text sense format
Més enllà dels titulars, hi ha altres etiquetes de text que us heu d'assegurar de netejar. Un conjunt que moltes vegades oblida són les etiquetes de les cel·les de taula (TH i TD) i les etiquetes de formulari (SELECT, TEXTAREA i INPUT). Si no configureu aquests de la mateixa mida que el text del cos i del paràgraf, és possible que us sorprengueu desagradable el rendiment dels navegadors.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; farcit: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }També és bo donar una mica més les vostres cites (BLOCKQUOTE i Q), sigles i abreviatures d'un estil poc més, de manera que es destaquen una mica més:
blockquote {margin: 1.25em; farcit: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; frontera inferior: 1px traçat; }Enllaços i imatges
Els enllaços són fàcils de gestionar i canviar d'aquest text subratllat blau brillant esmentat anteriorment. Prefereixo sempre que els meus enllaços segueixin subratllats, però si ho prefereixes d'una manera diferent, pots configurar aquestes opcions per separat. A més, no incloïo colors al full d'estil mestre, ja que depèn del disseny.
a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }Amb imatges, és important desactivar les fronteres. Tot i que la majoria dels navegadors no mostren un límit al voltant d'una imatge senzilla, quan la imatge està enllaçada, els navegadors activen la vora. Per arreglar-ho:
img {border: none; }Taules
Mentre que les taules ja no s'utilitzen per a finalitats de disseny, el vostre lloc encara els pot utilitzar per obtenir dades actuals de tabluar. Aquest és un bon ús de les taules HTML. Ja ens hem assegurat que la mida predeterminada del text sigui la mateixa per a les cel·les de la taula, però hi ha alguns altres estils que haureu d'establir perquè les taules siguin iguals:
taula {marge: 0; farcit: 0; frontera: cap; }Formes
Igual que amb altres elements, haureu d'esborrar els marges i els remeis dels vostres formularis. Una altra cosa que m'agrada fer és reescriure l'etiqueta del formulari com a " en línia " perquè no afegeixi espai extra on col·loqueu l'etiqueta al codi. Igual que amb altres elements de text, definiria la informació de tipus de lletra per seleccionar, textar i entrar a dalt, de manera que sigui el mateix que la resta del meu text.
forma {marge: 0; farcit: 0; visualització: en línia; }També és una bona idea canviar el cursor per a les etiquetes. Això ajuda a la gent a veure que l'etiqueta farà alguna cosa quan la faci clic.
etiqueta {cursor: punter; }Classes comunes
Per a aquesta part del full d'estils del màster, heu de definir classes que us donin sentit. Aquestes són algunes de les classes que utilitzo amb més freqüència. Tingueu en compte que no estan configurats en cap element concret, de manera que podeu assignar-los al que necessiteu:
.clear {clar: tots dos; } .floatLeft {float: left; } .floatRight {float: right; }. textLeft {text-align: left; } .textRight (text align: right; } .textCenter {text-align: center; }. textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; marge-dret: automàtic; } / * recordeu d'establir l'amplada * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding (padding: 0; } .nobullet {list-style: none; llista-estil-imatge: cap; }Recordeu que a causa de que aquestes classes s'escriuen abans que altres estils i només són classes, són fàcils de substituir amb propietats d'estil més específiques que es produeixen més endavant a la cascada . Si trobeu que definiu una classe comuna en un element i no tingui efecte, haureu de comprovar que no hi hagi cap altre estil en un dels seus fulls d'estil posteriors que afectin aquest mateix element.
Full d'estils del full complet
/ * Valors globals globals * / html, body {margin: 0px; farcit: 0px; frontera: 0 px; } cos {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Titulars * / h1, h2, h3, h4, h5, h6 {margin: 0; farcit: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Estils de text * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; farcit: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; farcit: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; frontera inferior: 1px traçat; } small {font-size: .85em; } big {font-size: 1.2em; } / * Enllaços i imatges * / a, a: link, a: visited, a: active, a: hover {text-decoration: underline; } img {border: none; } / * Taules * / table {margin: 0; farcit: 0; frontera: cap; } / * Forms * / form {margin: 0; farcit: 0; visualització: en línia; } etiqueta {cursor: punter; } / * Classes comunes * / .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: block; margin-left: auto; marge-dret: automàtic; } / * recordeu d'establir l'amplada * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding (padding: 0; } .nobullet {list-style: none; llista-estil-imatge: cap; }Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/10/17