Hola a tod@s,
Ya hace mucho tiempo que no publicaba nada. Hoy realizando limpieza en mi maquina me he encontrado con mi primer diseño html5 responsive, os dejo el ejemplo de código tanto del archivo HTML5 como de las buenas practicas en CSS3.
<html lang="es">
<head>
<title>Mi primera página en HTML5</title>
<meta charset="utf-8" /> <!-- Establecemos la codificación -->
<meta description="Aqui va la descripcion del sitio" />
<!-- MEDIA tipo de dispositivo all para todos mobiles y PCs-->
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h1>Bienvenidos a 3etrade</h1>
<!-- CABECERA -->
<header>
<header>
</header>
Reglas para trabajar con CSS
1) Primero se definen los estilos para etiquetas html, por ejemplo: header, footer, div, a, p, etc.
2) Después se definen los estilos para los identificadores (ID), los ID son elementos UNICOS en el HTML,
en el CSS se declaran con el símbolo de # ejemplo: #nombre_id{estilos } y en el HTML se llaman
mediante el atributo ID ejemplo <div id="publicidad"></div>
3) Al final se definen los estilos para las CLASES (class), las clases son elementos que se pueden
repetir 'N' veces en el HTML, en el CSS se declaran con el símbolo '.' ejemplo: .nombre_clase{estilos }
y en el HTML se llaman mediante el atributo CLASS, ejemplo: <div class="lborde-logos"></div>
4)Todos los estilos se ordenan conforme van apareciendo en la disposición del HTML, teniendo en
cuenta la prioridad anterior, es decir, primero etiquetas HTML, luego ID y al final CLASS
5) Los atributos se declaran de la siguiente forma: {atributo1:valor1; atributo2:valor2; .... n:valn;}
6) todos los atributos se ordenan alfabéticamente, por ejemplo si tengo: widht, color, display.
El orden seria: primero color, luego display y al final widht.
7) Si tenemos estilos para el comodín *, o para las etiquetas HTML y/o BODY, estos son los primeros en definirse.
8) En el BODY debemos declarar un tamaño de fuente global.
9) Si tenemos estilos para resetear elementos HTML, estos iran antes de cualquier estilo.
*/
*{
margin: 0;
padding: 0;
}
@font-face{
font-family: "Chalet";
src: url("../fonts/Chalet.eot");
src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),
url("../fonts/Chalet.woff") format("woff"),
url("../fonts/Chalet.ttf") format("truetype"),
url("../fonts/Chalet.svg#Chalet") format("svg");
font-weight: normal;
font-style: normal;
}
/*
16px = 12pt = 100% = 1em
*/
body{
background: #e1e1e1; /*url('../img/fondo.jpg');*/
color: #fff;
font-family: "Centiry Gothic", Helvetica, Verdana; /*CHALET, va entre comillas por ser una propia no estandar...*/
font-size: 2em;
}
h1{ /*Centrado de color naranja*/
color: #F60; /* Naranja */
margin: 0.25em auto;
text-align: center;
text-shadow: 5px 5px 10px rgba(255,255,255,0.5); /*Aplicarle la sombra a un texto, la sobra es blanca.*/
}
Ya hace mucho tiempo que no publicaba nada. Hoy realizando limpieza en mi maquina me he encontrado con mi primer diseño html5 responsive, os dejo el ejemplo de código tanto del archivo HTML5 como de las buenas practicas en CSS3.
Archivo HTML
<!DOCTYPE html><html lang="es">
<head>
<title>Mi primera página en HTML5</title>
<meta charset="utf-8" /> <!-- Establecemos la codificación -->
<meta description="Aqui va la descripcion del sitio" />
<!-- MEDIA tipo de dispositivo all para todos mobiles y PCs-->
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h1>Bienvenidos a 3etrade</h1>
<!-- CABECERA -->
<header>
<header>
</header>
<!-- Menú -->
<nav>
<nav>
</nav>
<nav>
<nav>
</nav>
<section id="contenedor">
<section id="principal">
<section>
<article>
<article>
</article>
</section>
<aside>
<aside>
</aside>
</section>
<section id="principal">
<section>
<article>
<article>
</article>
</section>
<aside>
<aside>
</aside>
</section>
<!--Pie-->
<footer>
<footer>
</footer>
</body>
</html>
<footer>
<footer>
</footer>
</body>
</html>
Archivo CSS3
/*Reglas para trabajar con CSS
1) Primero se definen los estilos para etiquetas html, por ejemplo: header, footer, div, a, p, etc.
2) Después se definen los estilos para los identificadores (ID), los ID son elementos UNICOS en el HTML,
en el CSS se declaran con el símbolo de # ejemplo: #nombre_id{estilos } y en el HTML se llaman
mediante el atributo ID ejemplo <div id="publicidad"></div>
3) Al final se definen los estilos para las CLASES (class), las clases son elementos que se pueden
repetir 'N' veces en el HTML, en el CSS se declaran con el símbolo '.' ejemplo: .nombre_clase{estilos }
y en el HTML se llaman mediante el atributo CLASS, ejemplo: <div class="lborde-logos"></div>
4)Todos los estilos se ordenan conforme van apareciendo en la disposición del HTML, teniendo en
cuenta la prioridad anterior, es decir, primero etiquetas HTML, luego ID y al final CLASS
5) Los atributos se declaran de la siguiente forma: {atributo1:valor1; atributo2:valor2; .... n:valn;}
6) todos los atributos se ordenan alfabéticamente, por ejemplo si tengo: widht, color, display.
El orden seria: primero color, luego display y al final widht.
7) Si tenemos estilos para el comodín *, o para las etiquetas HTML y/o BODY, estos son los primeros en definirse.
8) En el BODY debemos declarar un tamaño de fuente global.
9) Si tenemos estilos para resetear elementos HTML, estos iran antes de cualquier estilo.
*/
*{
margin: 0;
padding: 0;
}
@font-face{
font-family: "Chalet";
src: url("../fonts/Chalet.eot");
src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),
url("../fonts/Chalet.woff") format("woff"),
url("../fonts/Chalet.ttf") format("truetype"),
url("../fonts/Chalet.svg#Chalet") format("svg");
font-weight: normal;
font-style: normal;
}
/*
16px = 12pt = 100% = 1em
*/
body{
background: #e1e1e1; /*url('../img/fondo.jpg');*/
color: #fff;
font-family: "Centiry Gothic", Helvetica, Verdana; /*CHALET, va entre comillas por ser una propia no estandar...*/
font-size: 2em;
}
h1{ /*Centrado de color naranja*/
color: #F60; /* Naranja */
margin: 0.25em auto;
text-align: center;
text-shadow: 5px 5px 10px rgba(255,255,255,0.5); /*Aplicarle la sombra a un texto, la sobra es blanca.*/
}
header, nav, footer{
background: #1E6381;
border-radius: 0.5em;
margin: 0.5em auto;
max-width: 960px;
padding: 0.25em;
text-align: center;
}
section#contenedor{ /*Escribiendolo asi no falla ningun navegador*/
/*background: #fff;*/
margin: 0.5em auto;
max-width: 960px;
padding: 0;
text-align:center;
}
section#principal, aside{
background: #1E6381;
border-radius: 0.5em;
display: inline-block;
margin: 0.25em auto;
max-width: 960px;
min-height: 200px;
padding: 0.25em;
text-align: center;
vertical-align: top;
width: 65%;
}
article{
background: #011E30;
border-radius: 0.5em;
min-height: 140px;
padding: 0.25em;
}
aside{
width: 30%;
}
background: #1E6381;
border-radius: 0.5em;
margin: 0.5em auto;
max-width: 960px;
padding: 0.25em;
text-align: center;
}
section#contenedor{ /*Escribiendolo asi no falla ningun navegador*/
/*background: #fff;*/
margin: 0.5em auto;
max-width: 960px;
padding: 0;
text-align:center;
}
section#principal, aside{
background: #1E6381;
border-radius: 0.5em;
display: inline-block;
margin: 0.25em auto;
max-width: 960px;
min-height: 200px;
padding: 0.25em;
text-align: center;
vertical-align: top;
width: 65%;
}
article{
background: #011E30;
border-radius: 0.5em;
min-height: 140px;
padding: 0.25em;
}
aside{
width: 30%;
}
Comentarios
Publicar un comentario