Etiqueta kbd en HTML

Hola a todos, hoy os voy a explicar como utilizar la etiqueta kbd en HTML.

La etiqueta kbd sirve para marcar el texto que debe introducir el usuario.

Es bastante sencillo de usar.

<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <p>Para copiar: <kbd>Ctrl + v</kbd></p>
    <p>Para cortar: <kbd>Ctrl + x</kbd></p>
    <p>Para cancelar: <kbd>Esc</kbd></p>
  </body>
</html>


Este es el resultado:

Como veis no hay mucha diferencia de estilos, podemos mejorarlo con algo de CSS para hacerlo más intuitivo.

kbd {
  margin: 0px 0.1em;
  padding: 0.1em 0.6em;
  border-radius: 3px;
  border: 1px solid rgb(204, 204, 204);
  color: rgb(51, 51, 51);
  line-height: 1.4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  display: inline-block;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px #ffffff;
  background-color: rgb(247, 247, 247);
  -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  text-shadow: 0 1px 0 #fff;
}

Ahora si lo asociamos a nuestro HTML, sino sabes como se hace, te dejo un tutorial donde hablo de ello.

Formas de incluir CSS en un documento HTML

Este es el resultado:

Os dejo el ejemplo completo:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *