Los estilos para los contenedores de texto

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:

Para las listas numeradas, puede utilizar estos valores principales:

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.

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

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