<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/selectores.css">
</head>
<body>
<header>
<div><img src="img/baldosa.jpg"></div>
<div>
<h1>hola</h1>
</div>
<ul>
<li>
<h1>Que pasa??</h1>
</li>
</ul>
<h1>Hola</h1>
<h1>Hola</h1>
</header>
<h1>Hola que tal estamos. Yo muy bien.</h1>
<h1 id="especial" class="varios sombra">Hola que tal <span class="susto">estamos</span>. Yo muy bien.</h1>
<h1 class="varios tipo sombra">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="tipo">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="varios sombra">Hola que tal <span>estamos</span>. Yo muy bien.</h1>
<h1 class="varios">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="varios">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="sombra verde">Hola que tal <span class="verde">estamos</span>. Yo muy bien.</h1>
<a href="pepe.html">ENlace</a>
<a href="fotos.html">ENlace</a>
<a href="articulos.html">ENlace</a>
<div>
<p>parrafo</p>
<p>parrafo</p>
<p>parrafo</p>
<p>parrafo</p>
<p>parrafo</p>
</div>
<footer>
<div>
<div>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<a href="">Enlace</a>
</div>
<p>estoy solo</p>
<p>estoy solo</p>
<p>estoy solo</p>
</div>
</footer>
</body>
</html>
h1{
color:blue;
clear: both;
}
#especial{
color:red;
background-color: green;
}
#especial .susto{
background-color: yellow;
}
.varios{
color:green;
}
.varios span{
color:yellow;
}
.tipo{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.sombra{
text-shadow: 10px 10px 5px grey;
}
/*El estilo se aplica a las dos clases */
.tipo, .sombra{
font-size:4em;
}
/* El estilo se aplica a todos los headers y a todas las imágenes */
header, img{
border:1px solid black;
}
/*El estilo se aplica a todas las imágenes que estén dentro de un header*/
header img{
width:20%;
float: left;
}
/*Esto se aplica a todos los h1 dentro del header, estén donde estén (anidados dentro de otros elementos) */
header h1{
color:purple;
}
/*Esto se aplica a todos los h1 hijos directos del header, si hay anidación no se aplica */
header > h1{
color:salmon;
}
header + h1{
background-color: sienna;
}
/*Todos los elementos de clase verde que estén dentro de un h1 */
h1 .verde{
background-color: green;
}
/* Todos los h1 que además tengan la clase verde */
h1.verde{
background-color: green;
}
[class]{
border:3px solid black;
}
/*Todos los elementos con un atributo href que empieza por 'foto' */
[href^=foto]{
background-color: chartreuse;
}
.susto:hover{
background-color: chocolate;
}
p:last-child{
color:red;
}
