Cuando usted construir un sitio web desde cero, es inteligente comenzar con los estilos básicos definidos. Es como empezar con un lienzo limpio y pinceles nuevos. Uno de los primeros problemas que enfrentan los diseñadores web es que navegadores web son todos diferentes. El tamaño de fuente predeterminado es diferente de una plataforma a otra, la familia de fuentes predeterminada es diferente, algunos navegadores definen márgenes y relleno en la etiqueta del cuerpo, mientras que otros no, y así sucesivamente. Solucione estas inconsistencias definiendo los estilos predeterminados para sus páginas web.
CSS y el conjunto de caracteres
Lo primero es lo primero, configure el conjunto de caracteres de sus documentos CSS en utf-8. Si bien es probable que la mayoría de las páginas que diseñe estén escritas en inglés, algunas pueden estar localizadas, adaptadas para diferentes contextos lingüísticos y culturales. Cuando lo están, utf-8 simplifica el proceso. Establecer el juego de caracteres en el
hoja de estilo externa no tendrá prioridad sobre un HTTP encabezado, pero en todas las demás situaciones, lo hará.Es fácil configurar el juego de caracteres. Para la primera línea del documento CSS, escriba:
@charset "utf-8";
De esta forma, si usa caracteres internacionales en la propiedad de contenido o como nombres de clase e identificación, la hoja de estilo seguirá funcionando correctamente.
Aplicar estilo al cuerpo de la página
Lo siguiente que necesita una hoja de estilo predeterminada son estilos para cero márgenes, relleno y bordes. Esto asegura que todos los navegadores coloquen el contenido en el mismo lugar y que no haya espacios ocultos entre el navegador y el contenido. Para la mayoría de las páginas web, esto está demasiado cerca del borde para el texto, pero es importante comenzar allí para que las imágenes de fondo y las divisiones de diseño estén alineadas correctamente.
html, cuerpo {
margen: 0px;
relleno: 0px;
borde: 0px;
}
Establezca el color de fuente o de primer plano predeterminado en negro y el color de fondo predeterminado en blanco. Si bien esto probablemente cambiará para la mayoría de los diseños de páginas web, tener estos colores estándar establecidos en el cuerpo y Etiqueta HTML al principio hace que la página sea más fácil de leer y trabajar.
html, cuerpo {
color: # 000;
fondo: #fff;
}
Estilos de fuente predeterminados
El tamaño de fuente y la familia de fuentes son algo que cambiará inevitablemente una vez que el diseño se afiance, pero comience con un tamaño de fuente predeterminado de 1 em y un defecto Familia tipográfica de Arial, Ginebra o alguna otra fuente sans-serif. El uso de ems mantiene la página lo más accesible posible y una fuente sans-serif es más legible en la pantalla.
html, cuerpo, p, th, td, li, dd, dt {
fuente: 1em Arial, Helvetica, sans-serif;
}
Puede haber otros lugares donde puede encontrar texto, pero pag, th, td, li, dd, y dt son un buen comienzo para definir la fuente base. Incluir HTML y cuerpo por si acaso, pero muchos navegadores anulan la opciones de fuente si solo define sus fuentes para el HTML o el cuerpo.
Titulares
Encabezados HTML son importantes para ayudar a diseñar el sitio y permitir que los motores de búsqueda se adentren más en él. Sin estilos, todos son bastante feos, así que establezca estilos predeterminados en todos ellos y defina la familia de fuentes y los tamaños de fuente para cada uno.
h1, h2, h3, h4, h5, h6 {
familia de fuentes: Arial, Helvetica, sans-serif;
}
h1 {tamaño de fuente: 2em; }
h2 {tamaño de fuente: 1.5em; }
h3 {tamaño de fuente: 1.2em; }
h4 {tamaño de fuente: 1.0em; }
h5 {tamaño de fuente: 0.9em; }
h6 {tamaño de fuente: 0.8em; }
No olvides los enlaces
Aplicar estilo a los colores de los enlaces es casi siempre una parte fundamental del diseño, pero si no los define en los estilos predeterminados, es probable que olvide al menos una de las pseudoclases. Defínalos con una pequeña variación en azul y luego cámbielos una vez que tenga definida la paleta de colores para el sitio.
Para configurar el Enlaces en tonos de azul, establecer:
- Enlaces como azul
- enlaces visitados como azul oscuro
- enlaces flotantes como azul claro
- enlaces activos como un azul aún más pálido
Como se muestra en este ejemplo:
a: enlace {color: # 00f; }
a: visitado {color: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }
Al diseñar los enlaces con un esquema de color bastante inocuo, se asegura de que no olvidará ninguna de las clases y también las hace un poco menos ruidosas que el azul, el rojo y el morado predeterminados.
Hoja de estilo completa
Aquí está la hoja de estilo completa:
@charset "utf-8";
html, cuerpo {
margen: 0px;
relleno: 0px;
borde: 0px;
color: # 000;
fondo: #fff;
}
html, cuerpo, p, th, td, li, dd, dt {
fuente: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
familia de fuentes: Arial, Helvetica, sans-serif;
}
h1 {tamaño de fuente: 2em; }
h2 {tamaño de fuente: 1.5em; }
h3 {tamaño de fuente: 1.2em; }
h4 {tamaño de fuente: 1.0em; }
h5 {tamaño de fuente: 0.9em; }
h6 {tamaño de fuente: 0.8em; }
a: enlace {color: # 00f; }
a: visitado {color: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }