Curso HTML / CSS desde cero 6
Curso HTML / CSS desde cero 6 ¿Te apuntas aprender con Ivardev? Cursos desde 0, donde aprenderás lo imprescindible.

-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;

}

<html>
   <head>


       <meta charset="utf-8">
       <title>plantilla</title>
       <link rel="stylesheet" href="css/estilo.css">

       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
   
   </head>

-Queremos obtener una fuente de Google la escogemos, la seleccionamos, cogemos todos códigos 1 para html y luego colocamos dentro del head.

 

___________________________________________________________

<body> 
       <div class="cabecera">
           <div class="logo">
               <img src="img/logo_ivardev.png">
           </div>
       </div>

       <div class="menu" >

       </div>    


-Ahora estamos en el archivo index.html
-Dentro de la cabecera incluimos una capa <div class="logo">
Y dentro la imagen de dicho logo. El logo lo hemos querido poner al lado le hemos cambiado los estilos.
*Que no se nos olvide que la capa overflow es para hacer auto scroll (que se mueve la pagina)
Asi mostraria en su estilo CSS
.logo{
  margin-top: 30px;
  margin-left: 20px;
  margin: 30px 0 0 20px; /*esto es lo mismo que lo anterior*/
  text-align: left;

____________________________________________________________
       <div class="contenido">

           <!-- Capas de fondo -->
           <div class="capafondo1"></div>

           <br><br>

           <div class="capafondo2"></div>

           <br><br>

           <div class="capafondo3"></div>

           <br><br>

           <div class="capafondo4"></div>

 

-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<class>) y estilos en su correspondiente CSS
<!-- Textos -->
           <p class="texto1">
               Este es el texto 1
           </p>

            <p class="texto2">
               Este es el texto 2
           </p>

           <p class="texto3">
               Este es el texto 3
           </p>

           <p>

               Este es el <strong> texto negrita</strong>
           </p>

           <p>

               Este es el <i> texto cursiva</i>
           </p>

 

.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

          <p>

               Este es el <span class="textomay"> texto mayusculas</span>
           </p>

           <p>

               Este es el <span class="textogrande"> texto grande</span>
           </p>

           <p>

               Este es el <span class="fuentegoogle"> fuente google</span>
           </p>
           
       </div>


-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 <strong> texto negrita <strong>   <i> texto cursiva <i> 


.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;