Responsive Design con HTML5 y CSS3
Responsive Design (Diseño Sensible): Adaptación de la página Web a las características de la pantalla donde se está visualizando.
index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Estructura Básica en HTML5 y CSS3 con responsive design">
Hoja de Estilo externa:
<link rel="stylesheet" href="css/estilo.css">
<title>Estructura Básica Semántica en HTML5 y CSS3</title>
</head>
<body>
<h1>Estructura Semántica HTML5</h1>
Carácter especial: <
<header><header></header>
<nav><nav></nav>
<section id="contenedor">
<section id="principal">
<section>
<article><article></article>
</section>
<aside><aside></aside>
</section>
<footer><footer></footer>
</body>
</html>
estilos.css
Para asignar el estilo a todos los lementos se utiliza *
*{
margin:0;
padding:0;
}
Agregar una tipografía externa que no sea segura (true-font) con la ayuda de fontsquirrel:
@font-face {
font-family: 'chaletmedium';
src: url('../fonts/chalet-webfont.eot');
src: url('../fonts/chalet-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/chalet-webfont.woff') format('woff'),
url('../fonts/chalet-webfont.ttf') format('truetype'),
url('../fonts/chalet-webfont.svg#chaletmedium') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #212121 url(../img/fondo.jpg);
color: #FFF;
font-family: "chaletmedium",Helvetica,Verdana;
Equivalencia de los tamaños por defecto: 16px = 12pt = 100% = 1em
1em (unidades relativas) equivale al ancho de la letra M
font-size: 2em;
}
h1 {
color: #F60;
Trabajar margen en parejas: arriba-abajo, derecha-izquierda (auto: para permitir centrar) El margen es el espacio que hay entre el borde de la página y los elementos o entre los elementos.
margin: 0.25em auto;
Alineación del texto:
text-align:center;
Sombra: distancia con respecto al texto en el eje x, con respecto al eje y, blur (desenfoque), transparencia en formato rgb
text-shadow: 5px 5px 10px rgba(255,255,255,0.5);
}
header,nav,footer {
background: #1E6381;
Bordes curvos:
border-radius: 0.5em;
margin: 0.5em auto;
Para trabajar con diseño que se ajuste al tamaño de la pantalla del dispositivo, se utiliza max.width, min-width, max-height, min-height.
max-width: 960px;
padding: 0.25em;
text-align:center;
}
section#contenedor {
margin: 0.5em auto;
max-width: 960px;
padding:0;
text-align:center;
}
#principal {
background: #1E6381;
border-radius: 0.5em;
Con display indicamos como se va a mostrar la disposición de los elementos (en linea o en bloque). inline-block: primero se muestra en linea y lo que hay después se comportara como un bloque (un bloque ocupa todo el ancho de la pantalla).
display:inline-block;
margin: 0.25em auto;
max-width: 960px;
min-height: 200px;
padding:0.25em;
Alineación vertical:
vertical-align: top;
width: 65%
}
article {
background:#011E30;
border-radius: 0.5em;
min-height: 140px;
padding: 0.25em;
}
aside {
background: #1E6381;
border-radius: 0.5em;
display:inline-block;
margin: 0.25em auto;
max-width: 960px;
min-height: 200px;
padding:0.25em;
vertical-align: top;
width: 30%
}
