Ejercicio chistes
border: 1px solid black;Cómo añadir un borde a un efecto hover sin que se sume al grosor
a{
text-decoration: none;
font-size: 3em;
border-bottom:1px solid transparent;
}
a:hover{
border-bottom: 1px solid black
}Ejercicio citas
Tener en cuenta que los párrafos están alineados usando márgenes.
Estilos necesarios para resolver este ejercicio:
border-radius: 20px 0 0 20px;Uso de spans
A partir del código html de la página suministrada, introducir el código css necesario para que se visualice como se indica en el enlace.
Notas:
- La fuente que usaremos es: sans-serif
- Para cambiar el interlineado usaremos el estilo line-height
- Para los bordes de los textos, usaremos los estilos border-top y border-bottom
- Para alinear el texto a la derecha, usaremos text-align:right
- Todo el contenido estará dentro de una capa con width:1024px y margin:auto
Algunas aclaraciones técnicas sobre este ejercicio de CSS
Vamos a ver como maquetar letras dándole estilos a los span. Un span es lo mismo que un div, pero tiene el estilo display con valor inline. Esto significa que el contenido del span se pondrá en línea (en horizontal)con el resto texto. Por otra parte, el valor por defecto del estilo display de un div es “block”, que hace que los componentes se vayan apiñando en vertical.
Los span se utilizan habitualmente para maquetar texto. No puedes darle width ni height a un span, debido a que tiene el estilo display con valor inline. Si le damos width y height, simplemente no pasará nada.
Por lo demás, la maquetación es sencilla. No hay componentes puestos en horizontal. Todo se irá apilando verticalmente debido a que los párrafos, divs y encabezados tienen el estilo display:block. Este estilo hace que se vayan colocando verticalmente.
Ejercicio panteón
