2-Curso HTML Y CSS para principiantes

Curso html y css, para principiantes en el mundo de la informatica.

30
20

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