Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 71

Tras el elemento <header>, el siguiente elemento estructural es <nav>, que tiene el propósito de facilitar la navegación. Los vínculos agrupados dentro de este elemento representarán el menú del sitio web. Este menú será solo una barra ubicada debajo de la cabecera. Tal como sucedía con el elemento <header>, la mayoría de los estilos que necesitamos para posicionar el elemento <nav> ya han sido asignados: <nav> es un elemento de bloque, por tanto, se ubicará debajo del elemento anterior; el ancho predeterminado es 100%, por lo que será tan amplio como su padre (la caja principal) y, también por defecto, será tan alto como su contenido y los márgenes establecidos. De esta forma, solo tenemos que hacerlo más atractivo y esto lo haremos añadiendo un fondo gris y un pequeño margen interno para separar las opciones del menú del borde de éste.

Código 2-36

Adición de estilos de <nav>.

En el Código 2-36, la primera regla hace referencia al elemento <nav> a través de su id, luego cambia su fondo y añade márgenes internos de 5 px y 15 px usando la propiedad padding. Por otra parte, dentro de la barra de navegación hay una lista creada con los elementos <ul> y <li>. De forma predeterminada, los elementos de una lista se sitúan uno bajo el otro. Para modificar esto y poner todas las opciones del menú en línea una junto a la otra, creamos referencias a los elementos <li> ubicados dentro de este elemento <nav> en particular usando el selector #menu li. Finalmente asignamos el estilo display: inline-block para cambiar su tipo. A diferencia de los elementos block, los elementos inline-block, estandarizado en CSS3, no generan saltos de línea pero pueden ser tratados como bloques y tener ancho fijo. Si no se establece un ancho, éste parámetro establece el tamaño del elemento de acuerdo con el tamaño de su contenido.

Conceptos básicos

La propiedad list-style se refiere a los pequeños gráficos que se ubican delante de los elementos de una lista (normalmente llamados viñetas). En nuestro ejemplo, hemos asignado el valor none para esta propiedad para eliminar las viñetas. Sin embargo, hay muchos valores disponibles, tales como square, circle, decimal, etc. La propiedad permite declarar no solo el tipo de gráfico sino también la posición (inside o outside) y una imagen personalizada (por ejemplo, list-style: url (’mybullet.jpg’);).