Hoy se enseñó la función del punto ( . ), la cual se utiliza para "enfocarse" exclusivamente en algo. Para esto hay que utilizar class="ejemplo".
Ejemplo:
h1{color:#F00;
font-size:30px;}
Lo anterior, cambia el texto de los h1 a rojo, y también cambia el tamaño de la letra dentro de los <h1>
h1.hola{color:#FF0;}
<h1 class="hola">Este es un ejemplo</h1>
Ahora, todos los h1 con la class "hola" tendran el color del texto amarillo.
A continuación, otro ejemplo en donde se cambia el estilo de la etiqueta <a>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style>
body{background-color:#a0c7e2 }
hr{color:#ff2b09;}
a{color:#dfbc0f;
font-family: arial}
a:hover{color:#000;
font-size:30px;
background-color:#8d38c1;
font-family: arial;
text-transform: uppercase;}
a:focus{color:#0F0;
}
.teclado{color:#537232;
font-family: impact;
font-size:40px;}
a.dos{color:#d82e13;
font-family: arial;
text-transform: uppercase;}
a.dos:hover{color:#000;
font-family: arial;}
a.uno:hover{color:#000;
font-size:30px;
font-family: arial;
text-transform: uppercase;}
a.uno{color:#233d94}
input{
background: linear-gradient(left, #e62222, #9bb64d);
background: -moz-linear-gradient(left, #e62222, #9bb64d);
background: -webkit-linear-gradient(left, #e62222, #9bb64d);
background: -o-linear-gradient(left, #e62222, #9bb64d);}
input.pass{
background: linear-gradient(left, #ffe000, #0d1599);
background: -moz-linear-gradient(left, #ffe000, #0d1599);
background: -webkit-linear-gradient(left, #ffe000, #0d1599);
background: -o-linear-gradient(left, #ffe000, #0d1599);}
input[type="email"]{
background: linear-gradient(left, #ff00ae, #00ffd4);
background: -moz-linear-gradient(left, #ff00ae, #00ffd4);
background: -webkit-linear-gradient(left, #ff00ae, #00ffd4);
background: -o-linear-gradient(left, #ff00ae, #00ffd4);}
/*_________________________________________________________________________________________________________*/
</style>
<a href="http://htmlcolorcodes.com/es/" target="_blank">HOLAAAAAA</a>
<hr>
<a href="http://htmlcolorcodes.com/es/" class="uno" target="_blank">HOLAAAAAA</a>
<hr>
<a href="http://htmlcolorcodes.com/es/" class="dos" target="_blank">HOLAAAAAA</a>
<br><br><br>
Bucaramanga <span class="teclado"> Ciudad</span> Bonita
<hr><hr><hr><hr>
texto: <input type="text" id="a"><br>
texto: <input type="text" id="b"><br>
email: <input type="email" id="c"><br>
password: <input type="password" class="pass" id="d"><br>
Adios <input type="checkbox" id="check">
</body>
</html>
Publicar un comentario