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

 

 

En esta práctica aprendemos como colocar archivos externos y enlazarlos desde nuestros archivos html.
En los archivos se encuentran comentarios explicando el comportamiento de cada versión.

clase2_1.html

<!-- Los estilos se colocan en un archivo externo

Vamos a crear nuestro primer archivo css que le llamamos clase2_1.css

tenemos que referenciarlo en el head -->


 

<html>

    <head>

        <title>Título</title>

        <link href= "clase2_1.css" rel="stylesheet"></link>

    </head>

    <body>

        <div class="estilo1" >

            Esta es una capa

            <div class= "estilo11" >Esta es la capa hijo</div>

        </div>

        <div class= "estilo2" >

            Esta es otra capa

        </div>

    </body>

</html>

<!-- Copiamos todo el contenido de estilo al archivo css

Llamamos al archivo en la etiqueta link con el atributo href

y el atributo rel="stylesheet" -->

clase2_1.css

estilo1{color:brown; border:1px solid #0000FF;}

.estilo2{font-size:20px; text-decoration: line-through;}

.estilo11 {font-size: 40px;}

 

 

Para organizar los archivos, creamos una carpeta css para incluir los archivos css enlazados.

clase2_2.html

<!-- Como una web contiene muchos archivos se colocan en carpetas

vamos a colocar el css en una carpeta -->


 

<html>

    <head>

        <title>Título</title>

        <link href= "css/clase2_2.css" rel="stylesheet"></link>

    </head>

    <body>

        <div class="estilo1" >

            Esta es una capa

            <div class= "estilo11" >Esta es la capa hijo</div>

        </div>

        <div class= "estilo2" >

            Esta es otra capa

        </div>

    </body>

</html>


 

CSS clase2_2.css

.estilo1{color:brown; border:1px solid #0000FF;}

.estilo2{font-size:20px; text-decoration: line-through;}

.estilo11 {font-size: 40px;}

 

 

 

 

En esta versión, el archivo html se encuentra en una carpeta al mismo nivel que la carpeta css. Debemos subir un nivel en el orden de carpetas, para acceder a la carpeta “css”, con ../

clase2_3.html

<!-- Para ir a un nivel superior de carpetas se escriben ../    

     si estuviera en dos niveles superiores ../../ -->


 

<html>

    <head>

        <title>Título</title>

        <link href= "../css/clase2_3.css" rel="stylesheet"></link>

    </head>

    <body>

        <div class="estilo1" >

            Esta es una capa

            <div class= "estilo11" >Esta es la capa hijo</div>

        </div>

        <div class= "estilo2" >

            Esta es otra capa

        </div>

    </body>

</html>

<!-- Añadimos css/ para encontrar la carpeta que esta metido la clase2_3.css -->

clase2_3.css

.estilo1{color:brown; border:1px solid #0000FF;}

.estilo2{font-size:20px; text-decoration: line-through;}

.estilo11 {font-size: 40px;}

 

 

Ahora vamos a enlazar con una imagen, para mostrarla en nuestro archivo html. La imagen la colocamos en una carpeta “img”. Debemos referenciar la carpeta img/ más el nombre de la imagen.

clase2_4.html

<!-- Vamos a incorporar una imagen de la carpeta img -->


 

<html>

    <head>

        <title>Título</title>

    </head>

    <body>

        <img src="img/hoja.jpg">

    </body>

</html>

<!-- Las imagenes no necesitan etiquetas de cierre -->