JGBwiki

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
[[html|HTML]]

====== CSS ======

Como en el caso del tutorial de [[html|HTML]]: un tutorial básico de CSS; hay mucho más para aprender, pero por algo hay que empezar.

===== Introducción =====

El lenguaje CSS vio la luz en 1996, unos cuantos años más tarde que HTML. Por ello, durante esos años, el formateo del contenido de las páginas web se hacía mediante HTML.

===== Previo =====

Las Hojas de Estilo en Cascada, //Cascading Style Sheets (CSS)//, se utilizan para dar formato al contenido de las páginas web (colores, tamaños y tipos de letra de cada una de las partes del texto y/o de los bloques de la página, márgenes, colores de fondo de las distintas partes, formato de los enlaces,…). Desde hace unos cuantos años, [[html|HTML]] solo se utiliza para estructurar el contenido de las páginas web (títulos, párrafos, listas, tablas, enlaces, bloques de texto,…).

Uno de los interés de CSS está en que se pueden enlazar (mediante la etiqueta ''link'' colocada dentro de la etiqueta ''head'') varias páginas web a un mismo archivo CSS (.css) que les dará el formato; por tanto, modificando ese archivo CSS se modificarán todos los archivos HTML que lo enlacen, por lo que no es necesario hacer las modificaciones de formato página a página (por ejemplo, si son 20 páginas, modificaciones en todos los elementos que se quieran cambiar de 20 páginas... ¡Y no te olvides ninguno!).

También se puede poner código CSS directamente en el código de una página [[html|HTML]]:

  * Mediante la etiqueta ''style'' de HTML, esta se coloca dentro de la etiqueta ''head'' de la página HTML y afecta a todos los elementos correspondientes de la página;
  * Mediante el atributo ''style'' de HTML, este se coloca en cualquier etiqueta de HTML y solo afecta a dicho elemento (es un método muy poco eficiente y no muy diferente a aplicar estilos mediante etiquetas de presentación de HTML, si posteriormente se desea modificar algún formato de una etiqueta se deberán buscar dichas etiquetas por todo el archivo HTML). No se volverá a hablar más de esta opción en este tutorial.

El término //en cascada// de CSS alude a que hay un orden de prioridades en el caso de que se definan varios estilos para un mismo tipo de elemento. En lo que se va ha explicar aquí este orden de prioridades es el siguiente:

  * Se aplica el estilo de un archivo externo //.css// al que se ha enlazado mediante la etiqueta ''link'';
  * Si en el archivo HTML se han definido unos estilos mediante la etiqueta ''style'' (puesta en la cabecera de la página), estos sobrescriben a los del archivo CSS externo;
  * Si en el archivo HTML se han definido unos estilos en un elemento mediante el atributo ''style'', estos sobrescriben a los de la etiqueta ''style''.

Otros estilos existentes son el que utiliza cada navegador y el personalizado por el usuario (cuando se aplica el modificador ''!important'' este estilo tiene prioridad sobre todos los demás; por ejemplo: ''{font-size: 16px !important;}''). Al respecto de esto, dado que nada se puede hacer, no se dirá nada más.

==== Material necesario ====

Lo primero que te hará falta es un **editor de texto** (no un procesador de texto, este formatea el texto y lo hace ininteligible a los navegadores). Como editor de texto bien te puede servir el Bloc de Notas que viene con tu sistema operativo (aunque puedes encontrar muchos editores de texto especializados, gratuitos y de pago, en Internet). No olvides que cuando guardes los archivos que hayas hecho debes hacerlo con la extensión //.css//, no con la extensión //.txt//.

Otra cosa imprescindible que te hará falta es tener/hacer un archivo [[html|HTML]] en el que aplicar los formatos del archico CSS.

Y la otra cosa imprescindible que te hará falta es un **navegador web**, tu sistema operativo seguro que ya tiene uno instalado.

Así que si tienes ordenador ya tienes todo lo necesario para hacer una página web que incluya formateo del contenido.

===== Reglas y selectores =====

La estructura básica de una **regla** está constituida por uno o más **selectores** y su **declaración** (con sus **propiedades** y sus **valores** correspondientes). Veamos un ejemplo:

