-Empezamos el curso 6, copiamos todo del curso 5, eliminando index, y platilla 2. Y nombrando plantilla como index.
-Vamos hacer otra versión de la plantilla, que los cambios serian estos:
-Cabecera: Fija para ello usaremos position: fixed
-Menú y contenido: Le ponemos top 100px arriba y top 100px abajo.
Y comenzaremos todo ello en el CSS #estilo.css
Aquí mostramos sus estilos CSS
.cabecera{
position:fixed;
background-color: #8b4732;
width: 100%;
height: 100px;
text-align: center;
}
.menu{
position: absolute;
top:100px ;
width: 25%;
bottom: 100px;
background-color: aliceblue;
}
.contenido{
position: absolute;
overflow: auto;
left: 25%;
top: 100px;
width: 75%;
bottom: 100px;
background-color: rgb(0, 136, 255);
}
.pie{
position:fixed;
background-color: #3b3b3b;
width: 100%;
height: 100px;
bottom: 0px;
text-align: center;
}
-Queremos obtener una fuente de Google la escogemos, la seleccionamos, cogemos todos códigos 1 para html y luego colocamos dentro del head.
___________________________________________________________
-Ahora estamos en el archivo index.html
-Dentro de la cabecera incluimos una capa
____________________________________________________________
-Vamos a colocar una capa utilizando imagen de fondo, dentro del contenido creamos una capa que llamaremos "capafondo1" y en el estilo css se mostraría así.
Se hace blackgrand-url ("imagen/logo..") Para bajar el nivel y colocar el logo colocaremos antes ../
También dependiendo de como queramos el logo en background le ponemos, si quiere que se repita, si no queremos, si lo queremos central, o que cubra el fondo de la pantalla:
Y así lo mostramos en diferentes capa de una forma diferente para diferenciarlos:
.capafondo1{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
}
.capafondo2{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
background-repeat: no-repeat;
}
.capafondo3{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
background-repeat: no-repeat;
background-position: center center;
}
.capafondo4{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
background-repeat: no-repeat;
background-position: center center;
background-size:100%;
}
_____________________________________________________
-Vamos a modificar los textos (poniendo p
Este es el texto 1
Este es el texto 2
Este es el texto 3
Este es el texto negrita
Este es el texto cursiva
.texto1{
font-size: 15px;
}
.texto2{
font-size: 2em;
}
.texto3{
font-size: 2rem;
}
____________________________________________________
-La etiqueta span es para colocar una clase sin salto de linea, ni capa ni párrafo en HTML. Luego ponemos en CSS también
Este es el texto mayusculas
Este es el texto grande
Este es el fuente google
-Su css: Ponemos textomay (upperrcase mayuscula) Luego también textogrande cambiamos varias propiedades.
.textomay{
text-transform: uppercase;}
.textogrande{
font-size: 2em;
font-weight: 700;
font-family: 'Times New Roman', Times, serif;
}
Aqui su CSS. E explicamos en breve
-Font -size (seria su tamaño 15px ejemplo)
-2em doble de lo normal
-2rem igual que quiere decir que si esta en una capa tiene 2em y ponemos 2rem (lo combierete en 4em)
-Tambien probamos opciones de texto texto negrita texto cursiva
.texto1{
font-size: 15px;
}
.texto2{
font-size: 2em;
}
.texto3{
font-size: 2rem;
}
.textomay{
text-transform: uppercase;}
.textogrande{
font-size: 2em;
font-weight: 700;
font-family: 'Times New Roman', Times, serif;
}
Con esta clase seleccionamos la fuente de google.
.fuentegoogle{
font-family: 'Raleway', sans-serif;
font-size: 3em;
