comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[SOURCE] Reset CSS

  • 2 Respuestas
  • 1181 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado lotus

  • *
  • Underc0der
  • Mensajes: 5
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
« en: Mayo 26, 2015, 09:59:14 am »
Buenas a tod@s, muchas veces al empezar en diseño web vemos que las páginas webs que creamos se comportan diferentes dependiendo del navegador con el que lo abramos.

Os copio un trozo de la wikipedia explicando el problema con los navegadores y como se intenta minimizar las posibles diferencias que nos puede surgir.


DESCRIPCIÓN WIKIPEDIA


Los Reset CSS son unas hojas de estilo en cascada que se suelen incluir al comienzo de un documento HTML, y cuya función es la de minimizar, en la medida de lo posible, las múltiples diferencias visuales que se dan a la hora de mostrar una misma página web, en diferentes navegadores, causa de que cada navegador implementa su hoja de estilos propia e interna, con determinados valores por defecto, que no siempre siguen la recomendación de la organización W3C.

El consorcio W3C, junto con su especificación de CSS 2.11 del 23 de abril de 2009, publicó en su recomendación, un valor por defecto para cada propiedad de CSS que deberían adoptar los agentes de usuario. Debido a que algunos navegadores hicieron caso omiso a sus indicaciones, los diseñadores web se han visto obligados a recurrir al uso de este tipo de trucos para garantizar la correcta visualización en la mayoría de navegadores.


CÓDIGO CSS


Código: CSS
  1. /* http://meyerweb.com/eric/tools/css/reset/
  2.    v2.0 | 20110126
  3.    License: none (public domain)
  4. */
  5.  
  6. html, body, div, span, applet, object, iframe,
  7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  8. a, abbr, acronym, address, big, cite, code,
  9. del, dfn, em, img, ins, kbd, q, s, samp,
  10. small, strike, strong, sub, sup, tt, var,
  11. b, u, i, center,
  12. dl, dt, dd, ol, ul, li,
  13. fieldset, form, label, legend,
  14. table, caption, tbody, tfoot, thead, tr, th, td,
  15. article, aside, canvas, details, embed,
  16. figure, figcaption, footer, header, hgroup,
  17. menu, nav, output, ruby, section, summary,
  18. time, mark, audio, video {
  19.         margin: 0;
  20.         padding: 0;
  21.         border: 0;
  22.         font-size: 100%;
  23.         font: inherit;
  24.         vertical-align: baseline;
  25. }
  26. /* HTML5 display-role reset for older browsers */
  27. article, aside, details, figcaption, figure,
  28. footer, header, hgroup, menu, nav, section {
  29.         display: block;
  30. }
  31. body {
  32.         line-height: 1;
  33. }
  34. ol, ul {
  35.         list-style: none;
  36. }
  37. blockquote, q {
  38.         quotes: none;
  39. }
  40. blockquote:before, blockquote:after,
  41. q:before, q:after {
  42.         content: '';
  43.         content: none;
  44. }
  45. table {
  46.         border-collapse: collapse;
  47.         border-spacing: 0;
  48. }



RECOMENDACIONES


Una forma fácil de implementar el código es crear un archivo con el nombre "reset.css" y despues solo tenemos que referenciarlo en el html. Así evitamos tener que copiarlo en cada archivo css. Por ejemplo:

Código: HTML5
  1. <!DOCTYPE html>
  2.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3.                 <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Mi Página</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4.                 <No tienes permisos para ver links. Registrate o Entra con tu cuenta charset="utf-8" />
  5.                 <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text/css" rel="stylesheet" href="reset.css" />
  6.                 <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text/css" rel="stylesheet" href="index.css" />
  7.         </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  8.         <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9.                  <!-- Vuestra web -->
  10.         </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  11. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>

ATENCIÓN: Se recomienda ejecutar primero el código de reset, si se ejecuta despues de vuestro propios archivos css posiblemente se desconfigure toda la web.



Espero que os ayude, este código pertenece a Eric Meyer. Su web es: No tienes permisos para ver links. Registrate o Entra con tu cuenta

Enlace del código: No tienes permisos para ver links. Registrate o Entra con tu cuenta

Un saludo.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5380
  • Actividad:
    75%
  • Reputación 31
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« Respuesta #1 en: Mayo 26, 2015, 10:29:36 am »
Muy buen post compañero!
Muchisimas gracias por compartirlo!

Saludos!
ANTRAX


Desconectado arthusu

  • *
  • Underc0der
  • Mensajes: 541
  • Actividad:
    8.33%
  • Reputación 2
  • Yo solo se que no se nada - Socrátes
    • Ver Perfil
    • Arthusu BLOG
  • Skype: arthusuxD
« Respuesta #2 en: Mayo 26, 2015, 09:44:04 pm »
Buen post bro, tambien hay una buena forma de realizar tus plantillas utilizando la base: No tienes permisos para ver links. Registrate o Entra con tu cuenta con la cual ya viene con varias cosas que pueden ser utiles en el diseño web, solo resta crear el codigo, pondre un enlace donde explico de que trata mas o menos si lo consideran spam pueden eliminarlo: No tienes permisos para ver links. Registrate o Entra con tu cuenta, saludos espero que te sea util

 

¿Te gustó el post? COMPARTILO!



[Aporte] Source pagina "plantilla" wargames

Iniciado por kid_goth

Respuestas: 1
Vistas: 1153
Último mensaje Julio 27, 2014, 10:45:32 pm
por fermino
[SOURCE] Formulario con validacion javascript de contraseña y email a mysqli

Iniciado por graphixx

Respuestas: 2
Vistas: 1516
Último mensaje Agosto 31, 2014, 03:56:47 pm
por Destructor.cs
[SOURCE] Rellenar formulario con consulta a la base de datos AJAX - PHP

Iniciado por graphixx

Respuestas: 0
Vistas: 953
Último mensaje Febrero 28, 2017, 05:05:59 pm
por graphixx
[SOURCE] Upload de imagenes con AJAX sin recargar la pagina y con jquery

Iniciado por graphixx

Respuestas: 0
Vistas: 1188
Último mensaje Septiembre 04, 2014, 06:03:26 pm
por graphixx
[SOURCE] Calendario que habilite solo un rango de fechas

Iniciado por graphixx

Respuestas: 0
Vistas: 135
Último mensaje Septiembre 10, 2018, 07:49:43 am
por graphixx