Normalize.css

párese que no pero si es importante o una opción fiable incluir este pequeño archivo en nuestra carpeta .
Una alternativa moderna, HTML5 listo para CSS reinicia
Normalize.css hace navegadores muestran los elementos más consistente y de acuerdo con los estándares modernos. Se dirige precisamente sólo los estilos que necesitan normalización.
http://necolas.github.io/normalize.css/
Valor por defecto para definir todo a un mismo tamaño .
listas H1,H2,H3 etc.
por medio de un archivo css .
el archivo lo descargas en este enlace
http://necolas.github.io/normalize.css/
Valor por defecto para definir todo a un mismo tamaño .
listas H1,H2,H3 etc.
por medio de un archivo css .
el archivo lo descargas en este enlace
http://necolas.github.io/normalize.css .
.
Después
Solo hay que colocarlo junto con la carpeta que estamos trabajando
y conectarlos a través de una rutas relativa o directamente desde el html .
Como conectarlo .
<link rel="stylesheet" href="normalize.css">
y
Como trabajar con rutas relativas .
por ejemplo si tengo mi proyecto formado por carpetas y una de ellas es css (donde coloco todo los css )
la ruta relativa es la siguiente .
<link rel="stylesheet" href="css/normalize.css">
y el archivo es este .
Solo tienes que descargarlos desde la web del autor lo coloco por si quieres chequearlo .
Solo tienes que descargarlos desde la web del autor lo coloco por si quieres chequearlo .
Un +1 apoyaría la entrada si te fue de utilidad gracias . ;)
-----------------------------------------------------------------------------------------------------------
/ *! normalize.css v2.1.1 | MIT License | git.io / normalizar * /
/ * ================================================ ==========================
HTML5 definiciones pantalla
================================================== ======================== * /
/ **
* Corregir `` bloquear pantalla no se define en el IE 8/9.
* /
artículo,
a un lado,
detalles,
figcaption,
figura,
pie de página,
cabecera,
hgroup,
principal,
nav,
sección,
Resumen {
display: block;
}
/ **
* Corregir `inline-block` No mostrar definido en IE 8/9.
* /
de audio,
lona,
vídeo {
display: inline-block;
}
/ **
* Evitar los navegadores modernos muestre `audio sin controles.
* Eliminar el exceso de altura en los dispositivos iOS 5.
* /
audio: no (controles []) {
display: none;
Altura: 0;
}
/ **
* Dirección de estilo no está presente en IE 8/9.
* /
[Oculto] {
display: none;
}
/ * ================================================ ==========================
Base
================================================== ======================== * /
/ **
* 1. Color de fondo Prevenir la combinación de colores del sistema que se utiliza en Firefox, IE,
* Y Opera.
* 2. Color del texto prevenir la combinación de colores del sistema que se utiliza en Firefox, IE, y
* Opera.
* 3. Establezca familia de fuentes predeterminada de sans-serif.
* 4. Evite que el tamaño del texto iOS ajustar después del cambio de orientación, sin desactivar
* Ampliación de usuario.
* /
HTML {
background: # fff; / * 1 * /
color: # 000; / * 2 * /
font-family: sans-serif; / * 3 * /
-Ms-text-size-adjust: 100%; / * 4 * /
-Webkit-text-size-adjust: 100%; / * 4 * /
}
/ **
* Eliminar margen predeterminado.
* /
body {
margin: 0;
}
/ * ================================================ ==========================
Enlaces
================================================== ======================== * /
/ **
* Dirección `inconsistencia contorno entre Chrome y otros navegadores.
* /
a: focus {
esquema: delgado puntos;
}
/ **
* Mejorar la legibilidad cuando se centra y del ratón se cernía en todos los navegadores.
* /
un activo,
a: hover {
Esquema: 0;
}
/ * ================================================ ==========================
Tipografía
================================================== ======================== * /
/ **
* La variable Dirección `H1 'font-size y el margen dentro de la sección` `y` artículo `
* Contextos en Firefox 4 +, Safari 5 y Chrome.
* /
h1 {
font-size: 2em;
margen: 0.67em 0;
}
/ **
* Dirección de estilo no está presente en IE 8/9, Safari 5 y Chrome.
* /
abbr [título] {
border-bottom: 1px dotted;
}
/ **
* Dirección de estilo de juego a `` audaces en Firefox 4 +, Safari 5 y Chrome.
* /
b,
strong {
font-weight: bold;
}
/ **
* Dirección de estilo no está presente en Safari 5 y Chrome.
* /
dfn {
font-style: cursiva;
}
/ **
* Diferencias de direcciones entre Firefox y otros navegadores.
* /
hr {
-Moz-box-sizing: Contenido de la caja;
caja de tamaño: el contenido de la caja;
Altura: 0;
}
/ **
* Dirección de estilo no está presente en IE 8/9.
* /
mark {
background: # ff0;
color: # 000;
}
/ **
* Familia de la fuente correcta establece curiosamente en Safari 5 y Chrome.
* /
código,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/ **
* Mejorar la legibilidad del texto con formato previo en todos los navegadores.
* /
pre {
white-space: pre-wrap;
}
/ **
* Establecer los tipos de cotizaciones consistentes.
* /
q {
citas: "\ 201C" "\ 201D" "\ 2018" "\ 2019";
}
/ **
* Dirección inconsistente y variable de tamaño de la letra en todos los navegadores.
* /
pequeña {
font-size: 80%;
}
/ **
* Prevenir `sub` y `apoyo 'afecta' line-height 'en todos los navegadores.
* /
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: línea de base;
}
sup {
top:-0.5em;
}
sub {
inferior:-0.25em;
}
/ * ================================================ ==========================
Contenido incrustado
================================================== ======================== * /
/ **
* Eliminar la frontera cuando dentro de `a` elemento en IE 8/9.
* /
img {
frontera: 0;
}
/ **
* Desbordamiento correcta aparece extrañamente en IE 9.
* /
svg: no (: root) {
overflow: hidden;
}
/ * ================================================ ==========================
Figuras
================================================== ======================== * /
/ **
El margen no está presente en Internet Explorer 8.9 y Safari 5 Dirección.
* /
la figura {
margin: 0;
}
/ * ================================================ ==========================
Formas
================================================== ======================== * /
/ **
* Definir las fronteras consistente, el margen y el relleno.
* /
fieldset {
border: 1px solid # c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/ **
* 1. `El color correcto 'no se hereda en IE 8/9.
* 2. Remueva la curia para que la gente no caiga en ellas si fuera cero fieldsets.
* /
leyenda {
frontera: 0, / * 1 * /
padding: 0; / * 2 * /
}
/ **
* 1. Familia de la fuente correcta no se hereda en todos los navegadores.
* 2. Correcta tamaño de la letra no se hereda en todos los navegadores.
* 3. Márgenes Establecer dirección diferente en Firefox 4 +, Safari 5 y Chrome.
* /
botón,
de entrada,
seleccionar,
textarea {
font-family: inherit; / * 1 * /
font-size: 100%; / * 2 * /
margin: 0; / * 3 * /
}
/ **
* Dirección de Firefox 4 + ajuste `line-height` on `input` con `! 'Importante en
* La hoja de estilo UA.
* /
botón,
input {
line-height: normal;
}
/ **
* Dirección inconsistente 'herencia' text-transform para el botón `` y `seleccione`.
* Todos los demás elementos de control de formulario no heredan text-transform `valores`.
* Corregir `botón` herencia de estilos en Chrome, Safari 5 +, y el IE 8 +.
* Corregir `seleccione` herencia de estilos en Firefox 4 + y Opera.
* /
botón,
seleccione {
text-transform: none;
}
/ **
* 1. Evite el error en WebKit Android 4.0. * Donde (2) destruye nativa `audio`
Controles * y 'vídeo'.
* 2. Incapacidad correcta al hacer clic en los tipos de entrada `estilo` en iOS.
* 3. Mejorar la usabilidad y consistencia de estilo del cursor entre los de tipo imagen
* `` De entrada y otros.
* /
botón,
entrada HTML [type = "button"], / * 1 * /
input [type = "reset"],
input [type = "submit"] {
-Webkit-apariencia: Botón / * 2 * /
cursor: pointer; / * 3 * /
}
/ **
* Re-set cursor predeterminado para los elementos de movilidad reducida.
* /
botón [desactivado],
entrada HTML [desactivado] {
cursor: default;
}
/ **
* 1. Cuadro Dirección dimensionamiento en `content-box 'en IE 8/9.
* 2. Retire el exceso de relleno en IE 8/9.
* /
input [type = "checkbox"],
input [type = "radio"] {
caja de tamaño: frontera-box; / * 1 * /
padding: 0; / * 2 * /
}
/ **
* 1. `Apariencia Dirección` en `searchfield` en Safari 5 y Chrome.
* 2. Dirección `caja de tamaño` en `frontera-box 'en Safari 5 y Chrome
* (Incluya `-moz` a prueba de futuro).
* /
input [type = "search"] {
-Webkit-aspecto: campo de texto; / * 1 * /
-Moz-box-sizing: Contenido de la caja;
-Webkit-box-sizing: Contenido de la caja; / * 2 * /
caja de tamaño: el contenido de la caja;
}
/ **
* Eliminar acolchado interior y el botón de búsqueda cancelar en Safari 5 y Chrome
* En OS X.
* /
input [type = "search"] ::-webkit-search-cancel-botón,
input [type = "search"] ::-webkit-search-decoration {
-Webkit-aspecto: ninguno;
}
/ **
* Eliminar el relleno interior y fronterizo en Firefox 4 +.
* /
Botón ::-moz-focus-interior,
Entrada ::-moz-focus-interior {
frontera: 0;
padding: 0;
}
/ **
* 1. Retire default barra de desplazamiento vertical en IE 8/9.
* 2. Mejorar la legibilidad y la alineación en todos los navegadores.
* /
textarea {
overflow: auto; / * 1 * /
vertical-align: top; / * 2 * /
}
/ * ================================================ ==========================
Tablas
================================================== ======================== * /
/ **
* Eliminar la mayor separación entre celdas de la tabla.
* /
table {
border-collapse: collapse;
border-spacing: 0;
}
Comentarios
Publicar un comentario