Curso de HTML | Ejercicios de etiquetas y selectores en CSS 1

Curso de HTML
Ejercicios de etiquetas y selectores en CSS

Curso de HTML | Ejercicios de etiquetas y selectores en CSS 2

Curso de HTML | Ejercicios de etiquetas y selectores en CSS

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  

Ejercicio chistes

Para realizar este ejercicio necesitaremos utilizar un nuevo estilo, el estilo border:

border: 1px solid black;

Ejercicio citas

Tener en cuenta que los párrafos están alineados usando márgenes.

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
Descargar HTML sin estilos

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 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.