Obter os feitos con estas suxestións
Todos os navegadores web inclúen o que se coñece como "estilos defauly". Estes son estilos que determinan a aparencia dos elementos HTML a falta de calquera outra información de estilo. Por exemplo, en case todos os navegadores o aspecto predeterminado de hipervínculos é unha cor azul brillante con subliñado. Así é como véxanse os enlaces a menos que lles indique que se mostren de forma diferente.
Os estilos de navegación predeterminados poden ser útiles, pero en moitos casos os deseñadores web queren eliminar estes estilos para que poidan comezar de novo cos estilos que controlan ao 100%. Isto faise usando o que se coñece como "folla de estilo principal".
A folla de estilo principal debería ser a primeira folla de estilo que chame en todos os seus documentos. Usa unha folla de estilo mestra para limpar a configuración predeterminada do navegador que pode causar problemas no deseño web cross-browser. Unha vez que despexa os estilos cunha folla de estilo mestra, o seu deseño comeza desde o mesmo lugar en todos os navegadores, como un lenzo limpo para pintar.
Predeterminados globais
A súa folla de estilo mestra debería comezar por descartar as marxes, os remuíños e os bordos na páxina. Algúns navegadores web permiten por defecto o corpo do documento a 1 ou 2 píxeles indentados nos bordos do panel do navegador. Isto asegúrase de que todos mostren o mesmo:
html, corpo {marxe: 0px; padding: 0px; bordo: 0px; }Tamén desexa que a fonte sexa consistente. Asegúrese de tamén configurar o tamaño da fonte a 100 por cento ou 1em, de xeito que a súa páxina sexa accesible, pero o tamaño aínda é consistente. E asegúrese de incluír a altura da liña.
corpo {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Formato de titulares
As etiquetas de título ou de cabeceira (H1, H2, H3, etc.) normalmente son estándar para o texto en negra con grandes marxes ou recheo ao redor. Ao limpar o peso, as marxes e o recheo, asegúrate de que estas etiquetas sigan sendo maiores (ou menores) que o texto ao seu redor sen ter estilos extra:
h1, h2, h3, h4, h5, h6 {marxe: 0; padding: 0; fonte-peso: normal; font-family: Arial, Helvetica, sans-serif; }Podería querer considerar a configuración de tamaños específicos, espazamento de letras e paddings ás etiquetas de título, pero iso depende realmente do estilo do sitio que desexe e debe quedar fóra da folla de estilo mestre. Pode engadir máis estilos a estes títulos segundo o necesario para o seu deseño específico.
Formato de texto plano
Máis aló das titulares, hai outras etiquetas de texto que debes asegurarte de borralas. Un conxunto que a xente adoita esquecer son as etiquetas de táboa de cela (TH e TD) e etiquetas de formulario (SELECT, TEXTAREA e ENTRADA). Se non estableceches o mesmo tamaño que o teu corpo e texto de parágrafo, pode sorprenderse desagradablemente sobre como os navegadores reproducen.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acrónimo, abbr, a, input, select, textarea {margin: 0; padding: 0; fonte: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Tamén é bo darlle as súas citas (BLOCKQUOTE e Q), siglas e abreviaturas un pouco máis de estilo, para que destaquen un pouco máis:
blockquote {marxe: 1.25em; padding: 1.25em} q {font-style: cursiva; } acrónimo, abbr {cursor: help; bordo inferior: 1px trazado; }Ligazóns e imaxes
As ligazóns son fáciles de xestionar e cambiar dende o mencionado texto subliñado azul brillante. Prefiro sempre ter os meus enlaces subliñados, pero se o prefires dun xeito diferente podes configurar estas opcións por separado. Non inclúe tamén cores na folla de estilo mestre, porque iso depende do deseño.
a, a: link, a: visitado, a: active, a: hover {text-decoration: underline; }Con imaxes, é importante desactivar as fronteiras. Aínda que a maioría dos navegadores non mostran un borde ao redor dunha imaxe sinxela, cando a imaxe está ligada, os navegadores acenden o bordo. Para corrixir isto:
img {border: none; }Táboas
Mentres as táboas xa non se usan para fins de deseño, o sitio aínda pode usalos para datos tabluar reais. Este é un bo uso de táboas HTML. Xa nos aseguramos de que o tamaño do texto predeterminado sexa o mesmo para as celas da táboa, pero hai algúns outros estilos que debería establecer para que as táboas sexan iguais:
táboa {marxe: 0; padding: 0; fronteira: ningún; }Formularios
Do mesmo xeito que con outros elementos, debes limpar as marxes e os remos nos teus formularios. Outra cousa que me gustaría facer é reescribir a etiqueta do formulario como " inline " para que non engada espazo extra onde coloque a etiqueta no código. Do mesmo xeito que con outros elementos de texto, defecto a información de fonte para seleccionar, textarea e entrada arriba, de xeito que sexa o mesmo que o resto do meu texto.
forma {marxe: 0; padding: 0; mostrar: en liña; }Tamén é unha boa idea cambiar o cursor das etiquetas. Isto axuda ás persoas a ver que a etiqueta fará algo cando prema nel.
etiqueta {cursor: punteiro; }Clases comúns
Para esta parte da folla de estilo mestra, debes definir clases que teñan sentido. Estas son algunhas das clases que uso con maior frecuencia. Teña en conta que non están configurados en ningún elemento en particular, polo que pode asignalos ao que precise:
.clear {claro: ambos; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustificar {text-align: justify; } .blockCenter {display: block; marxe esquerda: auto; marxe dereita: auto; } / * recorda establecer o ancho * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {marxe: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; lista-estilo-imaxe: ningún; }Lembre que porque estas clases están escritas antes de calquera outro estilo e son só clases, son fáciles de anular con propiedades de estilo máis específicas que se producen máis tarde na fervenza . Se cre que estableceu unha clase común nun elemento e non ten efecto, debería comprobar se non hai outro estilo nun dos seus estilos de estilo posteriores que afecten ese mesmo elemento.
A folla de estilo completa do mestre
/ * Predeterminados globais * / html, corpo {marxe: 0px; padding: 0px; bordo: 0px; } corpo {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Titulares * / h1, h2, h3, h4, h5, h6 {marxe: 0; padding: 0; fonte-peso: normal; font-family: Arial, Helvetica, sans-serif; } / * Estilos de texto * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acrónimo, abbr, a, input, select, textarea {margin: 0; padding: 0; fonte: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: cursiva; } acrónimo, abbr {cursor: help; bordo inferior: 1px trazado; } pequeno {font-size: .85em; } grande {font-size: 1.2em; } / * Ligazóns e imaxes * / a, a: ligazón, a: visitada, a: activa, a: hover {text-decoration: underline; } img {border: none; } / * Táboas * / táboa {marxe: 0; padding: 0; fronteira: ningún; } / * Forms * / form {margin: 0; padding: 0; mostrar: en liña; } etiqueta {cursor: punteiro; } / * Clases comúns * / .clear {claro: ambas; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustificar {text-align: justify; } .blockCenter {display: block; marxe esquerda: auto; marxe dereita: auto; } / * recorda establecer o ancho * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {marxe: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; lista-estilo-imaxe: ningún; }Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 6/17/17