11.07.2015 Views

el tutorial de Dreamweaver

el tutorial de Dreamweaver

el tutorial de Dreamweaver

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Unidad 17. Estilos CSS Avanzado (VIII)17.8Controles <strong>de</strong> listaHemos visto muchas propieda<strong>de</strong>s que afectan al modo en <strong>el</strong> que se muestran los textos <strong>de</strong>nuestras páginas.Ahora haremos un alto para ver unas cuantas propieda<strong>de</strong>s que utilizaremos para dar estilo anuestras listas.list-style-type permite establecer <strong>el</strong> tipo <strong>de</strong> viñeta utilizada en las listas, pue<strong>de</strong> tomar los valoresdisc, circle, square, <strong>de</strong>cimal, lower-roman, upper-roman, lower-alpha, upper-alpha y none.• disc 1• disc 2• disc 3o circle 1o circle 2o circle 3• square 1• square 2• square 31. <strong>de</strong>cimal 12. <strong>de</strong>cimal 23. <strong>de</strong>cimal 3i. lower-roman 1ii. lower-roman 2iii. lower-roman 3I. upper-roman 1II. upper-roman 2III. upper-roman 3a. lower-alpha 1b. lower-alpha 2c. lower-alpha 3A. upper-alpha 1B. upper-alpha 2C. upper-alpha 3• none 1• none 2• none 3Este estilo <strong>de</strong>be ir asociado a la etiqueta li, ul o ol.list-style-image permite mostrar una imagen en lugar <strong>de</strong> una viñeta.La forma en la que lo haremos será la siguiente:ul { list-style-image: url(graficos/lista.gif); }Así <strong>de</strong>clararemos <strong>el</strong> estilo. Luego bastará con escribir una lista <strong>de</strong>sor<strong>de</strong>nada, pues hemos utilizado<strong>el</strong> s<strong>el</strong>ector ul para marcar <strong>el</strong> estilo.• <strong>el</strong>emento 1• <strong>el</strong>emento 2• <strong>el</strong>emento 3• <strong>el</strong>emento 4

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!