Técnico Informático curioso, lector activo de las nuevas tecnologías, amante de las series de televisión y usuario del respetable mundo del enredo.

Aug 25, 2016

Web.CSS.Listas.

Ya se vió como hacer listas en HTML, pero también se le puede dar estilo en CSS.

Tipos de Estilos.

Se refiere al estilo que tiene los elementos de una lista. Un ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
    ul.a {
        list-style-type: circle;
    }

    ul.b {
        list-style-type: square;
    }

    ol.c {
        list-style-type: upper-roman;
    }

    ol.d {
        list-style-type: lower-alpha;
    }

    ul.e {
        list-style-image: url('imagen.gif');
    }
</style>
</head>
<body>

<p>Listas Ordenadas:</p>
    <ul class="a">
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ul>

<ul class="b">
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ul>

<ul class="e">
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ul>

<p>Lista ordenadas:</p>
    <ol class="c">
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ol>

    <ol class="d">
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ol>

</body>
</html>

Con la propiedad list-style-type se le da estilo a los elementos de una lista y los hay de 4 tipos:

list-style-type: circle. Efecto círculos.
list-style-type: square. Efecto cuadrado.
list-style-type: upper-roman. Efecto números romanos.
list-style-type: lower-alpha. Efectos letras minúsculas.
list-style-type: upper-alpha. Efecto letras mayúsculas.
list-style-image: url(‘imagen.gif’). Usa la imagen para darle ese efecto a los elementos de una lista.

Tabulaciones en los elementos de una lista.

Aquí se trata de darle tabulaciones o no a los elementos de una lista y todo ello con la propiedad list-style-position. Un ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
    ul.a {list-style-position:inside;}
    ul.b {list-style-position:outside;}
</style>
</head>

<body>
    <p>Inside:</p>
    <ul class="a">
        <li>Café</li>
        <li>Té</li>
       <li>ColaCao</li>
    </ul>

    <p>Outside:</p>
    <ul class="b">
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ul>
</body>
</html>

List-style-position: inside. Indica a los elementos de la lista que tiene que tener una tabulación hacia dentro.
List-style-position: outside. Indica a los elementos de la lista que no tiene ninguna tabulación. Si no se le indica nada esta opción es por defecto.

Dar todas las opciones en una sola instrucción.

<!DOCTYPE html>
<html>
<head>
<style>
    ul {
        list-style: square inside url("sqpurple.gif");
    }
</style>
</head>
<body>

    <ul>
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ul>

</body>
</html>

Con la propiedad list-style se puede dar todos los valores de una sola vez, la única diferencia es que cambie un poco el orden: list-style-type, list-style-position y list-style-image.

Ahora que ya se ha visto como darle estilos a los listas con CSS, mezclaremos un poco las cosas a ver que sale:

<!DOCTYPE html>
<html>
<head>
<style>
    ol {
        background-color: #ff9999;
        padding: 20px;
    }

    ul {
        background-color: #3399ff;
        padding: 20px;
    }

    ol li {
        background-color: #ffe5e5;
        padding: 5px;
        margin-left: 35px;
    }

    ul li {
        background-color: #cce5ff;
        margin: 5px;
    }
</style>
</head>
<body>

    <ol>
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ol>

    <ul>
        <li>Café</li>
        <li>Té</li>
        <li>ColaCao</li>
    </ul>

</body>
</html>

En este ejemplo, se hacen dos lista distintas y ya se mezclan márgenes, color de fondo y al mismo tiempo se le da estilos distintos a los elementos.

Continúa por Tablas.