''h1 {color: #FFFF00; background-color: #555555}''

Donde:

  * Todo el conjunto es una **regla**;
  * ''h1'': es un **selector** (en este ejemplo, para la etiqueta [[html|HTML]] ''h1'');
  * ''{'' y ''}'': encierran los elementos de la **declaración** de un selector;
  * ''color'', ''background'': son las **propiedades** de este ejemplo a las que se les va a especificar el formato que deben tener;
  * '':'': dos puntos, introduce el valor de una propiedad;
  * '';'': punto y coma, separa propiedades entre si;
  * ''#FFFF00'' y ''#AAAAAA'': son los **valores** que toman las propiedades de este ejemplo.

Los elementos del selector (las propiedades y sus valores) definen los estilos a aplicar a los elementos del documento [[html|HTML]] correspondientes al selector (en este ejemplo: el formato, color del texto y del fondo, que tendrán todas las cabeceras de tipo 1 que aparezcan en la página web).

==== Etiqueta style ====

Veamos un ejemplo de CSS aplicado a una página HTML mediante la etiqueta ''style''((Desplaza el código hacia la izquierda si no consigues ver todo el contenido y el código que queda más a la derecha.)):

<file html pagina_con_css_style.html>

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Un mal sueño</title>
    <style>
       body {background-color: #5555ff}
       h1, h2 {color: #FFFF00; background-color: #55555f; font-family: verdana; font-size: 3em}
       p {color: #555555; background-color: #EEEEEE; font-family: arial, sans-serif}
    </style>
  </head>
  <body>
    <h1>Un mal sueño lo tiene cualquiera</h1>
    <p>Se despertó con el corazón empapado y el cuerpo acelerado, o algo así le parecía. Trató de mirar a su alrededor pero no consiguió ver nada en la oscuridad de la habitación; eso le calmó... Hasta que pensó que quizá la pesadilla siguiese acechando en la oscuridad, a la espera de que se volviese a dormir.</p>
    <p>"Pero habrá que dormir", se dice.</p>
  </body>
</html>

</file>

Para ver el resultado puedes copiar el código y pegarlo en el editor de texto que gustes, guardarlo como archivo html y abrir dicho archivo. También puedes guardar directamente el archivo pinchando en //pagina_con_css_style.html// que hay justo encima del recuadro del código. O, también, puedes copiar el código y pegarlo en el editor en línea de [[https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default_default|W3Schools]] (aprovecha para modificar el valor de las propiedades para ver el efecto que esto produce).

Se pueden agrupar varios elementos, separados mediante comas, para darles el mismo formato. En el ejemplo no hay encabezados de tipo ''h2'', pero si los hubiese estos se verían igual que los de tipo ''h1'' ya que se ha puesto que tienen el mismo formato (añade un encabezado de tipo ''h2'' al código del ejemplo para comprobarlo).

Para los párrafos se han definido dos tipos de letra: ''font-family: arial, sans-serif''. El segundo tipo es para usar en caso de que el primero no esté disponible.

==== Etiqueta link ====

La etiqueta ''link'', que como ya se ha dicho se colocada dentro de la etiqueta ''head'', tiene el siguiente formato:

''<link href="..." rel="stylesheet">''.

Donde los puntos suspensivos, ''...'', indican la ruta ([[enlaces_relativos_absolutos|relativa o absoluta]]) al archivo CSS.

Veamos un ejemplo basado en el ejemplo anterior: en vez de poner el código CSS dentro del archivo HTML se va a poner en un archivo CSS al que se enlazará en la página HTML. Ambos archivos se encontrarán en la misma carpeta, por lo que la ruta al archivo CSS será, simplemente, el nombre del archivo.

El archivo CSS:

<file css estilo_css.css>

body {
     background-color: #5555ff
}
h1, h2 {
     color: #FFFF00; 
     background-color: #55555f; 
     font-family: verdana; 
     font-size: 3em
}
p {
     color: #555555; 
     background-color: #EEEEEE; 
     font-family: arial, sans-serif
}

</file>

El código es el mismo del ejemplo anterior pero se ha modificado la presentación para mejorar la legibilidad.

El archivo HTML, que enlaza al archivo CSS mediante ''<link href="estilo_css.css" rel="stylesheet">'':

<file html pagina_con_css_link.html>

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Un mal sueño</title>
    <link href="estilo_css.css" rel="stylesheet">
  </head>
  <body>
    <h1>Un mal sueño lo tiene cualquiera</h1>
    <p>Se despertó con el corazón empapado y el cuerpo acelerado, o algo así le parecía. Trató de mirar a su alrededor pero no consiguió ver nada en la oscuridad de la habitación; eso le calmó... Hasta que pensó que quizá la pesadilla siguiese acechando en la oscuridad, a la espera de que se volviese a dormir.</p>
    <p>"Pero habrá que dormir", se dice.</p>
  </body>
</html>

</file>

Copia los códigos con un editor de texto, guárdalos con sus nombre correspondientes (o guarda los archivos pinchando sobre el nombre de los mismos) y abre el archivo HTML con el navegador web para ver el resultado. También puedes utilizar el editor en línea de [[https://www.cubicfactory.com/jseditor/|Cubic Factory]] para visualizarlo (tienes que tener activos los paneles //HTML//, //CSS// y //Output// para poder introducir el código en los dos primeros y visualizar el resultado en el tercero).

==== Tipos de selectores y algunos selectores básicos ====

  * **Selector 'tipo'**

Hace referencia a todos los elementos de un mismo tipo. Un ejemplo de este selector sería el primero que se presentó:

''h1 {color: #FFFF00; background-color: #555555}'', este selector modifica todos los encabezados de tipo 1.

  * **Selector '.clase'**

Da formato a los elementos HTML que contengan el atributo ''class'' que se define. En el archivo CSS este tipo de selector va precedido de un punto, pero en el código HTML ese punto no se pone. Un nombre de clase puede ser usado en múltiples elementos HTML. Por ejemplo, tiene la forma:

''.serepite {color: #434343; background-color: #DDDDDD; font-size: 1em; font-family: segoe ui, comic sans ms}'', modifica todos los elementos cuyo valor del atributo ''class'' sea //serepite//.

  * **Selector '#identificador'** 

El el tutorial de HTML  en su apartado [[html#enlaces|enlaces]] se habló del atributo ''id'' cuando se explicaron las marcas y se especificó que un nombre de ''id'' solo puede ser usado por un elemento HTML de la página (no puede haber dos marcas en la misma página con el mismo nombre). En el archivo CSS este tipo de selector va precedido de un símbolo //#//, pero en el código HTML el símbolo //#// no se pone para definir el identificador (sí se pone el símbolo //#// cuando se usa el identificador en un enlace, como marca para ir a ese punto concreto de la página; si es necesario, véase el apartado [[html#enlaces|enlaces]]). Por ejemplo, tiene la forma:

''#NombreDeLaMarca_h1 {color: #FFFF00; text-align: center; background-color: #000000; font-family: Georgia}''

Un ejemplo completo (archivo CSS y HTML):

<file css ajedrez_css.html>

h1 {
  color: #FFFF00; 
  font-size: 2em; 
  background-color: #555555;
}
h1.normal {
  font-weight: normal;
}
p {color: #434343; 
  font-family: arial; 
  background-color: #AAAAAA;
}
#torre, #alfil {
  color: #FFFF00; 
  font-family: Georgia; 
  font-size: 1.5em; 
  text-align: center; 
  background-color: #000000;
}
.serepite {
  color: #009900; 
  font-family: Georgia; 
  font-size: 1em; 
  background-color: #BBBB00;
}
.serepite span {
  font-size: 1.5em;
}
.ennegrita {
  font-weight: bolder;
}

</file>

Las propiedades que no se especifiquen tendrán el valor por defecto. Por ejemplo, no se ha especificado el tamaño de texto que tendrán los párrafos (selector ''p'') por lo que los párrafos (''<p></p>'') tendrán el tamaño de letra por defecto.

<file html ajedrez.html>

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ajedrez</title>
    <link href="ajedrez_css.css" rel="stylesheet">
  </head>
  <body>
    <h1>Ajedrez</h1>  
    <h1 id="torre">Torre</h1>
    <h1 class="normal">Movimiento de la torre</h1>
      <p class="serepite">La torre sólo puede mover de manera <span>paralela</span> o <span>perpendicular</span> a los jugadores, es decir, sólo puede jugar a través de las filas y columnas.</p>
      <p>Es por ello que como máximo puede jugar 14 casillas, ya se encuentre esta en el centro, en el lateral o en una esquina del tablero.</p>
      <p class="serepite">No puede, como ocurre con el caballo, pasar por encima de otras piezas o peones, ya sean propias o del contrario.</p>
    <h1 id="alfil">Movimiento del alfil</h1>
      <p class="serepite ennegrita">Más texto...</p>
  </body>
</html>

</file>

Las etiquetas ''h1'' y ''p'' tienen su formato definido por los selectores tipo ''h1'' y ''p'', pero hay varios párrafos que tienen un formato diferente porque llevan un atributo de tipo ''class'' cuyo selector, definido en el archivo CSS, los modifica.

''id="torre"'' e ''id="alfil"'' son identificadores únicos con su propio formato (diferente del del otro encabezado de tipo 1) definido en el archivo CSS mediante los selectores de tipo identificador ''#torre, #alfil''. Además, son marcas a las que se puede enlazar para ir a esa parte concreta de la página.

==== Combinaciones y anidamiento ====

=== Combinar clases ===

En el archivo HTML se pueden tener atributos ''class'' con múltiples valores, separados por espacio, de los que tomarán su formato; en el ejemplo: ''class="serepite ennegrita"'' (con lo que se obtiene el formato combinación de los atributos de los selectores //serepite// y //ennegrita//.

=== Combinar selectores ===

También se pueden combinar selectores de //tipo// con selectores de //clase//; por ejemplo: ''h1.normal {font-weight: normal;}'' en el archivo CSS y el código ''<h1 class="normal">Movimiento de la torre</h1>'' en el archivo HTML (con lo que se obtiene un encabezado de tipo 1 con un grosor de fuente normal, en vez de en negrita).

=== Anidar selectores ===

Veamos unos ejemplos:
  * la regla ''.serepite span {font-size: 1.5em;}'' aplicará el formato a las etiquetas ''span'' anidadas en una etiqueta ''.serepite''; 
  * una regla del tipo ''div span {...}'' aplicaría el formato a las etiquetas ''span'' anidadas en una etiqueta ''div''; 
  * una regla del tipo ''nav a {...}'' aplicaría el formato a las etiquetas ''a'' (enlaces) anidadas en una etiqueta ''nav'' (las etiquetas HTML ''div'' y ''span'' se tratarán un poco más adelante).


==== Algunas propiedades ====

  * ''color''((Respecto a los [[colores_web|colores]].)): especifica el color, por ejemplo: ''{color: rgb(128,128,128);}'' u ''{color: #888888;}'' u ''{color: #888;}''. Uso en //color//, para el color del texto, //background-color// y //border-color//;
    * ''opacity'': valor entre 0, transparente, y 1, opaco;
  * ''background'':
    * ''background-color'': especifica el color del fondo, por ejemplo: ''{background-color: rgb(255,255,255);}'' o ''{background-color: #FFFFFF;}'';
    * ''background-image'': específica una imagen de fondo (por ejemplo, para una imagen jpg llamada //fondo// que se encuentra en la misma carpeta: ''{background-image:  url(fondo.jpg);}'';
    * ''background-position'': por ejemplo: ''left top'';
    * ''background-repeat'': valores: ''repeat'', ''no-repeat'';
  * ''font'':
    * ''font-family'': especifica el tipo de letra, se pueden indicar tantas como se desee. Familias genéricas de fuentes: serif, sans-serif, cursive y monospace. Por ejemplo: ''{font-family: monospace;}'';
    * ''font-size'': especifica el tamaño del texto, es recomendable usar tamaños relativos (como ''em'' o ''%'') para permitir al usuario cambiar el tamaño de la fuente según sus necesidades; ''1em'' o ''100%'' corresponderá a ''16px'' si no se a definido otra cosa con anterioridad (como ''body {font-size: 12px;}'', verbigracia). O se puede usar la unidad ''vw'' (//viewport width//) que permite el cambio automático del tamaño de fuente en función del tamaño de pantalla. Por ejemplo: ''body {font-size: 100%;}'' y para el resto de elementos utilizar ''em'', ''{font-size: 1em;}'', ''{font-size: 'X'em;}'',...:
      * tamaño absoluto (''xx-small'', ''x-small'', ''small'', ''medium'', ''large'', ''x-large'', ''xx-large'');
      * tamaño relativo (''larger'', ''smaller'');
      * tamaño en unidades (''em'', ''vw'', ''px'', ''cm'', ''mm'', ''in'',...);
      * tamaño en porcentaje (''%'').
    * ''font-style'': especifica el tipo de letra (''normal'', ''italic'' y ''oblique''). Por ejemplo: ''{font-style: italic;}'';
    * ''font-variant'': especifica la variante de los caracteres (''normal'', ''small-caps'')((small-caps = versalitas: mayúsculas de igual tamaño que la letra minúscula del texto en el que aparece.));
    * ''font-weight'': especifica el grosor de los caracteres (''lighter'', ''normal'', ''bold'', ''bolder'', ''100'', ''200'', ''300'', ''400'', ''500'', ''600'', ''700'', ''800'', ''900''). Por ejemplo: ''{font-weight: bolder;}''.
  * ''text'':
    * ''text-align'': especifica la lineación del texto (''left'', ''center'', ''right'', ''justify''). Por ejemplo: ''{text-align: justify;}'';
    * ''text-decoration'': especifica alguna decoración (''none'', ''underline'', ''overline'', ''line-through'', ''blink''). Por ejemplo: ''{text-decoration: underline;}'';
    * ''text-indent'': especifica la sangría de la primera línea del texto (''%'', ''em'', ''px'', ''cm'', ''mm'', ''in'',...). Por ejemplo: ''{text-indent: 8%;}'';
    * ''text-transform'': convierte el texto en minúsculas o en mayúsculas (''none'', ''lowercase'', ''uppercase'', ''capitalize''). Por ejemplo: ''{text-transform: lowercase;}''.
  * Opciones de accesibilidad:
    * ''letter-spacing'': especifica la separación entre los caracteres del texto (''%'', ''em'', ''px'', ''cm'', ''mm'', ''in'',...), admite números negativos. Por ejemplo: ''{letter-spacing: 2px;}'';
    * ''word-spacing'': especifica la separación entre las palabras del texto (''%'', ''em'', ''px'', ''cm'', ''mm'', ''in'',...), admite números negativos. Por ejemplo: ''{word-spacing: 1em;}'';
    * ''line-height'': especifica la altura mínima entre las líneas del texto (''%'', ''em'', ''px'', ''cm'', ''mm'', ''in'',...), **no** admite números negativos. Por ejemplo: ''{line-height: 1.5em((Un 150%.));}'';
    * ''white-space'': puede tomar los valores ''normal'', ''pre'', ''nowrap'', ''pre-wrap'', ''pre-line''.
  * ''vertical-align'': ''top'', ''middle'', ''bottom'';
  * Modelo de caja: para contenedores (se verán un poco más abajo) como párrafos, 'listas, ''header'', ''nav'', ''main'', ''article'', ''figure'', ''aside'', ''footer'', ''div'',...:
    * Anchura y altura:
      * ''width'': ancho del contenido (sin ''padding'', ''border'' y ''margin'', se verán a continuación); 
      * ''height'': alto del contenido (sin ''padding'', ''border'' y ''margin'');
      * ''min-width'';
      * ''min-height'';
      * ''max-width'';
      * ''max-height''.
    * ''content'': el contenido que hay en un contenedor;
    * ''padding'': relleno, deja un espacio vacío alrededor del contenido de un contenedor, es opcional. Se puede especificar de manera individual el espaciado de cada uno de los lados:
      * ''padding-top'';
      * ''padding-left'';
      * ''padding-bottom'';
      * ''padding-right''.
    * ''border'': borde de un contenedor, es opcional. Por ejemplo: ''{border: 1px outset rgb(34,139,34)}'', ''{border: 1px solid #aaaaaa}'';
      * ''border-collapse'': ''collapse'', ''no-collapse'';
      * ''border-color'': por ejemplo: ''rgb(34,139,34)'';
      * ''border-spacing'': por ejemplo: ''0px'';
      * ''border-style'': solid, dotted;
      * ''border-width'': 'X'px, 'X'em, medium, thick,... Ejemplo: ''5px 4px 3px 2px'' (en el orden: arriba, derecha, abajo, izquierda), ''5px 2px'' (arriba y abajo, derecha e izquierda).
    * ''margin'': margen de un contenedor, es opcional, es transparente. Entre dos contenedores adyacentes el margen total es el margen mayor de los dos contenedores, no la suma de los márgenes de ambos contenedores (ejemplo: dos contenedores adyacentes, uno con un margen de 10px y otro con un margen de 20px: el margen de separación entre los contenedores no es 30px, la suma, es de 20px, el mayor de ellos) Se puede especificar de manera individual el espaciado de cada uno de los lados:
      * ''margin-top'';
      * ''margin-left'';
      * ''margin-bottom'';
      * ''margin-right''.
    * ''clear'';
    * ''display'': por ejemplo: ''block'';
    * ''visibility'';
    * ''float'': flotante, permite modificar la disposición, por ejemplo: ''left'' inicia a la izquierda (y en una lista lo hace en horizontal), ''center'' el valor por defecto (en una lista, en vertical), ''right'' inicia a la derecha (y en una lista lo hace en horizontal);
    * ''overflow''
      * ''overflow-x'';
      * ''overflow-y''.
    * ''box-sizing'' (CSS3):
      * ''content-box'': para que la anchura y la altura especificada afecta solo al contenido;
      * ''padding.box'': para que la anchura y la altura especificada afecta al contenido y al padding;
      * ''border-box'': para que la anchura y la altura especificada afecta al contenido, al padding y al borde;
      * ''inherit'': hereda el formato del elemento padre.
  * Herencia: solo para que conozcas su existencia.
    * ''inherit'': este valor sirve para que el elemento sobre el que se aplica herede el formato del elemento padre. Por ejemplo: ''a {color: inherit;}'';
    * ''initial'': este valor sirve para que el elemento sobre el que se aplica **no** herede el formato del elemento padre. Por ejemplo: ''p {color: initial;}''.

==== Otras etiquetas HTML ====

Aquí se van a presentar algunas otras etiquetas HTML que no aparecieron en el tutorial de [[html|HTML]] por ser dicho tutorial de carácter muy básico. Se presentan ahora por el interés que tienen para dar formato a diferentes partes de un archivo HTML.

  * ''header'': es un contenedor que sirve para agrupar los elementos de la cabecera de la página HTML (título, banner, un eslogan,...);
  * ''nav'': es un contenedor que sirve para agrupar los elementos de navegación de la página HTML (el menú, un buscador interno y cualquier otra cosa que se considere que puede ir ahí);
  * ''main'': es un contenedor que sirve para agrupar los elementos del cuerpo de la página HTML;
  * ''article'': es un contenedor que sirve para agrupar elementos dentro del contenedor ''main'';
  * ''figure'': es un contenedor que sirve para agrupar elementos de una figura dentro del contenedor ''article'' (una foto con su pie de foto y los datos de copyright, por ejemplo);
  * ''aside'': es un contenedor que sirve para agrupar elementos en un lateral de la página HTML (un buscador interno, etiquetas de búsqueda, noticias destacadas,...);
  * ''footer'': es un contenedor que sirve para agrupar los elementos del pie de la página HTML (datos de contacto, diseñador, año de creación,...);
  * ''div'': es un contenedor genérico que sirve para agrupar otros elementos HTML;
  * ''blockquote'': sirve para indicar que el texto que se incluye proviene de otra fuente;
  * ''span'': es una etiqueta que se utiliza (entre otras cosas) para dar formato con CSS;
  * ''body'': esta etiqueta encierra la totalidad de lo que se va a visualizar (sí, he mentido, esta etiqueta ya se vió en [[html|HTML]]);

Por ejemplo: se puede hacer que los enlaces dentro del contenedor ''nav'' tengan un formato diferente de los que se encuentren dentro del contenedor ''main'', que cada contenedor tenga un color (o imagen) de fondo diferente, encerrar el contenido de un contenedor dentro de un recuadro,...

==== Estilos de los enlaces (''a'') ====

  * ''a:link {...}'': formato de un enlace no visitado;
  * ''a:visited {...}'': formato de un enlace visitado;
  * ''a:hover {...}'':  formato al situar el cursor sobre el enlace (se puede aplicar a otros elementos diferente de los enlaces), debe declararse en el archivo CSS después de ''a:link'' y ''a:visited'';
  * ''a:active {...}'': formato al tener pulsado un enlace, debe declararse en el archivo CSS después de ''a:hover''.

==== Estilos de las listas ====

=== Presentación ===

== Listas no ordenadas ==
 
''list-style-type'' puede tomar los valores //disc//, //circle// //square// y //none//.

Por ejemplo: 
  * ''ul {list-style-type: square;}''; 
  * ''.disco {list-style-type: disc;}'' en el archivo CSS y ''<ul class="disco">...</ul>'' en el archivo hTML.

== Listas ordenadas ==
 
''list-style-type'' puede tomar los valores //decimal//, //decimal-leading-zero//, //lower-latin//, //upper-latin//, //lower-roman//, //upper-roman//, //lower-greek//, //upper-greek//, //lower-alpha//, //upper-alpha//,...

Por ejemplo: 
  * ''ol {list-style-type: lower-roman;}''; 
  * ''.minusculas {list-style-type: lower-latin;}'' en el archivo CSS y ''<ol class="minusculas">...</ol>'' en el archivo hTML.

=== Posición ===

''list-style-position'' puede tomar los valores //outside// (valor por defecto) e //inside//.

Por ejemplo:
  * ''.dentro {list-style-position: inside;}'' en el archivo CSS y ''<ol class="dentro">...</ol>'' en el archivo hTML.

=== Imagen como marcador de los elementos de una lista ===

''list-style-image'', sirve para poner una imagen como marcador de los elementos de una lista.

Por ejemplo: 
  * ''.elefante {list-style-image: url("elefante.png");}'' en el archivo CSS y ''<ul class="elefante">...</ul>'' en el archivo hTML.

==== Listas para hacer menús de navegación ====

Veamos como hacer menús de navegación mediante dos ejemplos: uno para una barra de navegación vertical y otro para una barra de navegación horizontal (para simplificar, y no generar dos archivos, el código CSS se incluye en el archivo HTML dentro de una etiqueta style).

<file html menu_vertical.html>

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de barra de menú vertical</title>
    <style>
.no-style {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.vertical a {
  display: block;
  width: 100px;
  text-decoration: none;
  text-align: center;
  padding: 5px;
  color: #EEEEEE;
  background-color: #888888;
}
.vertical a:hover, .vertical a:active {
  background-color: #555555;
}
    </style>
  </head>
  <body>
    <ul class="no-style vertical">
      <li><a href="pagina1.html">Página 1</a></li>
      <li><a href="pagina2.html">Página 2</a></li>
      <li><a href="pagina3.html">Página 3</a></li>
    </ul>
  </body>
</html>

</file>

<file html menu_horizontal.html>

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de barra de menú horizontal</title>
    <style>
.no-style {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.horizontal li {
  float: left;
}
.horizontal a {
  display: block;
  width: 100px;
  text-decoration: none;
  text-align: center;
  padding: 5px;
  color: #EEEEEE;
  background-color: #888888;
}
.horizontal a:hover, .horizontal a:active {
  background-color: #555555;
}
    </style>
  </head>
  <body>
    <ul class="no-style horizontal">
      <li><a href="pagina1.html">Página 1</a></li>
      <li><a href="pagina2.html">Página 2</a></li>
      <li><a href="pagina3.html">Página 3</a></li>
    </ul>
  </body>
</html>

</file>

Para ver el resultado puedes copiar el código y pegarlo en el editor de texto que gustes, guardarlo como archivo html y abrir dicho archivo. También puedes guardar directamente el archivo pinchando en //menu_vertical.html// o //menu_horizontal.html// que hay justo encima del recuadro del código. O, también, puedes copiar el código y pegarlo en el editor en línea de [[https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default_default|W3Schools]].

==== Comentarios en el código ====

Se pueden hacer comentarios del código CSS. Estos pueden ser útiles a la persona que realiza la página para clarificar. Su sintaxis es la siguiente: ''/* comentario */''.

===== Validar el código =====

Si quieres asegurarte de que el código de tu archivo CSS es correcto puedes usar un validador. Te recomiendo el [[https://css-validator.org/validator.es.html|validador]] en línea del [[https://www.w3.org/|World Wide Web Consortium (W3C)]]. Otro enlace al [[https://jigsaw.w3.org/css-validator/|validador]].

===== Notas finales =====

Esto solo pretende ser un tutorial introductorio para quien no conoce nada. Lo visto hasta aquí sería solo algo del contenido de CSS1; no se han tratado contenidos de CSS2 o CSS3 (a parte de las menciones esporádicas para indicar cosas por donde empezar a ampliar conocimientos; una más: te recomiendo que investigues sobre los //media queries// y el //diseño adaptativo//).

Y una genérica: en los navegadores web hay la opción de ver el código fuente de la página (a través del menú contextual que aparece al hacer click con el botón derecho del ratón sobre el contenido de la página o en el menú //herramientas//), utilízala para ver el código de las páginas HTML y para acceder al archivo CSS a través del enlace al mismo que encontrarás en la cabecera. Con eso, practicando (escribiendo y modificando código) y revisando otros manuales más completos y la especificación CSS podrás avanzar muchísimo más.


Ir a [[html|HTML]].