Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. HTML5 y CSS3
  3. Los estilos para los contenedores de texto
Extrait - HTML5 y CSS3 Domine los estándares de creación de sitios web (2ª edición)
Extractos del libro
HTML5 y CSS3 Domine los estándares de creación de sitios web (2ª edición)
1 opinión
Volver a la página de compra del libro

Los estilos para los contenedores de texto

Los títulos, los párrafos y las citas

Recordemos que los contenedores para los títulos son los elementos que van de <h1> a <h6>. El elemento <p> permite mostrar los párrafos, y <blockquote>, las citas.

En todos estos elementos, podemos aplicar las propiedades CSS para el texto que hemos visto en el capítulo anterior. Para estos contenedores, no hay propiedades específicas, al contrario de lo que sucede con las listas, las tablas y los formularios, como vamos a ver en las siguientes secciones.

Las listas

1. Los elementos de las listas y los estilos

Recordemos que las listas con viñetas se insertan con el elemento <ul> y las listas numeradas con <ol>. Cada ítem de estas dos listas se añade con un elemento <li>. Las listas de definiciones se utilizan con los elementos <dl>, <dt> y <dd>. En todos estos elementos, puede perfectamente aplicar los estilos CSS para el texto que hemos estudiado en el capítulo anterior.

Observe que el W3C ofrece módulos dedicados al formato de las listas. Tenemos Lists and Counters Module Level 3 (https://www.w3.org/TR/css-lists-3/), que está en Working Draft a fecha 17 de agosto de 2019. Este módulo se clasifica en la categoría Refining, lo que quiere decir que todavía no es utilizable en la actualidad. El módulo Counter Styles Level 3 está en Candidate Recommendation a fecha 14 de diciembre de 2017: https://www.w3.org/TR/css-counter-styles-3/

Por lo tanto, es un poco más reconocido por los navegadores. Este módulo permite generar contadores de lista personalizados.

2. Los estilos de enumeración

El símbolo de enumeración ubicado delante de cada ítem de una lista numerada o con viñetas se puede elegir con la propiedad list-style-type. Observe bien que esta propiedad forma parte de los CSS 2.1 (https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-type).

Para las listas con viñetas, puede utilizar estos valores:

  • disc: viñeta negra completa, que es el valor por defecto.

  • circle: viñeta con hueco, blanco en su centro.

  • square: cuadrado negro y completo.

Para las listas numeradas, puede utilizar estos valores principales:

  • decimal: cifras enteras, que es el valor por defecto.

  • decimal-leading-zero: cifras enteras, pero con un 0 como prefijo.

  • lower-roman: cifras romanas minúsculas.

  • upper-roman: cifras romanas mayúsculas.

  • lower-alpha...

Las tablas

1. El texto en las tablas

Todas las propiedades CSS que acabamos de ver para el texto se pueden aplicar a los contenidos textuales de las celdas de las tablas.

Observe que las propiedades CSS aplicables a las tablas que vamos a estudiar forman parte del CSS 2.1.

2. El borde de la tabla

Podemos aplicar bordes a las tablas y a las celdas de las tablas. Vamos a empezar agregando un borde a la tabla. Este borde se va a situar únicamente alrededor de la tabla.

A continuación se muestra el código HTML de la tabla que se utilizará:

<table id="resultados">  
   <tr>  
       <th>Enero</th>  
       <th>Febrero</th>  
       <th>Marzo</th>  
   </tr>  
   <tr>  
       <td>123</td>  
       <td>134</td>  
       <td>156</td>  
   </tr>  
   <tr>  
       <td>213</td>  
       <td>256</td>  
       <td>273</td>  
   </tr>  
   <tr>  
       <td>321</td>  ...

Los formularios

1. El formato del texto de los campos

Todos los elementos textuales HTML que intervienen en los formularios pueden utilizar las propiedades CSS dedicadas al texto que hemos visto anteriormente.

Además, todos los campos pueden utilizar las propiedades de las cajas que vamos a ver en el próximo capítulo: borde, fondo, relleno...

2. Los estados activo e inactivo de los objetos

Anteriormente hemos estudiado las pseudoclases :enabled, :disabled y :checked. Vamos a poder utilizar estas clases en las reglas CSS para formatear los objetos de formulario, en función de su estado.

A continuación se muestra el formulario utilizado:

<form id="formulario" method="#" action="#">  
   <p>  
       <label for="nombre">Su nombre: </label>  
       <input type="text" id=“nombre”>  
   </p>  
   <p>  
       <label for="edad">Su edad: </label>  
       <input type="text" id="edad" disabled>  
   </p>  
   <p>  
       <input type="radio" name="sexo" id="hombre" value="hombre"> 
       <label for="hombre">Hombre</label>  
       <br>  
       <input type="radio" name="sexo" id="mujer" value="mujer"> 
       <label for="mujer">Mujer</label>  
   </p>  
   <p>  
       <input type="checkbox" id="acuerdo" />  
       <label for="acuerdo">Estoy...