Guia d'estils i regles CSS per a maquetació web

Regles d'estil CSS per a l'estructura de la pàgina

A continuació es presenta el full d'estils CSS corregit, organitzat i documentat per a la maquetació d'un lloc web responsiu bàsic.

Estils globals i del cos

* {  margin: 0; /* Margen */  padding: 0; /* Margen interno de los elementos */}body {  background: url("imagenes/bg.png");  background-attachment: fixed;}

Formularis i controls d'entrada

form {  border: 2px solid #d9edf7;  width: auto;  margin: 10px 0 0 10px;}input, textarea {  width: 30%;  margin: 10px;  height: 25px;}#1, #3 {  float: left;}textarea {  border: 2px solid #d9edf7;  display: block;  padding: 10px;  margin: 10px 0 0 10px;  width: 590px;  height: 260px;  resize: none;  overflow: auto;}

Estructura general i capçalera

header, .contenido, footer {  width: 90%; /* Mejor en % porque lo hace responsivo */  max-width: 1000px; /* Toma como máximo 1000 px */  margin: 20px auto; /* Altura de margen: 20 px vertical y centrado horizontal */}header nav {  background: #FA5858;  overflow: hidden; /* Oculta el contenido que sobrepasa el contenedor, conteniendo elementos flotantes */}header nav ul {  list-style: none; /* Quita los puntos de la lista */}header nav ul li {  float: left; /* Hace que todos los li se agrupen hacia la izquierda */}header nav ul li a {  padding: 10px 20px; /* 10 px de alto y 20 px de ancho */  display: block; /* Permite que funcione el padding hacia arriba; si no, solo funcionaría a los lados */  text-decoration: none; /* Quita el subrayado de los enlaces */  color: white;}header nav ul li a:hover {  background: #F78181;}

Contingut principal i barra lateral

.contenido .principal {  width: 68.5%; /* ~70% de todo el contenedor padre */  margin-right: 1.5%;  float: left;}.contenido .principal article {  padding: 20px;  background: #888888;  margin-bottom: 18px; /* Margen hacia abajo */  height: auto;}.noticia {  padding-top: 10px;}aside {  width: 30%;  background: goldenrod;  float: left; /* Debe flotar a la izquierda o aparecerá debajo de los artículos */  padding: 20px; /* Margen interno */  box-sizing: border-box; /* Soluciona el cálculo del padding: ajusta el tamaño al contenedor */}.contenido .principal div img {  width: 645px;  float: inherit;}

Peu de pàgina i tipografia

footer {  background: #6E6E6E;  color: white;  clear: both; /* Limpia los elementos flotantes y respeta la altura de los contenedores */  padding: 10px 0; /* 10 px hacia arriba/abajo y 0 hacia los lados */  text-align: center;}h1 {  font-size: 40px;  padding-bottom: 20px;}h2 {  font-size: 40px;  padding-bottom: 20px;}