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

Curso 7

-En el curso vamos a ver formas de colocar colores y vistas de móvil y vistas en responsive, diferentes tamaños de pantalla.

-Comenzamos con un archivo llamado index.html con estilo.css colocado en css #estilo.css

   

       

       index

       

   

 

   

 

   

 

-Creamos en el body una capa llamada capa1

Y varias capas más:

Todas las capas tendran su clase propia y ademas una genereal de capas que sirven para todas igual.

 

      

           Esta es la capa 1

       

 

 

       

           Esta es la capa 2

       

 

       

           Esta es la capa 3

       

 

       

           Esta es la capa 4

       

 

       

           Esta es la capa 5

       

 

-Ahí incluimos css para las capas

.capa{padding:20px; margin:20px;}

.capa1{background-color: pink;} /*Color por su nombre en ingles*/

.capa2{background-color:#ff0000;} /*Color en valor hexadecimal*/

.capa3{background-color:rgb(125,125,0); } /*Color por valor rgb*/

.capa4{background-color:rgba(125,125,0,0.5); } /*Color por valor rgba, que es opacidad (a) de 0a 1*/

.capa5{background-color:#ff0000; opacity: 0.8;} /*Color y opacidad de capa*/

-Ahora vamos a ver estilos para diferentes resoluciones:

 

       

           capa para movil

       

 

 

       

           capa para escritorio

       

       

 

       

           capa para tablet

       

 

Y luego su estilo en css: Lo tenemos para diferentes resoluciones.

@media (max-width:600px){ /*Esto sería un movil*/

   .movil { display:block; }

   .escritorio { display:none; }

   .tablet { display:none;}

}

@media (min-width:600px) and (max-width: 900px){ /*Esto sería una tablet*/

   .movil { display:none; }

   .escritorio { display:none; }

   .tablet { display:block;}

}

 

 

@media (min-width:900px){ /*Esto sería un escritorio*/

   .movil { display:none; }

   .escritorio { display:block; }

   .tablet { display:none;}

 

/*Para una web responsive se pone en el head una etiqueta meta name viewport*/