Cómo crear estilos de página para su plantilla de sitio HTML5 y CSS3

Cómo crear estilos de página para su plantilla de sitio HTML5 y CSS3 - Dummies

Con un marco HTML en su lugar, puede comenzar a trabajar en CSS para crear estilos de página en su sitio. La mejor forma de incorporar CSS3 es siguiendo estos pasos:

  1. Comience con el diagrama de la plantilla de página.

    Debería tener toda la información que necesita.

  2. Pruebe su CSS en un navegador.

    Comience con una implementación simple de CSS que garantice que tiene los nombres correctos para todos los elementos de la página. Luego, modifique cada elemento de acuerdo con su documento de diseño, testeando sobre la marcha.

  3. Implementa el CSS de tu diagrama.

    Debería estar implementando el diseño que ya creó, no diseñando la página. (Eso ya sucedió en el proceso de diagramación).

  4. Guarde el diseño.

    Para proyectos de varias páginas, CSS externo en un archivo separado es definitivamente el camino a seguir. Mientras trabaja, guarde el CSS de la manera normal para que el navegador pueda leerlo.

  5. Prueba y ajuste.

    Las cosas nunca son lo que parecen con CSS porque los navegadores no se ajustan a los estándares por igual. Debes probar y ajustar en otros navegadores. Si los usuarios con tecnologías más antiguas son una preocupación, es posible que deba usar una hoja de estilo secundaria para las versiones anteriores de IE. Es posible que también desee crear una versión para dispositivos móviles.

  6. Repita para otras plantillas.

    Repita este proceso para cada una de las otras plantillas que identificó en el diagrama de su sitio.

El resultado de este proceso debe ser una cantidad de archivos CSS que puede reutilizar fácilmente en su sitio.

Aquí está el código CSS para la página principal:

 body {background-color: # 000000;} h1 {text-align: center; font-family: sans-serif; color blanco; sombra de texto: 0 0 10px negro;} #todo {color de fondo: blanco; borde: 1px negro sólido; ancho: 800px; margin-top: 2em; margin-left: auto; margen-derecha: auto; min-height: 600px;} # encabezado {background-color: # A11204; background-image: url ("cbBackground. png"); color: #FFFFFF; altura: 100px; tamaño de letra: 2em; padding-left: 1em; borde inferior: 3px negro sólido; margin-top: -1. 5em;} #menu {background-image: url ("cbBackground. Png"); color de fondo: # A11204; color: #FFFFFF; flotador izquierdo; ancho: 100px; min-height: 500px;} #menu li {list-style-type: none; margin-left: -2em; margen-derecha:. 5em; text-align: center;} #menu a {color: #FFFFFF; bloqueo de pantalla; borde: # A11204 3px inicio; text-decoration: none;} #menu a: hover {border: # A11204 3px insert;;. contenido {border: 3px double # A11204; margen: 1em; margen-izquierda: 110px; padding-left: 1em; fondo de relleno: 1em; padding-right: 1em; radio del borde: 5px; caja-sombra: 5px 5px 5px gris;}.contenido h2 {background-color: # A11204; background-image: url ("cbBackground. png"); color: #FFFFFF; text-align: right;} #footer {color: #FFFFFF; color de fondo: # 000000; borde: 1px sólido # A11204; flotador izquierdo; Limpia los dos; ancho: 100%; text-align: center;}