Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 103 vistas

    Listas en HTML

    Cargado por

    Carlos Garcia
    este documento muestra las características de las listas ordenadas y no ordenadas de HTML, así como su estilo usando CSS

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Listas en HTML

    Cargado por

    Carlos Garcia
    103 vistas2 páginas
    este documento muestra las características de las listas ordenadas y no ordenadas de HTML, así como su estilo usando CSS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    este documento muestra las características de las listas ordenadas y no ordenadas de HTML, así como su estilo usando CSS

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    103 vistas2 páginas

    Listas en HTML

    Cargado por

    Carlos Garcia
    este documento muestra las características de las listas ordenadas y no ordenadas de HTML, así como su estilo usando CSS

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 2

    HTML5 - LISTAS

    Listas no ordenadas
    Una lista sin orden comienza con la etiqueta <ul> y Ejemplo – Lista sin orden Ejemplo – Lista ordenada
    cada elemento de la lista comienza con la etiqueta <!DOCTYPE html> <!DOCTYPE html>
    <li>. Los elementos de la lista se marcarán con viñetas
    <html> <html>
    o pequeños círculos negros (Balas). La viñeta se
    <body> <body>
    cambia agregando al atributo style una de las
    <h1>Listas en HTML5</h1>
    siguientes reglas:
    <h2>Lista no ordenada con <h1>Listas en HTML5</h1>

    list-style-type:disc Viñeta predeterminada viñetas <h2>Lista Ordenada</h2>

    list-style-type:circle Viñeta de círculos predeterminadas</h2>

    list-style-type:square Viñeta cuadrada. <ol>


    <ul> <li>Café</li>
    list-style-type:none Ninguno.
    <li>Café</li> <li>Te</li>
    Listas ordenadas <li>Te</li> <li>Leche</li>

    Una lista ordenada comienza con la etiqueta <ol> <li>Leche</li> </ol>

    y cada elemento de la lista comienza con la </ul>

    etiqueta <li>. Los elementos de la lista serán </body>


    marcados con números. Los cuales se pueden cambiar </body> </html>
    por letras o números romanos agregando al atributo </html>
    style una de las siguientes reglas:

    type="1" Numeración predeterminada


    type="A" Literales con letras mayúsculas
    type="a" Literales con letras minúsculas
    type="I" Números romanos en mayúsculas.
    type="i" Nueros romanos en minúsculas.

    Listas de descripción
    HTML también es compatible con las listas de Ejemplo – Lista descriptiva Ejemplo – Lista anidada
    descripción, una lista de descripción es una lista de <!DOCTYPE html> <!DOCTYPE html>
    términos, con una descripción de cada término. La <html> <html>
    etiqueta <dl> define la lista de descripción, la <body> <body>

    etiqueta <dt> define el término (o nombre), y la <h2>Una lista descriptiva</h2> <h2>Lista anidada</h2>
    etiqueta <dd> describe cada término.
    <dl> <ul>
    Listas anidadas <dt>Café</dt> <li>Café</li>
    <dd>- Bebida negra y <li>Te
    Las lista se puede anidar (listas dentro de listas), caliente</dd> <ul>
    simplemente se crea una lista ordenada o sin orden <dt>Leche</dt> <li>Te negro</li>
    dentro de una de las etiquetas <li> de la lista <dd>- Bebida blanca y fria</dd> <li>te verde</li>
    </dl> </ul>
    principal.
    </li>
    </body> <li>Leche</li>
    </html> </ul>

    </body>
    </html>
    Las listas horizontales
    Las listas en HTML pueden ser cambiadas Ejemplo – HTML Ejemplo – CSS interno
    de muchas maneras diferentes con CSS, Una
    <!DOCTYPE html> <style>
    forma popular, es cambiar el estilo de una
    <html> ul#menu li {
    lista para que se muestre en forma
    horizontal. Para ello se utiliza un atributo display:inline;
    <head>
    id para identificar la lista a la que }
    cambiaremos la orientación (en este ejemplo </style>
    usamos el id “menu”); identificamos </head>

    además las etiquetas li de la lista y Ejemplo – CSS interno adicional


    aplicamos el atributo CSS diplay con el <body>
    valor inline, con esta regla las etiquetas li ul#menu {
    de la lista con id menu se muestran de <h2>Horizontal List</h2> padding: 0;
    forma horizontal. }
    <ul id="menu">
    Con un poco de CSS adicional, puede hacer ul#menu li a {
    <li>HTML</li>
    que se vea como un menú. background-color: black;
    <li>CSS</li>
    A cada li se anida una etiqueta <a> y para <li>JavaScript</li> color: white;

    cada una de ellas el atributo href será “#” <li>Wordpress</li> padding: 10px 20px;
    </ul> text-decoration: none;
    Se crean 3 reglas adicionales border-radius: 4px 4px 0 0;
    </body> }
    ul#menu , ul#menu li a, ul#menu li a:hover
    </html>
    ul#menu li a:hover {
    background-color: orange;
    }

     Tome nota de cuantos atributos CSS nuevos puede identificar en este ejemplo.
     ¿Cuantos id se necesitan para lograr este resultado?
     Pruebe cambiar los atributos de color y fuente del ejercicio.

    También podría gustarte