viernes, 3 de mayo de 2013

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 .

 .              

                                                                           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 .






                                                           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;
}