A fin de aplicar diseños vistosos a la información de una página web, implementaremos estilos CSS en
listas y tablas, en base a las recomendaciones oficiales de este lenguaje.
En ocasiones, por desconocer la forma de
especificar diseños personalizados a una tabla y una lista, mediante el
lenguaje CSS, se comete el error de mostrarlas en su estructura básica, y pasan
desapercibidas por el usuario. Por lo tanto, definiremos selectores,
propiedades y valores a las etiquetas de listas y tablas, para cumplir con las
necesidades del proyecto.
Las listas tienen gran importancia
a la hora de mostrar diferentes procedimientos. Al crearlas mediante el
lenguaje HTML, son visualizadas con un estilo básico, el cual cambiamos con
diferentes propiedades del lenguaje CSS, a fin de captar con mayor rapidez la
atención del usuario. En la siguiente ilustración, se encuentra la
visualización básica de una lista de tipo ul
y otra de tipo ol.
061-01_0910_ilu01. Visualización básica de listas
Para agregar un estilo diferente a cada ítem de una
lista, es necesaria la propiedad list-style-type,
la cual será agregada al selector li,
y:
- En una lista desordenada,
tenemos tres diferentes tipos de valor: square
para mostrar cuadrados, disc para
mostrar círculos rellenos, y circle para
mostrar círculos sin relleno.
061-01_0910_ilu02. Estilos diferentes para
una lista desordenada
- En una
lista ordenada, es posible cambiar los estilos con diferentes valores
disponibles en la página oficial de la organización W3C. Por ejemplo, tenemos lower-roman para número romanos en
minúsculas, lower-greek para números
griegos en minúsculas, y decimal-leading-zero
para preceder el decimal por un cero.
061-01_0910_ilu03. Estilos diferentes para
una lista ordenada
Para definir estilos a una tabla,
creamos el selector con la etiqueta table
en el documento CSS. Dentro de las llaves, es posible agregar:
- La
propiedad border, con el valor en blue, para definir el color azul en la línea
de borde, previamente especificada en el documento HTML.
- La
propiedad border-collapse, con el
valor en collapse, para unificar
todas las líneas de las celdas y mostrar una sola, pues, cuando definimos el
borde a una tabla, por defecto se visualiza doble.
- La
propiedad text-align, con el valor en
center, para alinear el texto al
centro. También es posible especificar a la derecha o a la izquierda.
- La
propiedad padding, con el valor en
ocho píxeles, para agregar espacio a los cuatro lados del texto. Se agregó en
el selector de las columnas y celdas, con la finalidad de tener más holgura
entre las mismas.
061-01_0910_ilu04. Especificación de
estilos a una tabla
Keynotes
- Las listas tienen gran importancia a la hora
de mostrar diferentes procedimientos. Al crearlas mediante el lenguaje HTML,
son visualizadas con un estilo básico, el cual podemos cambiar con diferentes
propiedades del lenguaje CSS, a fin de captar con mayor rapidez la atención del
usuario.
- Para
agregar un estilo diferente a cada ítem de una lista, es necesaria la propiedad
list-style-type, la cual será
agregada al selector li.
- En una
lista desordenada, tenemos tres diferentes tipos de valor: square para mostrar cuadrados, disc
para mostrar círculos rellenos, y circle
para mostrar círculos sin relleno.
- En
una lista ordenada, es posible cambiar los estilos con diferentes valores
disponibles en la página oficial de la organización W3C. Por ejemplo, tenemos lower-roman para número romanos en
minúsculas, lower-greek para números
griegos en minúsculas, y decimal-leading-zero
para preceder el decimal por un cero.
Misión
Para aplicar diseños vistosos a la información de
una página web, implementa estilos
CSS en listas y tablas, en base a las recomendaciones oficiales de este
lenguaje de diseño.
Pasos a seguir:
- Ubica el estándar actual de
CSS, y estudia un estilo diferente a los aprendidos.
- Crea un documento HTML con una
lista y una tabla.
- Crea un documento CSS
externo y especifica los estilos aprendidos.
- Presenta tu código a un
experto mediante vKonnect, y anota sus
sugerencias al respecto.
Sabrás que has tenido éxito cuando ejecutes tu
código, mediante el navegador web de
tu preferencia, y se muestren correctamente las especificaciones de estilos
realizadas.
Modifica el código con base en las sugerencias, y compártelos
tu vPages. Con tus compañeros debate
sobre mejorar tu procedimiento.
Tiempo disponible: 3 horas.
CierreLa implementación de estilos CSS en listas y tablas, en base a las recomendaciones
oficiales de este lenguaje, permite personalizar la presentación de cada una y
llamar la atención del usuario de la forma deseada. Por ende, aplicamos diseños
vistosos a la información de una página web.
La creatividad y la precisión son determinantes para lograr diseños
llamativos.
