Ejercicios de etiquetas y selectores en CSS

Curso de HTML

31.  
32.  
35.  
38.  
53.  

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

Ejercicios de etiquetas y selectores en CSS 1
Descarga la imagen superior para hacer el ejercicio

Ejercicio anuncios

Ejercicio dejavu

La etiqueta time se usa para marcar fechas y horas en un formato que entiendan los ordenadores. Dicha fecha puede ser el contenido de la etiqueta o puede ir en el atributo datetime con lo cual el contenido puede ser cualquier cosa.

← Tipos de selectores
display flex →