Selector de etiquetas: CSS
Crear las reglas CSS
Ya tenemos la página construída en cuanto al contenido. Ahora toca ponerla bonita con los estilos CSS
En las primeras reglas se prepara el tipo y tamaño de fuentes para todo el documento, usamos el selector html
Además ponemos el limite de las cajas css a border-box para todo los lementos dentro del body. Así los bordes quedarán siempre dentro del contenedor.
@charset "utf-8";
html{
font-family: Arial, "sans-serif";
font-size: 16px;
}
body{
box-sizing: border-box;
}
Vamos al contenedor de todo. Las diferentes partes de este bloque están apilados en una columna y centrados en horizontal. Para logar esta disposición usamos un display flexbox
Además definimos los márgenes (margin) y rellenos (padding) para los bloques div. Y centramos la imagen en su bloque.
El ancho máximo del contendor lo pongo en 90vw para que funcione en pantallas pequeñas (responsive ¡sin media query!)
.contenedor{
display: flex;
flex-direction: column;
margin: 0 auto;
width: 600px;
max-width: 90vw;
}
.imagen{
align-self: center;
}
.contenedor >div{
margin: 4px;
padding: 2px;
}
Pasamos al bloque donde se colocan la etiquetas asignadas a la imagen. El bloque lo rodeamos con un borde, la disposición de las etiquetas se controlan con un display flex, con items alineados a la izquierda (start). Definimos el alto para que quepan las etiquetas.
Ponemos flex wrarp por si no caben las etiquetas que el bloque se agrande a lo alto.
.tagsAsig, .tagsDisp{
align-items: center;
border: 1px solid lightgray;
display: flex;
flex-wrap: wrap;
height: fit-content;
min-height: 2.3rem;
justify-content: start;
}
Las reglas para las etiquetas individuales las definimos usando como selectores las etiquetas HTML dentro de los respectivos bloques de etiquetas asignadas (tagsAsig) y disponibles (tagsDisp).
Las etiquetas asignadas la hemos puesto como un bloque div con dos hijos un span y un button. El segundo actúa como un botón, por eso le ponemos su hover.
.tagsAsig >div{
background: lightgray;
border-radius: 8px;
height: 2.3rem;;
display: flex;
align-items: center;
padding: 0 6px;
margin: 2px;
position: relative;
}
.tagsAsig >div button{
background: transparent;
border: none;
display: inline-block;
line-height: 1.5rem;
margin-left:10px;
text-align: center;
width: 1.5rem;
position: relative;
}
.tagsAsig >div button:hover{
background: gray;
border-radius: 50%;
color: white;
cursor: pointer;
}
En el caso de las etiquetas disponibles son simples bloques span con el texto de la etiqueta. Usmos un hover para darle efecto al pasar el ratón.
.tagsDisp > span{
height: 2.3rem;
display: flex;
align-items: center;
padding: 0 6px;
position: relative;
}
.tagsDisp > span:hover{
background: lightgray;
cursor: pointer;
}
Para mostrar el tooltip usamos el pseudo selector after que permite colocar contenido en la página mediante CSS. Usamos dos tooltips una para el boton de eliminar etiqueta y otra para agregarla.
.tagsDisp span:hover:after,
.tagsAsig >div button:after{
background: white;
color: gray;
font-size: 0.8rem;
left: 0px;
position: absolute;
top: 100%;
width: fit-content;
white-space: nowrap;
}
.tagsAsig >div button:hover:after{
content: "Eliminar etiqueta";
}
.tagsDisp span:hover:after{
content: "Agregar etiqueta";
}
Por último tenemos que darle estilo al botón, según la iamgen es un fondo rojo con letras blanca. La colocamos también un efecto hover: cambio de color y tamaño.
.btnEnviar{
background:#F4511E;
color: white;
border-radius: 8px;
border: none;
display: block;
font-size: 1.25rem;
margin: 0 auto;
padding: 4px 20px;
width: fit-content;
transition: background 300ms, transform 300ms;
}
.btnEnviar:hover{
background:#b54522;
cursor: pointer;
transform: scale(0.9)
}
Reúne todos estas definiciones en el archivo tags.css.
Comentarios
En esta sección hemos creado el archivo de estilo CSS con las defniciones para dar a la pa´gina el aspecto buscado..
Observa que se han usado etiquetas HTML como selectores. De esta forma código HTML queda más claro.
Pero tiene un contra: no puedes cambiar las etiquetas HTML que usas en la página
Hay que tener en cuenta este detalle.
Si prefieres puedes usar nombres de selectores (class), verás que el resultado no va a cambiar nada.