<html>
<!-- Vemos cómo crear estilos combinados, podemos usar una definción compuesta para modificar una etiqueta -->
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
<h1>H1 normal</h1>
<div class="clase1">
<h1>H1 modificado</h1>
<h1>H1 modificado 2</h1>
</div>
<h1>H1 normal 2</h1>
<style>
h1{ font-size: 30px;}
.clase1 h1{font-size: 60px;}
</style>
</body>
</html>
<html>
<!-- Lo anterior se puede usar con varias clases, por ejemplo -->
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
<div class="titulo">Titulo normal</div>
<div class="clase1">
<div class="titulo">Titulo modificado 1</div>
<div class="titulo">Titulo modificado 2</div>
</div>
<div class="titulo">Titulo normal 2</div>
<style>
.titulo{ font-size: 30px;}
.clase1 .titulo{font-size: 60px;}
</style>
</body>
</html>
<html>
<!-- Existen otros modificadores para el estilo -->
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
<!-- Usamos first y last child para modificar el primero y el ultimo de las capas de un elemento -->
<div class="botonera">
<div class="boton">Botón 1</div>
<div class="boton">Botón 2</div>
<div class="boton">Botón 3</div>
<div class="boton">Botón 4</div>
</div>
<style>
.botonera{ width:100%; text-align: center; }
.boton{ display: inline-block; font-weight: 600; border:1px solid #999; padding:10px; margin:3px; }
.boton:first-child{ background-color: yellow; }
.boton:last-child{ background-color: rgb(181, 181, 122); }
</style>
<br><br>
<!-- Con el modificador hover hacemos distinto estilo para cuando el cursor se coloque encima del objeto -->
<div class="boton2">Botón</div>
<style>
.boton2{ border:1px solid #999; width:fit-content; padding:10px; margin:3px; cursor:pointer; }
.boton2:hover{ background-color: blue; ;}
</style>
<br><br>
<!-- Otros modificadores son before y after (antes y despues) -->
<div class="boton3">Botón</div>
<style>
.boton3{ border:1px solid #999; width:fit-content; padding:10px; margin:3px; cursor:pointer; }
.boton3:before{ content:">----"; background-color: burlywood; }
.boton3:after{ content:"-----<"; background-color: coral; }
</style>
</body>
</html>
