Your SlideShare is downloading. ×
listas HTML
listas HTML
listas HTML
listas HTML
listas HTML
listas HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

listas HTML

5,253

Published on

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,253
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Lenguajes de Internet Utilización de las listas Las listas en CSS constituyen uno de los elementos más importantes para el desarrollo de una página web que respete los estándares. Así como es importante el marcado correcto de párrafos y encabezados, las listas también deben estar especificadas de la forma adecuada. Más allá de la marcación del documento HTML, con la ayuda de CSS es posible cambiar por completo la apariencia de las listas y crear elementos atractivos y de gran impacto visual, tanto para un simple listado como para la creación de una barra de navegación. El marcado de las listas En HTML la manera correcta de presentar una lista con ítems es utilizando las etiquetas UL y OL. La sigla UL proviene de Unordered List (listas sin orden) y OL de Ordered list (listas ordenadas). Al utilizar estas etiquetas en un documento HTML el navegador se encarga de colocar viñetas (cuando se usa UL) o numerar los ítems (al usar OL): Ejemplo Para lograr las listas anteriores el código HTML utilizado es: Lista con UL: <ul> <li>Argentina</li> <li>Brasil</li> <li>Uruguay</li> <li>Paraguay</li> </ul> Lista con OL: <ol> <li>Argentina</li> <li>Brasil</li> <li>Uruguay</li> <li>Paraguay</li> </ol> Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
  • 2. Lenguajes de Internet Dando formato a las listas Utilizando CSS es posible dar formato a las listas sin modificar el código HTML (ese precisamente es el chiste de las hojas de estilo). Por ejemplo es posible elegir entre una viñeta cuadrada (square), circular (disc, circle) o listas con letras (lower-roman, lower-alpha, upper-alpha, etc.) El código CSS para lograr la lista con viñeta cuadrada es este: ul{ list-style-type: square; } Utilizando imágenes En el ejemplo anterior se demostró que es posible variar el estilo de las listas usando los valores que nos da CSS de una forma muy sencilla. Asimismo, en muchas ocasiones, nuestros diseños requerirán de soluciones más estéticas que un simple círculo. Para ello CSS nos da la opción de incluir imágenes en nuestras listas utilizando dos métodos: reemplazar la viñeta por una imagen o añadirla como fondo. La segunda opción suele ser más práctica ya que es posible determinar la ubicación de la imagen desplazándola horizontal o verticalmente e intentar así una visualización similar en distintos navegadores. ul{ list-style-image: url(rombo.gif); } Esto hace que se reemplace la viñeta de la lista por la imagen indicada. Hay que tener en cuenta que cada navegador presenta en pantalla los elementos con algunas pequeñas diferencias entre sí. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
  • 3. Lenguajes de Internet Creación de un menú horizontal La creación de menús en CSS supone dos instancias a entender. En primer lugar debemos de tener en cuenta que la gran ventaja que presenta la creación de un menú basado en elementos de lista es su posibilidad de ampliar el rango de actualización, ya que basta agregar un nuevo elemento de lista (LI) en el documento HTML para que aparezca un nuevo ítem en el menú. Comenzaremos por ver la creación de un menú horizontal: 1. utilizaremos las etiquetas ul { } li { } 2. luego comenzaremos a asignar algunos atributos visuales: ul { list-style-type: none; } li { background-color: #F6E3CA; } La función list-style-type, elimina la propiedad de lista de nuestro listado, en referencia elimina la viñeta nativa de las listas sin formato 3. ahora haremos que los elementos de lista se alineen uno al lado del otro ul { list-style-type: none; } li { float: left; background-color: #F6E3CA; } La función float:left, hace que los elementos de lista dejen libre su costado derecho, ubicándose un elemento al costado de otro 4. lo que nos queda es asignar algunos estilos gráficos a fin de generar un referente diferenciador entre el texto normal y los elementos de navegación ul { list-style-type: none; } li { float: left; background-color: #F6E3CA; border: #D7C8B6 2px solid; margin-right: 10px; padding: 0 4px; } Hemos agregado un borde sólido de un determinado espesor y color, además de elementos de margenes y espaciados interiores por medio del atributo padding. 5. También se puede utilizar la pseudo-clase :hover para mejorar el resultado. Como Internet Explorer sólo admite esta propiedad sobre los enlaces, se debe poner el padding en el enlace en vez de en el elemento de la lista para que el cambio de color afecte a toda la opción del menú. ul { list-style-type: none; } li { float: left; background-color: #F6E3CA; margin-right: 10px; border: #D7C8B6 2px solid; } a { color: black; text-decoration: none; padding: 0 4px; } a:hover { background-color: white; color: #D7C8B6; } En esta parte se agregaron las etiquetas nativas de vínculo (<a>) con el atributo text- decoration:none; este atributo elimina de los textos vinculados el subrayado. a:hover esta dentro del mismo atributo pero se utiliza para el caso en que el usuario coloque el cursor sobre los elementos de lista para tener una variación visual (equivalente a la función rollover). Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
  • 4. Lenguajes de Internet Para el caso del menú vertical, las condiciones visuales serían las siguientes: #menuv { border: 1px solid #ACCFE8; border-width: 1px 1px 0 1px; width: 150px; font: 90% "Trebuchet MS", Arial, Helvetica, sans-serif; float: left; } menuuv será el nombre de nuestro contenedor (div) al cual le otorgaremos atributos de color, tamaño y tipo de letra, en este caso queda por omisión la función flota:left; ya que se entiende que si el menú es vertical, necesariamente acompaña en su diagramación a otro contenedor que tiene la información central. #menuv ul, li { list-style-type: none; } Como ya explicamos antes esta función asignadas a la lista sin formato y a los elementos de lista nos permite quitar el atributo de viñeta al listado. #menuv ul { margin: 0; padding: 0; } Quitamos los márgenes y los rellenos interiores a la lista. #menuv li { border-bottom: 1px solid #ACCFE8; } Con esto a cada elemento de lista le estamos un borde de base visualmente con un espesor y un color determinado, para que haga las veces de separador entre un elemento y otro de nuestro menú. #menuv a { text-decoration: none; color: #3366CC; background: #F0F7FC; display: block; padding: 3px 6px; width: 138px; } Condiciones gráficas para los elementos de la lista que funcionen como vínculos, destacar de esta parte del código la función Display:block; hace que los elementos de lista se muestren como bloques de color asignando un ancho fijo y no variable que dependa de la extensión del texto. #menuv a:hover { background: #DBEBF6; } Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
  • 5. Lenguajes de Internet Creación de una galería de fotos utilizando CSS Una galería de fotos al fin y al cabo no es más que una lista de elementos (en nuestro caso imágenes) que mostraremos como más nos convenga. Desde el punto de vista de la ordenación lógica de la información en nuestros documentos resulta razonable usar una lista para estructurar nuestros elementos, por tanto recordaremos la clase anterior en que creamos un listado, pero esta vez asignaremos otros valores para poder conformar nuestra galería. Normalmente estamos acostumbrados a ver las listas organizadas verticalmente, pero CSS nos permite jugar con los elementos de una lista para mostrarlos de distintas maneras. En nuestro caso, probablemente si organizáramos la lista verticalmente la apariencia de nuestra galería quedaría extraña comparada con una organización horizontal; por tanto, organizaremos nuestra lista horizontalmente, aplicando un display:inline y flotando los elementos a la izquierda para que fluyan unos a continuación a otros. Partimos del siguiente código html: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css/tres.css" rel="stylesheet" type="text/css"> </head> <body> <div id="principal"> <h3>GALERÍA CSS - Listas</h3> <ul> <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br> <span>Descripci&oacute;n de la imagen</span></a></li> <li><a href="#"><img src="img/2.jpg" border="0" alt=""/><br> <span>Descripci&oacute;n de la imagen</span></a></li> <li><a href="#"><img src="img/3.jpg" border="0" alt=""/><br> <span>Descripci&oacute;n de la imagen</span></a></li> <li><a href="#"><img src="img/4.jpg" border="0" alt=""/><br> <span>Descripci&oacute;n de la imagen</span></a></li> <li><a href="#"><img src="img/5.jpg" border="0" alt="0"/><br> <span>Descripci&oacute;n de la imagen</span></a></li> <li><a href="#"><img src="img/6.jpg" border="0" alt=""/><br> <span>Descripci&oacute;n de la imagen</span></a></li> <li><a href="#"><img src="img/7.jpg" border="0" alt=""/><br> <span>Descripci&oacute;n de la imagen</span></a></li> <li><a href="#"><img src="img/8.jpg" border="0" alt=""/><br> <span>Descripci&oacute;n de la imagen</span></a></li> </ul> </div> </body> </html> Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar
  • 6. Lenguajes de Internet Como puede apreciarse, hemos insertado dentro de cada <li> (list item) nuestra imagen y un comentario añadido con un <span>;lLa etiqueta <span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo. Creamos una nueva hoja CSS y asignamos valores a nuestra división que denominamos principal, de esta manera definimos los espacios a utilizar en nuestro documento: En CSS sería así: body{ background-color: #cccccc; font-family: helvetica; font-size: 10pt; color: #fff; } #principal li { display:inline; float:left; width:220px; background-color:#f5f7f9; padding:5px; margin:10px; text-align: center; border-right: #a5a7aa solid 1px; border-bottom: #a5a7aa solid 1px; } Nótese que las típicas viñetas que aparecen asociadas a las listas desordenadas desaparecen cuando aplicamos el display:inline, de la misma forma que si hubiéramos unsado un list-style:none. Podemos modificar las propiedades que queramos para lograr que la apariencia de cada uno de los elementos de la lista se ajuste a nuestro objetivo. Basándonos en los estilos que aplicamos en el ejemplo de la galería fotográfica con capas, cambiamos el color de fondo, el ancho de cada <li>, les damos margin y padding para presentarlos correctamente y damos estilo a los bordes para lograr apariencia de profundidad. Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar

×