Cómo crear estilos de página para su html5 y css3 sitio plantilla

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

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

   Se debe tener toda la información que necesita.

2. Pon a prueba tu CSS en un navegador.

   Comience con una implementación CSS simple que asegura que tiene los nombres correctos para todos los elementos de la página. Luego modificar cada elemento de acuerdo con el documento de diseño, las pruebas sobre la marcha.

3. Implementar el CSS de su diagrama.

   Usted debería ser implementación el diseño ya ha creado, no diseño la pagina. (Eso ya sucedió en el proceso de diagramación.)

4. Guarde el diseño.

   Para los proyectos de varias páginas, CSS externo en un archivo separado es definitivamente el camino a seguir. A medida que trabaja, guardar el CSS de manera normal por lo que el navegador será capaz de leerlo.

5. Prueba y pellizco.

   Las cosas nunca son lo que parecen con CSS porque los navegadores no se ajustan a las normas de igual manera. ¡Tienes que probar y ajustar en otros navegadores. Si los usuarios con las tecnologías más antiguas son una preocupación, puede que tenga que utilizar una hoja de estilo secundario para versiones antiguas de IE. También puede hacer una versión móvil.

6. Repita el procedimiento para otras plantillas.

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

El resultado de este proceso debe ser un número de archivos CSS que se pueden reutilizar fácilmente a través de 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-text-shadow: 0 0 10px negro -} # todo {background-color: blanco-frontera : 1px solid negro-width: 800px; margin-top: 2em-margin-left: auto-margin-right: auto-min-height: 600px;} # encabezado {background-color: # A11204-background-image: url ( "cbBackground.jpg") - color: # FFFFFF-height: 100px; font-size: 2em-padding-left: 1 em-border-bottom: 3px sólido negro-margin-top: -1.5em -} # {menú del fondo imagen: url ("cbBackground.jpg") - background-color: # A11204-color: # FFFFFF-float: left; ancho: 100px; min-height: 500px;} # menú li {tipo list-style: none; margin-left: -2em-margin-right: .5em text-align: center -} # menú a {color: # FFFFFF-display: block-border: # A11204 3px principio-text-decoration: none;} # menú . a: hover {border: # A11204 3px inserción -} contenidos {border: 3px doble # A11204-margin: 1 em-margin-left: 110px; padding-left: 1 em-padding-bottom: 1 em-padding-right: 1em- border-radius: 5px; box-shadow:. 5px 5px 5px gris -} h2 contenidos {background-color: # A11204-background-image: url ("cbBackground.jpg") - color: # FFFFFF-text-align: right ;} # pie de página {color: # FFFFFF-background-color: # 000000-frontera: 1px solid # A11204-float: left; clear: both-width: 100% -text-align: centro-}