Cómo formatear texto en listas HTML

Las listas HTML son extremadamente personalizables con CSS. Muchos menús de un sitio web están alimentados por listas HTML cuidadosamente formateadas. Si tienes el descaro de hojear el código fuente de Facebook, incluso puedes ver que usan listas de HTML no ordenadas para personalizar la navegación. Hay dos elementos para estilizar el texto en una lista: la etiqueta de lista base ("

") y la etiqueta del elemento de la lista ("
• "). También puede usar una clase o un estilo para especificar una sola lista o un conjunto de listas HTML. El formato del texto se puede manejar en cualquier nivel allí.

  1.

  Abra su archivo de hojas de estilo en cascada, que utiliza la extensión de archivo .css, en su editor de texto sin formato preferido. Especifique "ul" (o "ol" si está formateando una lista ordenada) o el ID de su etiqueta de lista. Por ejemplo, si estás formateando "

  , "empezarías con:

  ul {}

  2.

  Agregue el formato de texto junto con cualquier otro formato para su lista desordenada. Por ejemplo, si desea hacer que todo el texto de una lista desordenada sea de 12 puntos y azul, podría verse algo como esto:

  ul {font-size: 12pt; color: # 8CCCC8; }

  3.

  Cambie el tipo de estilo de lista: la imagen o el símbolo al principio de cada elemento de la lista. W3Schools.com especifica más de una docena de tipos diferentes para el estilo de lista. Si no quiere nada al principio de la lista, puede usar "list-style: none;", por ejemplo:

  ul {font-size: 12pt; color: # 8CCCC8; estilo de lista: ninguno; }

  4.

  Guarde su hoja de estilo y documento, luego pruebe los elementos de la lista en su navegador.

  Consejos

  • Si desea utilizar la lista como elemento de navegación horizontal, puede utilizar
  • "display: inline" y "float: left;".

  Advertencia

  • Solo use un editor de texto plano, como Notepad, Notepad ++ o TextWrangler, para editar archivos HTML y CSS.