divendres, 27 de novembre del 2015

Llistes. Donar format amb HTML5/CSS


El llenguatge HTML defineix tres tipus diferents de llistes per agrupar els elements: llistes no ordenades (es tracta d'una col · lecció simple d'elements en què no importa el seu ordre), llistes ordenades (similar a l'anterior, però els elements estan numerats i per tant, importa la seva ordre) i llistes de definició (un conjunt de termes i definicions similar a un diccionari).

En aquest post teniu els diferents tipus de llistes.  
Amb les propietats CSS podem:
  • Establir diferents marcadors d'elements de llista per a les llistes ordenades
  • Establir diferents marcadors d'elements de llista per a llistes desordenades
  • Establir una imatge com el marcador de element de la llista
Per donar format amb CSS tenim tres propietats:  
list-style-type: per indicar el marcador de la nostra llista
Els valors que pot agafar es veuen en aquest exemple


list-style-type: circle;
list-style-type: disc;
list-style-type: square;

list-style-type: armenian;
list-style-type: cjk-ideographic;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: georgian;
list-style-type: hebrew;
list-style-type: hiragana;
list-style-type: hiragana-iroha;
list-style-type: katakana;
list-style-type: katakana-iroha;
list-style-type: lower-alpha;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: lower-roman;
list-style-type: upper-alpha;
list-style-type: upper-latin;
list-style-type: upper-roman;

list-style-type: none;
list-style-type: inherit;



list-style-image: per indicar una imatge com a marcador
 
list-style-image: none|url|initial|inherit;

list-style-position: per indicar la posició del marcador  

list-style-position: inside|outside|initial|inherit;

El list-style propietat és una propietat abreujada. S'utilitza per establir totes les propietats de la llista en una sola declaració: 

ul {
    list-style: square inside url("sqpurple.gif");
} 


L'ordre és el següent:

list-style: list-style-type list-style-position list-style-image|initial|inherit; 

Cap comentari:

Publica un comentari a l'entrada