Equipos Programas Media Internet Telecomunicaciones Seguridad Base de Datos Programación Calidad Desarrollo Empresa

Ruta: >Programación>CSS

Tutorial: El lenguaje CSS

Tabla de Contenido

  1. Introducción a CSS
  2. CSS Conceptos
    1. Formas de Aplicación
    2. Conflictos en el Estilo. Publicista y Lector
    3. Agrupamiento
    4. Herencia
    5. Agentes del Usuario
    6. La Cascada
    7. Orden de la Cascada
    8. Algoritmo del Orden de la Cascada
    9. La sintaxis del lenguaje CSS
  3. CSS Sintaxis
    1. CSS Documento
      1. Comentario
      2. Fondo
      3. Texto
      4. Fuente
      5. Borde
      6. Margen
      7. Lista
      8. Marcadores
    2. CSS Selectores
      1. Los Selectores
      2. Selector Contextual
      3. Selector Universal
      4. Selector Tipo
      5. Selector Descendiente
      6. Selector Hijo
      7. Selector Hermano Adyacente
      8. Selector de Atributos
      9. Selector Clase
      10. Selector ID
    3. CSS Propiedades
      1. Las Propiedades
      2. Propiedades de la Clasificación
      3. Propiedades Sensibles al Contexto
      4. Propiedades de Cajas
      5. Propiedades del Margen
      6. Important
    4. CSS Clases
      1. Las Clases
      2. Clases con el ID
      3. Pseudoclases y Pseudoelementos
    5. CSS Pseudoclase
      1. Las Pseudoclases
      2. :first-child
      3. :link, :visited
      4. :hover, :active, :focus
      5. :lang
    6. CSS Pseudoelemento
      1. Los Pseudoelementos
      2. :first-line
      3. :first-letter
      4. :before, :after

Contenido

  • Introducción a CSS

    (PREREQUISITOS: Tener conocimientos del lenguaje HTML, de sus tags y de su estructura, ya que el css se apoya directamente sobre este lenguaje.)

    ¿Que es una hoja de estilo CSS2?

      Una hoja de estilo CSS es una plantilla que permite cambiar el formato de presentación de cualquier etiqueta de HTML.

      CSS también es un lenguaje que permite a un usuario asociar un estilo (por ejemplo, tipo de letra del texto, color del texto, fondo de la hoja, espacio entre líneas y letras, tamaño y color de los títulos, etc.) a los documentos estructurados (por ejemplo, documentos HTML y aplicaciones XML).

      La gran importancia de las hojas css reside en que:

      • Permiten independizar el estilo del contenido del documento.


      • Si se aplica una misma hoja de estilo a varias páginas html, al modificar esa hoja de estilo, automáticamente se actualiza el estilo en todas las páginas html, con lo cual el usuario se ahorra el tener que cambiar el estilo hoja por hoja.


      • Separando el estilo de presentación del contenido de los documentos, CSS2 simplifica la creación y mantenimiento de los sitios Web.


      • Al extraer de la página html todo el estilo, queda sólamente la estructura del texto, con lo cual se devuelve a la hoja html su función original.


      • Al independizar el estilo de la estructura, el acceso a ambas es mucho más rápido y flexible: se pueden definir varios estilos para un mismo documento, de forma que el usuario elija el que más le conviene.


      • Mejora el rendimiento del ordenador, ya que la hoja de estilo se carga una única vez para todas las páginas html a las que se aplica.

    ¿Cómo se aplica la hoja CSS en un documento HTML?

      Existen tres técnicas esenciales que permiten autor aplicar el estilo CSS a un documento HTML:

      Hoja de estilo insertada:

      • El estilo se define directamente en el documento.
      • El estilo insertado no se diferencia demasiado del HTML tradicional, pero su inconveniente es que el aspecto del documento no es fácil de modificar.
      • El estilo insertado se utiliza para un único elemento y se especifica insertando en la etiqueta inicial del documento.
      • La hoja de estilo insertada se define utilizando el atributo style=' y los datos para dicho atributo se especifican utilizando el lenguaje de hojas de estilo.

        • Por Ejemplo:


        
  <p style='font-size: 12pt; text-align: center; color:blue">
             Esto es una página de html, con texto de color azul.
         </p>

      Hoja de estilo global:

      • Define el estilo del documento al comienzo del mismo, dentro del tag <head>.
      • El uso de hojas de estilo globales permite separar mejor la presentación de los contenido y facilita una rápida y sencilla modificación, pero aún así, si se quieren aplicar a varios documentos, lleva más tiempo, porque hay que modificarlo uno a uno.
      • La etiqueta <style> se utiliza para añadir una hoja de estilo global a un documento y suele incluirse en el encabezado del documento, entre las etiquetas <head> y </head>.

        • Por Ejemplo:


        
  <head>
     <title>Pagina nueva 1</title>
             <style type="text/css">
 p { font-size: 12pt; text-align: center; color:blue }
     </style>
  </head>

      Hoja de estilo vinculada:

      • Define el estilo independientemente en otro documento.
      • El uso de hojas de estilo vinculadas aporta mayores ventajas al permitir que el aspecto de una serie de páginas se definan en un único archivo CSS.
      • La hoja CSS se aplica al documento HTML mediante un link en la cabecera del documento.
      • Este línk está formado por: la etiqueta <link>, que tiene tres propiedades: rel, src y type.
      • El atributo rel="stylesheet" se utiliza para especificar que el archivo enlazado es una hoja de estilo.
      • El atributo type="text/css" se utiliza para definir el tipo de documento, que suele ser textual para CSS.
      • El atributo src="HojaEstilo.css" es para indicar el lugar de ubicación del documento CSS en nuestro equipo. Este último atributo puede ser reemplazado por HREF sin alterar el funcionamiento de la etiqueta.

        • Por Ejemplo:


        
  <head>
    <title>Pagina nueva 1</title>
    <link rel="stylesheet" type="text/css" href="HojaEstilo.css" />
  </head>

    Ejemplo

      Antes de entrar a fondo en la sintaxis de la hoja de estilo CSS, sugerimos seguir este sencillo ejemplo , ya que ayudará a entender mejor la necesidad de crear el estilo separado del contenido de la página.

      En una página simple de html como ésta:


      
<html>
  <head>
    <title>Pagina nueva 1</title>
  </head>

  <body>
    <p>Esto es una página simple de html, sin color de texto.</p>
  </body>
</html>

      Queremos que el texto del body de la página html aparezca en azul. Tenemos tres opciones:



    • Hoja de estilo insertada: insertamos el estilo en el propio tag correspondiente al párrafo (<p>) de la página html



      • 
<html>
 <head>
   <title>Pagina nueva 1</title>
 </head>

 <body>
  <p><font color="blue">
            Esto es una página de html, con texto de color azul.</font></p>
 </body>
</html>


    • Hoja de estilo global: incluímos en la cabecera de la página html una sección de la hoja de estilo css:



      • 
 <html>
  <head>
     <title>Pagina nueva 1</title>
             <style type="text/css">
    body { color: blue}
     </style>
  </head>

  <body>
     <p>Esto es una página de html, con texto de color azul.</p>
  </body>
 </html>


    • Hoja de estilo vinculada: incluímos un enlace a una hoja css externa en la cabecera de una o varias páginas html:



      • 
 <html>
  <head>
    <title>Pagina nueva 1</title>
    <link rel="stylesheet" type="text/css" href="HojaEstilo.css" />
  </head>

  <body>
    <p>Esto es una página de html, con texto de color azul.</p>
  </body>
 </html>


      Las tres opciones darían como resultado esta vista de la página html:

        Esto es una página simple de html.


      Pero, ¿cual de las tres formas ofrece más ventaja?

      En principio, la tercera forma ofrece más ventajas, ya que permite aplicar una misma hoja css a todas las páginas html que queramos. Así, cuando queramos modificar el estilo, cambiando las características de esa única hoja CSS, automáticamente se actualizará el estilo de todas las hojas html que la utilicen.

  • CSS Conceptos

    • Formas de Aplicación

      Lenguaje de las hojas de estilo:

      • En primer lugar se define el lenguaje usado para hacer las hojas de estilo, mediante el atributo content, incluido en un elemento meta de la cabecera del documento HTML:


          •    <html>
     <head>
<meta http-equiv="Content-Language" content="es">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/css; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="C:/CSS/ejemplo1.css"/>
<title>tilulo de página</title>
     </head>

     <body>
      <h2>Cabecera h2</h2>
      <p>Esto es un párrafo</p>
      <p>Esto es otro párrafo</p>
     </body>
   </html>


      • Por defecto, el lenguaje de hoja de estilo es CSS, pero en el caso de ser otro en el atributo content del meta correspondiente especificaríamos el lenguaje que nos interesara, que en este caso sería content="text/html:



          •    <html>
     <head>
<meta http-equiv="Content-Language" content="es">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="C:/CSS/ejemplo1.css"/>
<title>tilulo de página</title>
     </head>

     <body>
      <h2>Cabecera h2</h2>
      <p>Esto es un párrafo</p>
      <p>Esto es otro párrafo</p>
     </body>
   </html>


      • Nota: el servidor puede fijar el lenguaje de hoja de estilo incluyendo en la cabecera http:
        http-equiv="Content-Type" content="text/css. En este caso, dicho atributo posee menor prioridad que el expresado mediante el meta.

      Ejemplos de formas de establecer el estilo:

        En un documento HTML la información del estilo puede estar:

      • En cualquier elemento concreto incluido en el cuerpo del documento (es decir, entre los tag <body> y </body>), mediante el atributo style . De esta forma el estilo solo está definido para ese elemento y no para los demás.

        NOTA: en este caso tenemos que haber definido obligatoriamente el lenguaje de estilo en la cabecera del documento.


          • <body>
          <p style='color: red'>Este documento irá en rojo</p>
          </body>

        En la pantalla aparecerá Este documento irá en rojo.

      • Incrustado en la cabecera del documento HTML (es decir, entre los tag <head> y </head>) mediante el elemento <style>. De esta forma estilo queda definido para cada uno de los tag o marcadores para los cuales hayamos determinado un estilo.


          •     <head>
      <style>
          h1 { color: FF0000 }
          p {text-align: justify}
      </style>
    </head>

    <body>
      <h1>Este texto irá en rojo</h1>
    </body>

        En la pantalla aparecerá Este documento irá en rojo.

      • En una hoja de estilo externa, la cual se aplica mediante un link desde la cabecera de la página html. En dichas hojas de estilo quedan definidos los estilos para los distintos tag o elementos del html. Se puede llamar a varias hojas al mismo tiempo, pero todas las llamadas están incluidas en el encabezado del documento HTML.


          •    <html>
     <head>
<meta http-equiv="Content-Language" content="es">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/css; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="C:/CSS/ejemplo1.css"/>
<title>tilulo de página</title>
     </head>

     <body>
      <h2>Cabecera h2</h2>
      <p>Esto es un párrafo</p>
      <p>Esto es otro párrafo</p>
     </body>
   </html>

        Determinada incluso por el servidor HTTP.

    • Conflictos en el Estilo. Publicista y Lector

      El publicista y el lector

        Tanto el publicista como el lector desean especificar como quieren visualizar la información.

        Publicista:
        • Cree saber cual es la forma de presentar su información.
        • Desea imponer su propio 'look and feel'.
        Lector:
        • Conoce mejor que nadie sus limitaciones de equipo y personales.
        • Tiene preferencias.

        Entonces surge el Conflicto de estilo:¿Que pasa si tanto el lector como el publicista (autor) desean especificar su estilo?

        • Cada especificación de estilo tiene una prioridad.
        • Estilo con mayor prioridad gana.

      Prioridad en el Estilo

      • CSS da preferencia al publicista.
      • Los estilos tienen dos tipos de prioridad: Normal e Importante.
      • El estilo con mayor prioridad es el que gana.
      • Si ambos (publicista y lector) especifican misma prioridad, publicista gana. Aunque siempre estará el incoveniente de que habrá conflicto entre ambos.

    • Agrupamiento

      Agrupar propiedades

      • Para reducir el espacio que ocupa un estilo en la hoja cSS, las propiedades se pueden agrupar según su categoría.


      • Cuando varios selectores comparten las mismas declaraciones, pueden agruparse en una lista separada por signos de coma.


        • Ejemplo:

        Podemos condensar tres reglas con idénticas declaraciones en una sola:


          h1 { font-family: sans-serif }
          h2 { font-family: sans-serif }
          h3 { font-family: sans-serif }

        Es equivalente a:


          h1, h2, h3 { font-family: sans-serif }

      Agrupar declaraciones

      • Si a un mismo selector le corresponden varias declaraciones, se pueden escribir en una sola regla, separándolas mediante un punto y coma.


        • Ejemplo:

          h1 { font-family: sans-serif }
          h1 { color: blue }
          h1 { background-color: purple }

        Es equivalente a:


          h1 {font-family: sans-serif; color: blue; background-color: purple}

      Agrupar valores de las declaraciones

      • Algunas propiedades se pueden agrupar si tienen una sintaxis especial. En el siguiente caso, se reúnen varios valores de la propiedad font, separándolas sólo mediante un espacio:


        • Ejemplo:

          h1 { font-style: normal }
          h1 { font-size: 14pt }
          h1 { font-family: sans-serif }

        Es equivalente a:


          h1 {font: normal 14pt sans-serif}

    • Herencia

      Herencia de un elemento

      • Generalmente un elemento hereda las características de su ancestro. Cada propiedad define si se hereda o no.

        • Ejemplo:


          Default: body

          Algunas propiedades no se heredan: v.gr. background

      Herencia en las aplicaciones del usuario

      • Las aplicaciones del usuario deben primero asignar un valor especificado para una propiedad basadas en los siguientes mecanismos (en orden de precedencia):

        • 1. Si la cascada da como resultado un valor, lo usa.

        2. De lo contrario, si la propiedad es heredada, usa el valor del elemento padre, generalmente el valor computado.

        3. De otro modo, usa el valor inicial de la propiedad. El valor inicial de cada propiedad es indicado en la definición de la propiedad.

      Herencia en la raiz del documento

      • La raíz de la estructura del documento (por ejemplo, el body) no puede utilizar valores del elemento padre, puesto que no depende de ningún ancestro; en este caso, se usa el valor inicial si es necesario:


        • Ejemplo:

        Suponga que hay un elemento h1 con un elemento enfatizado adentro, por ejemplo, el elemento em. Éste elemento heredará las propiedades del elemento padre (h1), por ejemplo, el color azul del texto:


          <h1>El título es de <em>color azul</em> en su texto</h1>

        Dará como resultado:

          El título es de color azul en su texto.

      Herencia en propiedades predeterminadas

      • Para poner una propiedad de estilo "predeterminada" en un documento, los autores pueden especificar la propiedad en la raíz de la estructura del documento.


      • En html, por ejemplo, los elementos html o body pueden servir para esta función. Observe que esto servirá aún cuando el autor omita la marca body en la fuente html debido a que el analizador html inferirá la marca ausente.


        • Por ejemplo: como la propiedad 'color' es heredada, todos los descendientes del elemento body heredarán el color 'black':


          body { color: black }

      Herencia en los valores de porcentaje

      • Los valores de porcentaje especificados no son heredados; los valores computados sí lo son.


        • Ejemplo:

        Dada la siguiente hoja de estilo, el valor de font-size del elemento h1, dado en porcentaje, no será heredado, pero sí el valor 10pt del elemento body:


          body { font-size: 10pt }
          h1 { font-size: 120% }

        Al aplicar la hoja CSS en el siguiente fragmento del documento html, la propiedad 'font-size' del elemento h1 tendrá el valor computado '12pt' (el 120% de 10pt, el valor del padre). Como el valor computado de 'font-size' es heredado, el elemento em tendrá el valor computado '12pt' también. Si la aplicación del usuario no tiene la fuente de 12pt disponible, el valor real de 'font-size' para h1 y también para em podría ser, por ejemplo, '11pt'.


                 <body>
         <h1>Un <em>gran</em> titular</h1>
       </body>

      El valor "inherit"

      • Cada propiedad también puede tener un valor especificado como 'inherit', lo cual significa que, para un elemento determinado, la propiedad toma el mismo valor computado que la propiedad del padre del elemento.


        • Ejemplo:

        Las propiedades 'color' y 'background' son definidas para el elemento body. En todos los demás elementos, el valor de 'color' será heredado y el fondo será transparente. Si estas reglas son parte de la hoja de estilo del usuario, el texto negro sobre un fondo blanco será forzado en todo el documento.


              body {
         color: black !important;
         background: white !important;
         }
    * { 
      color: inherit !important;
      background: transparent;
      }

    • Agentes del Usuario

      ¿Qué es un agente de usuario?

      • El agente del usuario es el responsable de interpretar el estilo y aplicarlo al documento. Pero no todas las propiedades son soportadas por todos los agentes de usuario.


      • El efecto de un estilo dependerá fuertemente del agente del usuario, al que se denomina con las siglas UA.


      • Tipos de agente
        • :

          1. Gráfico

          2. Braile

          3. Texto solamente

    • La Cascada

      La hoja de estilo en cascada

      • El término cascada en CSS hace referencia a la posibilidad de combinar múltiples hojas de estilo para formar un única presentación.


      • Esta característica permite combinar la hoja de estilo de un sitio web predefinida, con otra u otras hojas de estilo para varios documentos, y también si tienen un estilo insertado.


      • Existen tres técnicas esenciales que permiten autor añadir hojas de estilo CSS a un documento:

          • Hoja de estilo insertada: el estilo se define directamente en el documento. El estilo insertado no se diferencia demasiado del HTML tradicional, pero su inconveniente es que el aspecto del documento no es fácil de modificar.

          Hoja de estilo global: define el estilo del documento al comienzo del mismo, dentro del tag <head>. El uso de hojas de estilo globales permite separar mejor la presentación de los contenido y facilita una rápida y sencilla modificación, pero aún así, si se quieren aplicar a varios documentos, lleva más tiempo, porque hay que modificarlo uno a uno.

          Hoja de estilo vinculada: define el estilo independientemente en otro documento. El uso de hojas de estilo vinculadas aporta mayores ventajas al permitir que el aspecto de una serie de páginas se definan en un único archivo CSS, que se aplica al documento CSS mediante un link en la cabecera del documento HTML.

      Creadores de la página CSS

      • Las hojas de estilo pueden tener tres orígenes diferentes: el autor, el usuario y la aplicación del usuario.

          • Autor: El autor especifica las hojas de estilo para un documento fuente de acuerdo a las convenciones del lenguaje del documento.
          Por ejemplo, en HTML, las hojas de estilo pueden incluirse en el documento o vincularse externamente.

          Usuario: El usuario puede especificar información de estilo para un documento particular.
          Por ejemplo, el usuario puede especificar un archivo que contenga una hoja de estilo o la aplicación del usuario puede proporcionar una interfaz que genere una hoja de estilo del usuario (o comportarse como si lo hubiese hecho).

          Aplicaciones del usuario: Las aplicaciones del usuario con conformidad deben aplicar una hoja de estilo predeterminada (o comportarse como si lo hubiesen hecho) previa a todas las hojas de estilo para un documento. La hoja de estilo predeterminada de una aplicación del usuario debe presentar los elementos del lenguaje de documento de un modo que satisfaga las expectativas generales de presentación del lenguaje del documento.
          Por ejemplo, en los navegadores visuales, el elemento EM en HTML es presentado usando una fuente itálica.

      • Observe que la hoja de estilo predeterminada puede cambiar si las opciones del sistema son modificadas por el usuario (ej., los colores del sistema). Sin embargo, debido a las limitaciones en la implementación interna de las aplicaciones del usuario, puede resultar imposible cambiar los valores en la hoja de estilo predeterminada.


      • Las hojas de estilo con estos tres orígenes se superpondrán en su acción e interactuarán de acuerdo a la cascada.


      • La cascada de CSS, asigna una fuerza a cada regla de estilo. Cuando varias reglas se aplican, la de mayor fuerza toma preponderancia.


      • De forma predefinida, las reglas en las hojas de estilo del autor tienen más fuerza que las reglas en las hojas de estilo del usuario. La preponderancia se revierte, sin embargo, con la reglas "!important". Todas las reglas que el usuario y el autor especifican tienen mayor fuerza que las reglas de la hoja de estilo predeterminada en la AU.


      • Las hojas de estilo importadas también forman la cascada y su fuerza depende del orden en la importación. Las reglas especificadas en una hoja de estilo dada sustituyen las reglas importadas desde otras hojas de estilo. Las hojas de estilo importadas pueden a su vez importar y sustituir otras hojas de estilo, recursivamente, y se aplican las mismas reglas de preponderancia.

    • Orden de la Cascada

      Cómo aplicar el orden de cascada

        Para encontrar el valor para una combinación elemento/propiedad, las aplicaciones del usuario deben aplicar el siguiente orden de disposición:

        1. Hallar todas las declaraciones que se aplican al elemento y la propiedad en cuestión, para el tipo de medio al que está dirigido.
        Las declaraciones se aplican si el selector asociado coincide con el elemento en cuestión.
        (Un tipo de medio de CSS designa un juego de propiedades CSS. Una aplicación del usuario que aspira a dar soporte a un tipo de medio por nombre debe implementar todas las propiedades que se aplican a ese tipo de medio.)


        2. La primera disposición de las declaraciones se hace por fuerza y origen:

        • Para las declaraciones normales, las hojas de estilo del autor sustituyen las hojas de estilo del usuario que sustituye la hoja de estilo predeterminada.
        • Para las declaraciones "!important", las hojas de estilo del usuario sustituyen las hojas de estilo del autor que sustituyen la hoja de estilo predeterminada.
        • La declaración "!important" sustituye a las declaraciones normales. Una hoja de estilo importada tiene el mismo origen que la hoja de estilo que la ha importado.

        3. La segunda disposición es por la especificidad del selector:

        • Los selectores más específicos sustituirán a los más generales.
        • Los pseudo-elementos y las pseudo-clases se cuentan como elementos y clases normales respectivamente.

        4. Finalmente, se dispone por el orden especificado:

        • Si dos reglas tienen la misma fuerza, origen y especificidad, la última en ser especificada vence.
        • Las reglas en las hojas de estilo importadas se considera que están antes que cualquier regla en la propia hoja de estilo.

    • Algoritmo del Orden de la Cascada

      Pasos para el algoritmo de orden de cascada

        1. Encontrar todas las declaraciones que apliquen al elemento en questión.

        • Si no hay declaración, usa valor heredado.
        • Si no hay valor heredado, utiliza valor inicial de UA.

        2. Ordenar las declaraciones por importancia (son más importantes las que tengan !important que las normales).

        3. Ordenar por origen:

        • Autor
        • Lector
        • Agente de Usuario

        4. Ordenar por el selector específico: <em>specificity</em>. Para encontrar la especificidad:

        • Se cuenta el número de atributos ID en el selector (= a).
        • Se cuenta el número de los otros atributos y pseudo-clases en el selector (= b).
        • se cuenta el número de nombres de elementos en el selector (= c).
        • Se ignoran los pseudo-elementos.
        • La concatenación de los tres números a-b-c (en un sistema numérico de base mayor) proporciona la especificidad de la propiedad.



          • 
      *             { }  /* a=0 b=0 c=0 -> especificidad =   0 */
      ul            { }  /* a=0 b=0 c=1 -> especificidad =   1 */
      ul li         { }  /* a=0 b=0 c=2 -> especificidad =   2 */
      ul li+ol      { }  /* a=0 b=0 c=3 -> especificidad =   3 */
      h2 + *[rel=up]{ }  /* a=0 b=1 c=1 -> especificidad =  11 */
      ul ol li.red  { }  /* a=0 b=1 c=3 -> especificidad =  13 */ 
      li.red.level  { }  /* a=0 b=2 c=1 -> especificidad =  21 */
      #x34y         { }  /* a=1 b=0 c=0 -> especificidad = 100 */

        5. Ordenar por orden en que se especifican: la última propiedad gana. Autores tienen ventaja sobre el autor sobre el UA.

    • La sintaxis del lenguaje CSS

      La sintaxis de una hoja CSS2

      • Una hoja CSS, en su forma más simple, está formada por una o varias declaraciones de estilo. Cada una de estas declaraciones recibe el nombre de regla.


      • Cada regla define el estilo de un tag de html o xml. Por ejemplo, para el tag <body>, la regla se define de la siguiente manera en la hoja CSS:


          • body { color: blue }


      • Además de las reglas, se pueden escribir comentarios, que luego no aparecen en la página html y que son aclaraciones que el propio autor incluye. Se escriben entre los símblolos /* y */.

        • Por ejemplo: /* esto es un comentario */.

      Las partes de una regla

      • Una regla es una declaración que en su forma más básica consta de: un selector seguido de un bloque, que consta de una declaración, formada por una propiedad con su valor.


      • En este esquema se pueden apreciar la sintaxis del lenguaje CSS más básico:

      El selector

      • Los selectores especifican los elementos que están asociados con una regla particular, mientras que las reglas de presentación especifican cómo deberán mostrarse dichos elementos.


      • El selector de una regla es todo lo que encontramos hasta el primer signo de llave "{", pero sin incluirla.


        • Se pueden clasificar los selectores en dos tipos:

        El selector simple:

        • El selector simple asocia un estilo CSS a un elemento HTML, basándose en sus atributos o en su tipo, sin tener en cuenta su posición en el contexto de otros elementos de la página html.
        • En su forma más básica, un selector simple puede crearse para asociar un estilo a un elemento en particular, una clase de elementos o un ID con un estilo específico.
        • Es el referente de la hoja CSS para aplicar un estilo al tag html.

          • Por ejemplo:


            p { color: blue } /* selector simple de elemento único*/
            .especial {font-weight:bold} /* selector simple de clase */
            #amarillo { background: yellow} /* selector simple de ID*/

        El selector contextual:

        • Los selectores contextuales especifican una jerarquia de contenedores con que asociar un estilo.
        • Se especifican en una lista separada por espacios.
        • Cada selector puede hacer referencia a CLASS, ID o el tipo de elemento.

          • Por ejemplo:


            ul li.especial .cool {font-weight:bold; font-size: 120%; }

            /* Estilo para cualquier elemento del documento html que cumpla estas condiciones: un elemento de class="cool", que esté contenido en un elemento li de class="especial", y además esté contenido en un elemento ul */


      • Puede haber varios selectores dentro de una misma regla, separados por el signo coma. Esto se debe a que pueden agruparse distintos selectores relacionados, si todos ellos poseen un estilo idéntico. Por ejemplo, para varias cabeceras de la página html, se aplica el mismo estilo:



          • h1, h2, h3, h4 { color: blue } /* Selecores agrupados */


      • Hay algunos caracteres no válidos para los selectores, por ejemplo, el signo &, los signos de puntuación (que no sean la coma para separar selectores), y también son causa de error un selector que no está escrito correctamente (algo que también se aplica a la propiedad y al valor). Por ejemplo, estas reglas serían inválidas:



          • cabecera { color: blue } /* No existe un tag en html que sea "cabecera" */
          h1, "h2" { color: blue } /* Uso de comillas "h2" es inválido */
          h1 & h2 { color: blue } /* Signo & es inválido */

        Para saber más, consultar el tema ampliado sobre los Selectores

      El bloque

      • El bloque es todo aquello que queda comprendido entre el símbolo de llave { y su símbolo de cierre }, incluídas ambas. El bloque puede estar vacío, pero en general conviene que en su interior haya un conjunto de daclaraciones separadas por el signo punto y coma.


      • En medio de los símbolos de llave { } puede entrar cualquier carácter, pero hay varios caracteres no válidos, como por ejemplo: los paréntesis ( ), los corchetes [ ] las llaves { }.

      La declaración

      • Una declaración es todo aquello que queda entre los signos { }, pero sin incluírlos. Puede haber una o varias, separadas por un signo de punto y coma.


      • Puede ser vacía o consistir en una propiedad, seguida por el signo dos puntos, seguidos por un valor. Por ejemplo:


          • body { } /* Declaración vacía */
          body { color: red } /* Declaración única: propiedad "color", valor "red" */


      • Cuando las declaraciones son múltiples para un mismo selector, pueden organizarse en grupos separados por punto y coma (;). De este modo, si tenemos estas reglas:


          • h1 { font-weight: bold }
          h1 { font-size: 14pt }
          h1 { font-family: verdana }
          h1 { font-style: normal }


        Podemos escribirlo de la siguiente forma, poniendo una declaración en cada línea, y separándolas mediante el signo punto y coma (menos la última de todas, que no hace falta que lo lleve):

          h1
          {
          font-weight: bold;
          font-size: 14pt;
          font-family: verdana;
          font-style: normal
          }

      La propiedad

      • Una propiedad es un identificador. La propiedad es el atributo del selector que queremos modificar, ya la que le corresponde un valor.


      • La propiedad puede estar formada por una palabra única, o por una palabra compuesta, en cuyo caso deben separarse mediante un signo guión. Por ejemplo:


          • h1 { color: green } /* la propiedad color tiene una palabra */
          h1 { background-color: white } /* propiedad color de fondo está compuesta de dos palabras separadas por un guión */

      El valor

      • Cada propiedad puede tener un valor, aunque hay casos en los que tienen más porque se agrupan los valores de una misma propiedad.


        • Por ejemplo: en el caso de la propiedad "margen", pueden escribirse los cuatro valores correspondientes a los márgenes de la página con respecto al texto, de la siguiente manera:


          p
          {
          margin-left: 2cm;
          margin-right: 4cm;
          margin-top: 3cm;
          margin-bottom: 4cm;
          }


        Estas cuatro propiedades del párrafo, podrían resumirse en la misma línea, si se agrupan los cuatro valores en una sola propiedad:


          p { margin: 2cm 4cm 3cm 4cm }


        Daría como resultado en el explorador la siguiente página:


          Esta es una página con los cuatro márgenes definidos en la hoja CSS.



      • Cada propiedad posee un número limitado de valores (el usuario no se los puede inventar), aunque hay valores que coincíden para distintas propiedades. En todos los casos, los valores están compuestos de:

          • - Identificadores-contadores (counter-increment: par-num, etc.)
          - Cadenas de caracteres (de la a-z, sin signos de puntuación, en inglés)
          - Números enteros (de 0 a 9) y reales (enteros con signos + y -)
          - Medidas de dimensiones vertical-horizontal (em, cm, pixel, pt, etc.)
          - Porcentajes (50%)
          - Direcciones URL. Se escriben URL("http://tic.dyndns.org/image.jpg")
          - Colores (red, rgb(255,0,0), #080800)
          - Ángulos en hojas de texto auditivas (en grados)
          - Tiempos en hojas de texto auditivas (milisegundos o segundos)
          - Frecuenciasen hojas de texto auditivas (en hertz o kilohertz).



      • Cuando un nombre de un selector, una propiedad o un valor es válido, en vez de generar un error, la aplicación CSS simplemente ignora los errores.


      • Cada propiedad CSS2 tiene sus propias restricciones sintácticas y semánticas para los valores que acepta. Por ejemplo:


          • h1 { font-style: 12pt } /* Valor inválido 12pt, no es un valor de "font-style" */
          p { color: blue; font-vendor: any } /* No existe la propiedad "font-vendor" */

      Ejemplo de cómo crear una hoja CSS externa y aplicarla a una o varias hojas HTML

      • Una vez vista la sintaxis de las reglas de CSS, vamos a poner un ejemplo práctico, de cómo se ve una página html si le le aplica la hoja de estilo CSS.


        • Tenemos una página html como esta:



          • 
   <html>
     <head>
        <meta http-equiv="Content-Language" content="es">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>tilulo de página</title>
     </head>

     <body>
      <h2>-Esta es la cabecera h2-</h2>
      <p>Esto es un párrafo</p>
      <p>Esto es otro párrafo</p>
     </body>
   </html>

        • Con un editor de texto como el Frontpage de Microsoft Office o el Block de Notas, creamos una hoja CSS tan simple como la que sigue:


          • body {background: white}
          h2 {color: pink; font-size:18pt}
          p {color: blue; font-size:12pt}

          Guardamos esta página con la extensión .css en un directorio de nuestro equipo, por ejemplo C:/CSS/ejemplo1.css. Hay que tener en cuenta que la hoja CSS debe estar en el mismo directorio o nivel que las páginas html a las que se va a aplicar, o en su defecto, si está en un directorio superior, hay que poner bien la dirección de la hoja CSS, porque si no, no se aplicará.


        • Esta hoja CSS se aplicaría a la siguiente hoja HTML:



          • 
   <html>
     <head>
<meta http-equiv="Content-Language" content="es">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="C:/CSS/ejemplo1.css"/>
<title>tilulo de página</title>
     </head>

     <body>
      <h2>-Esta es la cabecera h2-</h2>
      <p>Esto es un párrafo</p>
      <p>Esto es otro párrafo</p>
     </body>
   </html>

        • Al abrir la página html con un explorador, por ejemplo, el Explorer de Microsoft o el Mozilla en Linux, la aplicación de la hoja CSS sobre la hoja HTML que hemos presentado resultaría:




          • -Esto es la cabecera h2-

          Esto es un párrafo.

          Esto es otro párrafo.

  • CSS Sintaxis

    • CSS Documento

      • Comentario

        Signo del comentario

        • Estos se especifican del mismo modo que en el lenguaje C:
          /* Esto es un comentario */.


        • Los comentarios son líneas de texto que se incluyen en las hojas CSS, pero que, a la hora de aplicarla al html, quedan ocultas.

        Ejemplos

          Tenemos la siguiente hoja css, con comentarios:


            h1 {color: purple; background-color: pink} /* comentario de la cabecera */
            p {color: navy; font-family: verdana} /* comentario del párrafo */
            Pero al aplicar la hoja CSS a la página HTML, los comentarios quedan ocultos:

            Cabecera h1

            Párrafo Párrafo

          Los signos de comentario sólo anula las reglas que queden entre ellos:


            body { color: blue}

            /* comienza el comentario y anula las siguientes reglas:
            h1 {color: purple; background-color: pink}
            p {color: navy; font-family: verdana}
            termina el comentario */

            /* pero no anula estas reglas: */
            h2 {color: purple; background-color: black}
            p {color: navy; font-family: verdana}

          Un comentario dentro de otro es inválido. Por ejemplo:



            /* Esto es un /* comentario */ inválido */

          Se puede utilizar también el comentario de XML: <!-- comentario --> , pero sólo para escribir texto, ya que no anulan las reglas. Por ejemplo:


            /* Esto es un comentario de CSS */
            <!-- Esto es un comentario de XML en CSS -->
            <!-- Esto es un comentario inválido:
            h2 {color: purple; background-color: black}
            p {color: navy; font-family: verdana}
            -->

      • Fondo

        El color y el fondo del documento

        • Las propiedades de CSS permiten a los autores especificar el color de fondo y el aspecto del fondo de un elemento. Los fondos pueden ser colores o imágenes. Las propiedades del fondo permiten a los autores ubicar una imagen de fondo, repetirla y declarar si debe quedar fija con respecto al acceso visual o desplazada junto con el documento.


        • Los autores pueden especificar el fondo de un elemento (es decir, su superficie de procesamiento) ya sea como un color o como una imagen. En términos del modelo de caja, "background" se refiere al fondo del contenido y las áreas de relleno (padding). El color y estilo del borde se ponen con las propiedades del borde. Los márgenes son siempre transparentes de modo que el fondo de la caja padre siempre se ve a través.


        • Las propiedades del fondo no se heredan, pero el fondo de la caja padre por defecto se verá a través debido al valor inicial 'transparent' para 'background-color'.


        • El fondo de una caja generada por el elemento raíz cubre todo el lienzo.


        • Para los documentos en HTML, sin embargo, recomendamos que los autores especifiquen el fondo del elemento BODY en vez del elemento HTML. Las aplicaciones del usuario deben observar las siguientes reglas de precedencia para llenar el fondo: si el valor de la propiedad 'background' del elemento HTML es distinto a 'transparent' entonces se lo usa, de otro modo se usa el valor de la propiedad 'background' del elemento BODY. Si el valor resultante es 'transparent', el procesamiento es indefinido.

        Ejemplo

          Tenemos la siguiente hoja html:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
            <html>
            <head>
            <title>Poniendo el fondo del lienzo</title>
            <syle type="text/css">
            body { background: url("/Imagenes/FONDOS/TREBOLES.GIF") }
            </style>
            </head>
            <body>
            <p>Esto es un fondo con tréboles.</p>
            </body>
            </html>

          De acuerdo con estas reglas, el lienzo subyacente del siguiente documento HTML tendrá un fondo "mármol".

          Esto es un fondo con tréboles.

      • Texto

        Decoración y estructura del texto

        • Las propiedades definidas en las siguientes secciones afectan la presentación visual de los caracteres, espacios, palabras y párrafos.


        • En CSS se puede definir cómo va a ser el texto: su color, su fondo, su alineación, sus márgenes. Estas características se definen mediante sus propiedades:


          • 'text-indent' Esta propiedad especifica la sangría de la primer línea de texto en un bloque.
          'text-align' Esta propiedad describe cómo el contenido a nivel del línea de un bloque es alineado.
          'text-decoration' Esta propiedad describe las decoraciones que se agregan al texto de un elemento.
          'text-shadow' Esta propiedad acepta una lista separada por comas de efectos de sombra para ser aplicados al texto del elemento.
          'letter-spacing'Esta propiedad especifica el comportamiento de los espacios entre los caracteres del texto.
          'word-spacing' Esta propiedad especifica el comportamiento de los espacios entre palabras.
          'text-transform' Esta propiedad controla el efecto de los cambios entre mayúsculas y minúsculas en el texto de un elemento.
          'white-space' Esta propiedad declara cómo son tratados los espacios en blanco dentro del elemento.

        Ejemplo

          Tenemos una hoja CSS con las siguientes propiedades para el párrafo: texto indentado 3cm, alineado a la izquierda de la página, subrayado, sin sombra, con distancia de 0´1cm entre las letras, con distancia de 0.50cm entre palabras, con la primera letra de cada palabra en capital, y los espacios en blanco normales. Sería de este modo:

            p {
            text-indent: 3cm;
            text-align: left;
            text-decoration: underline;
            text-shadow: none;
            letter-spacing: 0.1cm;
            word-spacing: 0.50cm;
            text-transform: capitalice;
            white-space: normal
            }

          Daría como resultado algo como esto:

            Hola Esto Es Un Texto De Párrafo. Hola Esto Es Un Texto De Párrafo.

            Hola Esto Es Un Texto De Párrafo. Hola Esto Es Un Texto De Párrafo.

            Hola Esto Es Un Texto De Párrafo. Hola Esto Es Un Texto De Párrafo.

      • Fuente

        Historia de las fuentes en CSS

        • La fuente es aquello que modifica los caracteres de un texto para que tengan una apariencia u otra.


        • Al visualizar un texto de un documento, en realidad captamos una serie de signos o caracteres concretos que están representado a conceptos o signos abstractos. Dependiendo del contexto del documento, estos signos o caracteres pueden significar una u otra cosa. Por ejemplo, no es lo mismo la vocal "a", usada como tal, que <a>, usada en html para referirse a un enlace.

            • Un signo es la representación gráfica concreta con la que se presenta un signo abstracto, en forma de contorno o mapa de bits que puede dibujarse en la pantalla o en papel.

            Una fuente es un conjunto de signos gráficos, observando todos ellos el mismo motivo básico de acuerdo al diseño, tamaño, apariencia y otros atributos asociados a todo el conjunto.


        • Los autores especifican las características de una fuente a través de una serie de propiedades de la fuente.


        • Para tratar el tema de las fuentes, el usuario debe plantearse estas cuestiones:

            • 1. ¿Está especificada, directamente o por herencia, una fuente para un carácter?

            2. ¿El usuario tiene disponible esta fuente?

            3. Si es así, ¿qué signo(s) le será asignado a este carácter o secuencia de caracteres?

            4. Si no, ¿qué se deberá hacer? ¿Deberá ser reemplazada por otra fuente? ¿Puede ser sintetizada la fuente? ¿Puede recuperarse de la Web?


        • Antiguamente, las aplicaciones del usuario no tenían ninguna manera de utilizar otras fuentes alternativas (incluso fuentes estilísticamente similares que la aplicación del usuario tenía disponible) más allá de las fuentes genéricas predefinidas.


        • Con CSS2 (el más actual) se ha cambiado todo esto y concede mucha más libertad:

            • 1. Los autores de hojas de estilo pueden describir las fuentes que desean que se usen.

            2. Las aplicaciones del usuario pueden seleccionar una fuente cuando la requerida por el autor no está disponible en ese momento.

            3. Permite descargar "Fuentes web" de otras páginas web y aplicarlas desde nuestro equipo.

        Especificación de la fuente

        • En la primera etapa del CSS, la forma de especificar la fuente es mediante un nombre, una cadena simple de palabras separadas por espacios, por ejemplo "Times New Roman" o "Verdana".


        • Desafortunadamente, no existe una clasificación de las fuentes en base a sus nombres, y los términos aplicados al nombre de una familia de fuentes pueden no ser apropiados para otras.

            • Por ejemplo, el término 'itálica' es usado comúnmente para definir al texto inclinado, pero el texto inclinado también puede denominarse oblicuo, sesgado, inclinado o cursivo.

            Otro ejemplo, una fuente que podría considerarse como negrita puede ser descripta como regular, media, semi-negra o ultra-negra, dependiendo de cuán negra sea la versión "normal" de la fuente dentro del diseño.



        • Debido a este problema, CSS2 especifica las fuentes no a través del simple nombre de la fuente, sino por la vía de establecer una serie de propiedades de la fuente. Estos valores de las propiedades forman la base del mecanismo de selección de fuentes de las aplicaciones del usuario. Este proceso tiene como resultado un incremento en la regularidad para los autores de hojas de estilo y los exploradores de las páginas web.

        Propiedades para la especificación de las fuentes

        • En CSS se especifican las fuentes mediante las propiedades que se detallan a continuación.

            • font-family Especifica qué familia será usada para procesar visualmente el texto. Las familias pueden ser: cursiva, otra negrita, otra condensada o versalitas.
            Los nombres de las familias de fuentes no se restringen a caracteres latinos y pueden estar agrupadas en diferentes categorías: aquellas con o sin serif, aquellas cuyos caracteres están o no espaciados proporcionalmente, las que imitan la escritura manual, aquellas que son tipos de fantasía, etc.

            font-style Especifica si el texto será procesado visualmente usando un tipo en versión normal, itálica u oblicua. La itálica es la versión cursiva que acompaña al tipo normal, pero no tanto como para resultar una letra manuscrita. La oblicua es una versión inclinada del tipo normal y es usada más comúnmente en las sans-serif. Esta definición evita tener que denominar un tipo ligeramente inclinado como oblicuo o una tipografía griega normal como itálica.

            font-variant Indica si el texto debe ser procesado visualmente usando los signos normales para los caracteres en minúsculas o usando versalitas para las minúsculas. Una fuente particular puede contener sólo signos en minúsculas, sólo versalitas o ambos tipos de signos; esta propiedad se usa para solicitar la fuente apropiada y, si la fuente contiene ambas variantes, el signo apropiado.

            font-weight Se refiere al grado de solidez o de ligereza de los signos usados para procesar visualmente el texto, con relación a otras fuentes en la misma familia.

            font-stretch Indica la cantidad deseada de condensación o expansión de los signos usados para procesar visualmente el texto, con relación a otras fuentes en la misma familia.

            font-size Se refiere al tamaño de la fuente desde una línea de base a otra cuando tiene asignada una interlinea normal (en términos CSS, esto es así cuando la propiedades 'font-size' y 'line-height' tienen el mismo valor).

        • En todas las propiedades, excepto 'font-size', los valores de las medidas 'em' y 'ex' se refieren al tamaño de fuente del elemento actual. Para 'font-size', estas unidades de medida se refieren al tamaño de fuente del elemento padre.


        • Las propiedades de las fuentes en CSS son usadas para describir la apariencia deseada para el texto del documento. Los descriptores de las fuentes, por el contrario, son usados para describir las características de las fuentes, de modo que pueda elegirse una fuente conveniente para crear la apariencia deseada.

        Ejemplo

          Tenemos la siguiente hoja CSS:

            p {
            font-family: verdana;
            font-style: italic;
            font-variant: normal;
            font-weight: 400;
            font-stretch: normal;
            font-size: 12pt;
            }

          El resultado sería:

            Hola, esto es un ejemplo de las propiedades de las fuentes en CSS.

        Incrustación de fuentes personalizadas

        • A veces las fuentes textuales no se ven correctamente en cualquier operador de cualquier sistema operativo. Para asegurar que esto no pase, existe la posibilidad especificar fuentes que se cargan con la propia página Web, asegurando así que la página se verá correctamente.


        • Pero esta opción sólo se contempla desde la versión de Internet Explorer 4 de Microsoft u otras superiores.


        • La fuente cargable se menciona mediante mejoras a la sintaxis CSS. Dicha sintaxis es:

            • @font-face {font-family: FontName; src:url(filename.eot);}

          Por Ejemplo:

          Tenemos la siguiente hoja CSS con una fuente establecida para la página web:


            
@font-face {
                  font-family: demoFont;
                  src: url(http://unlugar.com/midirfont/coolFont.eot)
                 }

      h1 {font-family: demoFont, arial, sans-serif}

          Así, la fuente es cargada desde la url especificada, su nombre es "coolfont.eot", y se le ha denominado "demoFont" para aplicarla tabién al tipo de fuente utilizada para la cabecera h1.

      • Borde

        Los bordes de las tablas y celdas

        • Permiten especificar el color, tamaño, grosor, forma, etc. En Html se utilizan los bordes para crear el estilo de las tablas, aunque con el CSS se pueden especificar bordes más creativos, y aplicarlos a cualquier elemento.

        Ejemplo

          Tenemos la siguiente hoja html:

                  p 
      {
      border-style: double
      border-color: #FF0000 #0000FF
      border-width: 10px 10px 10px 10px
      }

          Daría como resultado:

          Característica de los bordes
          Estilo del borde: Doble
          Ancho del margen: 10px
          Color de los bordes: rojo y azul

      • Margen

        Los márgenes de la página

        • Las propiedades del margen ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' y 'margin') se aplican en el contexto de página. El siguiente diagrama ilustra la relación entre la hoja, la caja de página y los márgenes de la página:


          • El valor computado de los márgenes de la caja encima y abajo del área de la página es '0'.



        • El contexto de página no posee ninguna noción de fuentes, de modo que las unidades 'em' y 'ex' no están permitidas.


        • Los valores de porcentajes en las propiedades del margen son relativas a las dimensiones de la caja de página; para los márgenes izquierdo y derecho, se refieren al ancho de la caja de página mientras que para los márgenes superior e inferior, se refieren a la altura de la caja de página. Todas las demás unidades asociadas con las respectivas propiedades de CSS2 están permitidas.


        • Como consecuencia de valores negativos para el margen (ya sea en la caja de página o en los elementos) o del posicionamiento absoluto el contenido puede terminar fuera de la caja de página, pero este contenido puede ser "cortado" --por la aplicación del usuario, la impresora, o finalmente, por la guillotina--.

        Ejemplo

          Tenemos la siguiente hoja html:

            p {
            margin-left: 2cm
            margin-right: 2cm
            margin-top: 5cm
            margin-bottom: 5cm
            }

          Y se vería de la siguiente forma:

          Hola, esto es un ejemplo de las propiedades de las fuentes en CSS. Tiene márgenes arriba, abajo, a la derecha y a la izquierda.

      • Lista

        Las Listas en CSS

        • Las propiedades de lista permiten un formato visual básico en las listas. Al igual que con los marcadores más generales, un elemento con 'display: list-item' genera una caja principal para el contenido del elemento y una caja de marcador opcional.


        • Las otras propiedades de lista posibilitan a los autores especificar el tipo de marcador (imagen, signo o número) y su posición con respecto a la caja principal (afuera o dentro de ella antes del contenido). No permiten a los autores especificar distintos estilos (color, fuente, alineación, etc.) para los marcadores de listas o ajustar su posición con respecto a la caja principal.


        • Además, cuando un marcador M (creado con 'display: marker') se usa con el ítem de una lista creada por las propiedades de lista, M reemplaza al marcador estándar del ítem de la lista.


        • Con las propiedades de lista, las propiedades del fondo se aplican solamente a la caja principal; una caja de marcador 'outside' es transparente. Los marcadores ofrecen mayor control sobre el estilo de la caja del marcador.

        Ejemplo

          El siguiente caso ilustra cómo los marcadores pueden ser usados para agregar puntos después de cada ítem de una lista numerada. Este programa HTML y esta hoja de estilo:

               <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   <html>
   <head>
     <title>Creando una lista con marcadores</TITLE>
     <style type="text/css">
  li {list-style-type: roman} 
     </style>
   </head>
   <body>
    <ol>
      <li> Este es el primer ítem.</li>
      <li> Este es el segundo ítem.</li>
      <li> Este es el tercer ítem.</li>
    </ol>
   </body>
   </html>

          produciría algo semejante a esto:

                 I. Este es el primer ítem.
    II. Este es el segundo ítem.
   III. Este es el tercer ítem.

      • Marcadores

        Los marcadores en CSS

        • La mayoría de los elementos a nivel de bloque en CSS generan una caja de bloque principal. En esta sección, trataremos dos mecanismos de CSS que provocan que un elemento genere dos cajas: una caja de bloque principal (para el contenido del elemento) y una caja de marcador separada (para decoraciones tales como viñetas, imágenes o números).


        • La caja del marcador puede estar ubicada dentro o fuera de la caja principal. Al contrario del contenido de :before y :after, la caja del marcador no afecta la posición de la caja principal, cualquiera sea el esquema de posicionamiento.


        • El más general de los dos mecanismos es nuevo en CSS2 y se llama marcadores. El mecanismo más limitado involucra las propiedades list de CSS1. Las propiedades de las listas le dan resultados rápidos a los autores en muchas situaciones comunes de listas ordenadas y desordenadas. Sin embargo, los marcadores le brindan a los autores un control preciso sobre el contenido y posición del marcador. Los marcadores pueden ser usados con los contadores para crear un nuevo estilo de lista, para numerar notas al márgen, y mucho más.


        • Las cajas de marcadores tienen relleno y bordes, pero no márgenes.


        • Los marcadores son creados colocando la propiedad 'display' como 'marker' dentro de un pseudo-elemento :before o :after. Mientras que el contenido 'block' e 'inline' de :before y :after es parte de la caja principal generada por el elemento, el contenido de 'marker' es compuesto en una caja de marcador independiente, fuera de la caja principal. Las cajas de marcadores son compuestas en usa sola línea (es decir, una caja de línea), de modo que no son tan flexibles como los flotantes. La caja del marcador sólo es creada si la propiedad 'content' para el pseudo-elemento realmente genera un contenido.

        Ejemplo

          En el siguiente ejemplo, el contenido es centrado dentro de una caja de marcador de un ancho fijo:

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  <html>
    <head>
      <title>Alineación del contenido en la caja del marcador</title>
      <style type="text/css">
           li:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </style>
   </head>
   <body>
     <ol>
       <li>Este es el primer ítem.</li>
       <li>Este es el segundo ítem.</li>
       <li>Este es el tercer ítem.</li>
     </ol>
   </body>
   </html>

          produciría algo semejante a esto: 

                (1) Este es el primer ítem.
    (2) Este es el segundo ítem.
    (3) Este es el tercer ítem.

    • CSS Selectores

      • Los Selectores

        Los selectores en CSS.

        • Para ver las características básicas de los selectores, ver le tema La sintaxis del lenguaje CSS


        • Los selectores pueden estar compuestos de un elemento simple o de una cadena de selectores complejos, separados entre sí por signos de punto y coma.


        • La distinción entre mayúsculas/minúsculas en los nombres de los elementos de los selectores, depende del lenguaje del documento al que se aplique la hoja CSS. Por ejemplo, en HTML, los nombres de los elementos son insensibles a la diferencia mayúsculas/minúsculas, pero en XML sí hacen distinción entre mayúsculas y minúsculas.


        • Para las hojas de estilo usadas con HTML, los autores pueden usar el punto (.) como una alternativa a "~=" cuando la correspondencia sea con el atributo "class".


        • Así, en HTML, "div.valor" y "div[class~=valor]" tiene el mismo significado. El valor del atributo debe seguir inmediatamente al ".".

        Ejemplos

        • Por ejemplo, podemos asignar información de estilo a todos los elementos con class~="pastoral" como sigue:

            *.pastoral { color: green } /* todos los elementos con class~=pastoral */

            O simplemente:
            .pastoral { color: green } /* todos los elementos con class~=pastoral */

        • En el siguiente caso sólo se asigna estilo a los elementos h1 con class~="pastoral". Para equivaler a un subconjunto de valores "class", cada valor debe ir precedido por un signo de punto ".", en cualquier orden:

            h1.pastoral { color: green } /* elementos h1 con class~=pastoral */

        • Dadas estas reglas, el siguiente primer ejemplo de h1 no tendría el texto en verde, mientras que el segundo sí.

            <h1>Verde, no</h1>
            <h1 class="pastoral">Muy verde</h1>

        • Por ejemplo, la siguiente regla equivale a cualquier elemento p a cuyo atributo "class" le ha sido asignado una lista de valores separados por espacios que incluyen "pastoral" y "marino". Esta regla equivale en el caso de class="pastoral rojo azul marino" pero no se corresponde en class="pastoral rojo":

            p.pastoral.marino { color: green }

          • Nota. CSS le otorga tanto poder al atributo "class", que los autores podrían conceptualmente diseñar su propio "lenguaje del documento" basados en elementos con casi ninguna presentación asociada (tales como div y span en HTML) y asignando información acerca del estilo a través del atributo "class". Los autores deben evitar esta práctica ya que los elementos estructurales de un lenguaje de documento comúnmente tienen significados aceptados y reconocidos mientras que las clases definidas por el autor no pueden tenerlos.

      • Selector Contextual

        Los selectores contextuales

        • Permiten especificar propiedades que sólo serán aplicados bajo ciertas excepciones.


        • Cuando un elemento está incluído dentro de otro:

            h1 em {color: black}


        • Esta propiedad se aplicará en em cuando esté dentro de h1.


        • La relación no es de padre, sino de ancestro.


        • Los dos tipos de selectores contextuales son el Selector universal y el Selector tipo.

      • Selector Universal

        Selector Universal

        • El selector universal, escrito con el signo "*", se corresponde con el nombre de cualquier tipo de elemento. Es equivalente con cualquier elemento en la estructura del documento.


        • Si el selector universal no es el único componente de un selector simple, el "*" puede omitirse.

        Ejemplo

          Cuando el selector universal está compuesto de varios componentes, se puede escribir de estas maneras:


            *[LANG=fr] y [LANG=fr] son lo mismo.
            *.warning y .warning son lo mismo.
            *#myid y #myid son lo mismo.

      • Selector Tipo

        Selector de Tipo

        • Un selector de tipo se corresponde con el nombre de un tipo de elemento en CSS en el lenguaje del documento HTML.


        • Una regla con un selector tipo, equivale a todos los elementos o tags de la estructura del documento HTML.

        Ejemplo

          La siguiente regla que tiene por selector tipo a la cabecera h1 en el documento CSS, y equivale a todos los elementos o tags h1 de la estructura del documento HTML:


            h1 { font-family: sans-serif }

      • Selector Descendiente

        Selector de descendientes

        • Un selector de descendiente se compone de dos o más selectores separados por un espacio en blanco, e indica que el segundo elemento es descendiente del primero. Por ejemplo:



            • h1 p { color: red }


        • A veces, el autor de la hoja CSS puede querer incluir un selector que se corresponda con un elemento que es el descendiente de otro elemento en la estructura del documento HTML.

          • Por ejemplo, tenemos estas dos reglas:


            h1 { color: black }
            p { color: black }

          Aunque la estas reglas definen el color negro del texto en la cabecera h1 y el párrafo, el efecto se perderá en un caso como el que sigue, ya que ambos poseen el mismo color y p es descendiente de h1:


            <h1>El título es <p>un párrafo</p> muy importante</h1>

          Se puede resolver este caso si se le añade a las reglas anteriores una regla que asigna otro color al texto, pero siempre que un p aparezca en cualquier lugar dentro de un h1. Así, el texto de de h1 será de color negro, pero el de h1 p será rojo:


            h1 { color: black }
            p { color: black }
            h1 p { color: red }

          El resutado será


            El título es un párrafo muy importante

      • Selector Hijo

        Selector de Hijos

        • Un selector de hijo es aquel que es un elemento hijo de otro elemento padre, y que hereda las propiedades y valores del padre.


        • Un selector de hijo se compone de dos o más selectores separados por el signo >.


        • A veces se combinan selectores de descendientes con selectores de hijos.

        Ejemplo

          La siguiente regla asigna el estilo de todos los elementos p que son hijos de body:


            body > p { line-height: 1.3 }

          En el siguiente ejemplo se combinan un selector de descendiente con un selector de hijo:


            div ol>li p { color: red; font-family: verdana }

          Esta regla equivale a:

          Un elemento "p" es descendiente de un elemento "li";
          El elemento "li" debe ser hijo de un elemento "ol";
          El elemento "ol" debe ser descendiente de un "div".
          En estos casos, el espacio en blanco opcional alrededor del combinador ">" se quita.

      • Selector Hermano Adyacente

        Selector de Hermanos Adyacentes

        • Los selectores de hermanos adyacentes tiene la siguiente sintaxis: Elemento1 + Elemento2, siendo Elemento2 el sujeto del selector.


        • Dependiendo del contexto, dos elementos adyacentes pueden producir un resultado cuya presentación es generada automáticamente. El selector + permite a los autores especificar un estilo adicional para los elementos adyacentes.

        Ejemplo

          En la siguiente regla se establece que cuando un elemento p sigue inmediatamente a un elemento math, su color será negro:


            math + p { color: black }

          Se puede reducir el espacio vertical (en milímetros) que separa a dos cabeceras distintas, h1 y h2, cuando h2 sigue inmediatamente a h1, como muestra el siguiente ejemplo:


            H1 + H2 { margin-top: -5mm }

      • Selector de Atributos

        Selectores de atributos

        • En el lenguaje CSS2 se pueden especificar reglas que sean equivalentes a atributos definidos en el documento HTML.


        • Los atributos se escriben entre signos de corchetes [ ], de la siguiente manera:


            • selector[atributo] { propiedad: valor; }


        • Los selectores de atributos puede equivaler de cuatro maneras:

          • [att] Equivale con los elementos que tienen asignado el atributo "att", cualquiera sea el valor del atributo.

          [att=val] Equivale cuando el valor del atributo "att" del elemento es exactamente "val".

          [att~=val] Equivale cuando el valor del atributo "att" del elemento es una lista de "palabras" separadas por espacios, una de las cuales es exactamente "val". Si se usa este selector, las palabras en el valor no deben contener espacios (ya que ellas están separadas por espacios).

          [att|=val] Equivale cuando el valor del atributo "att" del elemento es una lista de "palabras" separadas por guiones, comenzando con "val". La correspondencia siempre comienza al principio del valor del atributo.



        • Los valores de los atributo deben ser identificadores o cadenas. La distinción entre mayúsculas/minúsculas en los nombres y valores de los atributos de los selectores depende del lenguaje del documento.

        Ejemplos

          En este ejemplo, el selector de atributo equivale a todos los elementos h1 que especifican el atributo "title", cualquiera sea su valor:


            h1[title] { color: blue; }

          En el siguiente ejemplo, el selector equivale a todos los elementos span cuyo atributo "class" tiene exactamente el valor "ejemplo":


            span[class=ejemplo] { color: blue; }

          Múltiples selectores de atributos pueden ser usados para referirse a varios atributos de un elemento o, incluso, varias veces al mismo atributo. Aquí, el selector equivale a todos los elementos span cuyo atributo "hola" tiene exactamente el valor "Cleveland" y cuyo atributo "adios" tiene exactamente el valor "Columbus":


            span[hola="Cleveland"][adios="Columbus"] { color: blue; }

          Los siguientes selectores ilustran la diferencia entre "=" y "~=". El primer selector equivale, por ejemplo, al valor "copyright copyleft copyeditor" para el atributo "rel". El segundo selector sólo será equivalente cuando el atributo "href" tenga el valor "http://www.w3.org/".


            A[rel~="copyright"]
            A[href="http://www.w3.org/"]

          La siguiente regla esconde a todos los elementos cuyo valor del atributo "lang" es "fr" (es decir, la lengua es el francés).


            *[LANG=fr] { display : none }

          La siguiente regla será equivalente a valores del atributo "lang" que empiecen con "en", incluyendo "en", "en-US" y "en-cockney":


            *[LANG|="en"] { color : red }

          De modo similar, la siguiente regla de una hoja de estilo auditiva permite leer un escrito en voz alta con voces diferentes para cada rol:


            DIALOGUE[character=romeo]
            { voice-family: "Lawrence Olivier", charles, male }
            DIALOGUE[character=julieta]
            { voice-family: "Vivien Leigh", victoria, female }

      • Selector Clase

        Selectores de clase

        • Para las hojas de estilo usadas con HTML, los autores pueden usar el punto (.) como una alternativa a "~=" cuando la correspondencia sea con el atributo class.


        • Así, en HTML, "div.valor" y "div[class~=valor]" tiene el mismo significado. El valor del atributo debe seguir inmediatamente al signo del punto ".", sin espacio.

        Ejemplos

          Podemos asignar información de estilo a todos los elementos con class~="pastoral", de las dos formas que se escriben a continuación:


            *.pastoral { color: green } /* todos los elementos con class~=pastoral */
            .pastoral { color: green } /* todos los elementos con class~=pastoral */

          En el siguiente caso sólo se asigna estilo a los elementos h1 con class~="pastoral". Para equivaler a un subconjunto de valores "class", cada valor debe ir precedido por un ".", en cualquier orden:


            h1.pastoral { color: green } /* elementos h1 con class~=pastoral */

          Dadas estas reglas, el siguiente primer ejemplo de h1 no tendría el texto en verde, mientras que el segundo sí.


            <h1>Verde, no</h1>
            <h1 class="pastoral">Muy verde</h1>


          La siguiente regla equivale a cualquier elemento p a cuyo atributo "class" le ha sido asignado una lista de valores separados por espacios que incluyen "pastoral" y "marino". Esta regla equivale en el caso de class="pastoral rojo azul marino" pero no se corresponde en class="pastoral rojo":


            p.pastoral.marino { color: green }

          Nota. CSS le otorga tanto poder al atributo "class", que los autores podrían conceptualmente diseñar su propio "lenguaje del documento" basados en elementos con casi ninguna presentación asociada (tales como div y span en HTML) y asignando información acerca del estilo a través del atributo "class".
          Los autores deben evitar esta práctica ya que los elementos estructurales de un lenguaje de documento comúnmente tienen significados aceptados y reconocidos mientras que las clases definidas por el autor no pueden tenerlos.

      • Selector ID

        Los Selectores de ID

        • El atributo ID de un lenguaje de documento le permite a los autores asignar un identificador a una instancia del elemento dentro de la estructura del documento. Los selectores ID de CSS equivalen a una instancia del elemento basado en su identificador. Un selector ID de CSS contiene un "#" seguido inmediatamente por el valor de ID.


        • Los lenguajes del documento pueden contener atributos que se declaran como del tipo ID. Lo que hace especial a un atributo del tipo ID es que dos de tales atributos no pueden tener el mismo valor; cualquiera sea el lenguaje del documento, un atributo ID puede ser usado para identificar a su elemento de manera excluyente.


        • En HTML todos los atributos ID son denominados "id"; las aplicaciones XML pueden nombrar de manera diferente a los atributos ID, pero se aplica la misma restricción.

        Ejemplos

          El siguiente selector de id equivale al elemento h1 cuyo atributo id tiene el valor "capitulo1":


            h1#capitulo1 { text-align: center }

          En el siguiente ejemplo, la regla de estilo equivale al elemento que tiene el valor de id "z98y". La regla será, de este modo, equivalente al elemento p:


               <head>
    <title>Equivalencia con p</title>
    <style type="text/css">
      *#z98y { letter-spacing: 0.3em }
    </style>
   </head>

   <body>
      <p id=z98y>Texto espaciado</p>
   </body>

          El selector de ID tiene una precedencia mayor que los selectores de atributos. En el ejemplo que sigue, sin embargo, la regla de estilo sólo equivale a un elemento H1 que tiene un valor ID de "z98y". La regla no será equivalente con el elemento p en este ejemplo:


              <head>
    <title>Equivalencia con H1 solamente</title>
    <style type="text/css">
      h1#z98y { letter-spacing: 0.5em }
    </style>
  </head>

  <body>
      <p id=z98y>Texto espaciado</p>
  </body>

    • CSS Propiedades

      • Las Propiedades

        ¿Qué son las propiedades?

        • Una propiedad es un identificador. La propiedad es el atributo del selector que queremos modificar, y a la que le corresponde un valor.


        • La propiedad puede estar formada por una palabra única o una palabra compuesta (en inglés). La palabra compuesta se separa mediante un signo guión. Por ejemplo:



            • h1 { color: green } /* la propiedad color tiene una palabra */
            h1 { background-color: white } /* propiedad color de fondo está compuesta de dos palabras separadas por un guión */


        • No todas las propiedades son soportadas por todos los agentes del usuario. El agente del usuario es el responsable de interpretar el estilo y aplicarlo al documento. Puede ser gráfico, braile o texto sólamente.


        • Las propiedades se representan dentro de los signos del bloque: "{ }". Se separa la propiedad de su valor mediante el signo dos puntos, y una propiedad de otra mediante el signo punto y coma.


          • Por ejemplo:

            p { font-style: italic}
            H1 { background-color: blue; color: yellow}

          El elemento p (párrafo) sólo tiene una propiedad, que es el estilo de la fuente (itálica). El elemento h1 (cabecera) tiene dos propiedades separadas por punto y coma, el fondo azul y el color del texto amarillo.

        • Un estilo tiene cinco tipos o propiedades:

            • - Color de texto y de fondo, incluyendo el fondo de imágenes.

            - Fuentes del texto.

            - Propiedades del texto (espaciamiento entre palabras, entre letras).

            - Cajas (márgenes, bordes, elementos flotantes).

            - Clasificaciones (Control de la apariencia de listas).

        Ejemplos

          1. Propiedades del color de texto y de fondo (también fondo de imágenes):


            body {background-image:url("/Imagenes/ICONOS/DEVIL.GIF"")}
            h1 {color: white; background-color: blue}
            p {color: blue; background-color: yellow}

          El resultado sería:

          Cabecera h1

          Esto es un párrafo.

          Esto es otro párrafo.

          2. Propiedades de la fuentes del texto (tipo de letra, tamaño, fuente):


            body {font-family: courier}
            h1 {font-weight: bold; font-style: oblique}
            p {font-style: normal; font-size: 100%; font-family: courier}

          El resultado sería:

          Cabecera h1

          Esto es un párrafo.

          Esto es otro párrafo.

          3. Propiedades del texto (espaciamiento entre palabras, entre letras, alineación):


            h1 {letter-spacing: 10px}
            p {text-align: center}

          El resultado sería:

          C a b e c e r a h 1

          Esto es un párrafo.

          Esto es otro párrafo.

          4. Cajas (márgenes, bordes, elementos flotantes):


            h1 {margin-left: 2cm}
            p {margin: 4cm 2cm 2cm 2cm}

          El resultado sería:

          Cabecera h1

          Esto es un párrafo.

          Esto es otro párrafo.

      • Propiedades de la Clasificación

        ¿Para qué sirven?

        • Estas propiedades clasifican elementos en categorías más que especificar parámetros visuales.


        • Algunas de estas propiedades de clasificación se definen por:

          • display afecta como se ve el elemento en la pantalla (o papel):

            block abre una nueva caja (h1, p).
            list-item como block pero agrega un marcador de lista.
            inline una nueva caja en la misma línea que el previo contenido.

          white-space

            pre
            normal
            nowrap

          list-style-type características de las listas:

            disc
            circle
            square
            decimal
            lower-roman
            upper-roman
            lower-alpha
            upper-alpha
            none

          list-style-image

        Ejemplo

          Tenemos la siguiente hoja CSS, llamada "style3.css":


          
       h1     { color: navy; font-family: courier; font-size: 22pt }
       p      { color: blue; font-family: "new courier"; font-size: 12pt}
       em     { color: red; background-color: white }
       ol li  { background-color: grey; list-style-type: circle }
       ul li  { list-style-image: url(/Imagenes/ICONOS/ARCHIVE.GIF) }

          La hoja CSS es aplicada al siguiente documento html, y se hace mediante un link situado en la cabecera de la página. Las propiedades descritas en el CSS se aplicarán a los elementos del body:


          
      <html>
       <head>
         <link rel="STYLESHEET" type="text/css" HREF="style3.css"/>
       </head>

       <body>
         <h1>Título 1</h1>
         <p>Más texto con algo de <em>texto relevante</em></p>
         <ol>
           <li>Lista Ordenada OL</li>
           <li>Lista Ordenada OL</li>
           <li>Lista Ordenada OL</li>
         </ol>
         <ul>
           <li>Lista Desordenada UL</li>
           <li>Lista Desordenada UL</li>
           <li>Lista Desordenada UL</li>
         </ul>
         
         <img border="0" src="/Imagenes/ICONOS/m.gif" width="140" height="140"/>
        </body>
      </html>

          Aplicado el CSS, al abrir el documento html con un explorador, su vista resultaría:


            Título 1

            Más texto con algo de texto relevante

            1. Lista Ordenada OL
            2. Lista Ordenada OL
            3. Lista Ordenada OL


              Lista Desordenada UL.

              Lista Desordenada UL.

              Lista Desordenada UL.

      • Propiedades Sensibles al Contexto

        Propiedades según el contexto

        • Algunas propiedades son sensibles al contexto en donde se incluyan, ya que dependen de la clase a la que pertenezca el elemento.


        • Por ejemplo: en este caso, este estilo de párrafo sólo se aplicará a aquel texto que esté incluído dentro de "blocquote":



            • blockquote p { font-style: italic}

      • Propiedades de Cajas

        El modelo de caja

        • El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos en la esructura del documento y compuestas de acuerdo al modelo de formato visual.


        • Las cajas en CSS tienen las siguientes características:

            • - Cada elemento es un rectángulo.

            - Cada elemento tiene un margen.

            - Dentro del margen, hay un borde opcional.

            - Dentro del borde hay un relleno opcional.

        Dimensiones de la caja

        • Cada caja tiene un área de contenido (ej., texto, una imagen, etc.) y las áreas circundantes opcionales de padding, border y margin. El tamaño de cada área es especificado por las propiedades que se definen abajo.


        • El siguiente diagrama muestra cómo se relacionan estas áreas y la terminología usada para referirse a las partes de margin, border y padding:


          • Imagen ilustrando la relación entre contenido, padding, border y margin.



        • Margin, border y padding pueden ser divididos en los segmentos left, right, top y bottom (ej., en el diagrama, "LM" para left margin, "RP" para right padding, "TB" para top border, etc.).

        Los límites de la caja

        • El perímetro de cada una de las cuatro áreas (contenido, padding, border y margin) es llamado "límite", de manera que cada caja tiene cuatro límites:

            • límite del contenido o límite interno: El límite del contenido rodea al contenido procesado del elemento.

            límite de padding: El límite de padding (relleno) rodea a la caja de relleno. Si padding tiene un ancho de 0, el límite del relleno es el mismo que el límite de contenido. El límite del relleno de una caja define el límite de la caja de contención establecida por la caja.

            límite de border: El límite de border (borde) rodea el borde de la caja. Si border tiene un ancho de 0, el límite del borde es el mismo que el límite del relleno (padding).

            límite de margin o límite externo: El límite de margin (margen) rodea el margen de la caja. Si margin tiene un ancho de 0, el límite del margen es el mismo que el límite del borde (border).



        • Cada límite puede dividirse en límite left (izquierdo), right (derecho), top (superior) y bottom (inferior).

        Las dimensiones del área del contenido de una caja

        • Las dimensiones del área del contenido de una caja --el ancho del contenido y la altura del contenido-- dependen de varios factores: si el elemento que genera la caja tiene asignadas las propiedades 'width' o 'height', si la caja contiene texto u otras cajas, si la caja es una tabla, etc.


        • El ancho de la caja está dado por la suma de los márgenes, bordes y rellenos izquierdos y derechos, y el ancho del contenido. La altura está dada por la suma de los márgenes, bordes y rellenos superiores e inferiores, y la altura del contenido.


        • El estilo del fondo de las distintas áreas de una caja es determinado como sigue:

            • Area del contenido: La propiedad 'background' del elemento generador.

            Area del relleno (padding): La propiedad 'background' del elemento generador.

            Area del borde (border) Las propiedades del borde del elemento generador.

            Area del margen (margin): Los márgenes son siempre transparentes.

      • Propiedades del Margen

        Los cuatro márgenes de la caja

        • Las propiedades del margen especifican el ancho del área del margen de una caja. Los márgenes se denominan:

            margin-top (margen superior)
            margin-bottom (margen abajo)
            margin-left (margen izquierdo)
            margin-right (margen derecho)


        • La propiedad resumida margin determina el margen para los cuatro lados mientras que las otras propiedades sólo determinan su lado respectivo.

          • Por ejemplo:


            
   body { margin: 2cm }            /* todos los márgenes miden 2cm */
   body { margin: 1cm 2cm }        /* top y bottom miden 1cm, right y left miden 2cm */
   body { margin: 1cm 2cm 3cm 2cm} /* top=1cm, right=2cm, bottom=3cm, left=2cm */

   O en la forma extensa:
   
   body {
         margin-top: 1cm;    /* top=1cm (margen superior) */
         margin-right: 2cm;  /* right=2cm (margen derecho) */
         margin-bottom: 3cm; /* bottom=3cm (margen abajo) */
         margin-left: 2cm    /* left=2cm (margen izquierdo) */
        }

        Tipos de valores para la propiedad margin

        • Hay varios tipos de valores que margin puede tomar:

            • - medida: Especifica un ancho fijo.
            Ejemplo: margin-top: 1cm.

            - porcentaje: El porcentaje es calculado con respecto al ancho del bloque de contención de la caja generada. Esto es así para 'margin-top' y 'margin-bottom', excepto en el contexto de la página, donde los porcentajes se refieren a la altura de la caja de la página.
            Ejemplo: margin-bottom: 10%.

            - auto: Los valores computados de las propiedades 'margin-left', 'margin-right', 'left' y 'right' de un elemento dependen del tipo de caja generada y la relación entre sí. En principio, los valores computados son los mismos valores especificados, con 'auto' reemplazado por algún valor apropiado, aunque existen excepciones.
            Ejemplo: margin-left: auto.

        • Los valores negativos para las propiedades de los márgenes son permitidos, pero pueden existir limitaciones específicas para este tipo de valores.
          Ejemplo: margin-left: -20px.


        • Para describir las propiedades y sus características, se utiliza el siguiente esquema de datos (en este caso se aplica a las propiedades del margen):

          • Por ejemplo:


            'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
            Valor: <margin-width> | inherit
            Inicial: 0
            Se aplica a: todos los elementos
            Se hereda: no
            Porcentajes: se refieren al ancho del bloque de contención
            Medios: visuales

      • Important

        La palabra ! Important

        • Determina propiedades más importantes que otras.


        • Por ejemplo:
          • body {color: black ! important; background: white ! important}

    • CSS Clases

      • Las Clases

        ¿Qué es una clase?

        • La clase es un atributo de un elemento html que sirve para diferenciar a ese elemento de otro parecido.

        Ejemplo

        • En una hoja html tenemos lo siguiente:

            • <p>Este es un párrafo normal.<p>
<p class="gato">Este es un párrafo de clase gato.<p>
<p class="perro">Este es un párrafo de clase perro.<p>

            Hay un párrafo normal, y para diferenciar los otros, se les incluye una clase a cada uno, siendo una "gato" y la otra "perro".
        • En la hoja de estilo CSS, encontraríamos lo siguiente:

            • p       {color: black}
            
p.gato  {color: red}
            
p.perro {color: brown}

        • Así, el texto del párrafo normal sería de color negro, el de la clase gato de color rojo, y el del perro, de color marrón:


            • Este es un párrafo normal.

            Este es un párrafo de clase gato.

            Este es un párrafo de clase perro.

      • Clases con el ID

        El atributo ID

        • El atributo ID garantiza que una declaración que aplique a sólo un elemento.


        • Es bastante similar a la clase, salvo que en vez de utilizar un punto, separa mediante una almohadilla (#)

        Ejemplo

        • En una hoja html tenemos lo siguiente:

            • <p>Este es un párrafo normal.<p>
<p id="gato">Este es un párrafo de clase gato.<p>
<p id="perro">Este es un párrafo de clase perro.<p>

            Hay un párrafo normal, y para diferenciar los otros, se les incluye una clase a cada 
uno, siendo una "gato" y la otra "perro".
        • En la hoja de estilo CSS, encontraríamos lo siguiente:

            • p       {color: black}
p#gato  {color: red}
p#perro {color: brown}

        • Así, el texto del párrafo normal sería de color negro, el de la clase gato de color rojo, y el del perro, de color marrón:


            • Este es un párrafo normal.

            Este es un párrafo de clase gato.

            Este es un párrafo de clase perro.

      • Pseudoclases y Pseudoelementos

        ¿Qué tienen en común pseudoclase y pseudoelemento?

        • Tanto la pseudoclase como el pseudoelemento especifican características del medio en donde el documento es mostrado.


        • En CSS2, el estilo se atribuye a un elemento basado en su posición dentro de la estructura del documento. Este sencillo modelo es suficiente para muchos casos, pero algunos temas comunes en la edición pueden no ser posibles por medio de la estructura del documento.
          Por ejemplo, en HTML 4.0 (ver [HTML40]), ningún elemento se refiere a la primera línea de una párrafo y, por consiguiente, ningún selector CSS simple puede refererirse a ella.


        • CSS introduce los conceptos de pseudo-elementos y pseudo-clases para permitir aplicar el formato basado en información que está fuera de la estructura del documento.


        • Ni los pseudo-elementos ni las pseudo-clases aparecen en el documento fuente o la estructura del documento.


        • Los nombres de los pseudo-elementos y las pseudo-clases no hacen distinción entre mayúsculas y minúsculas.


        • Las aplicaciones del usuario de conformidad con HTML pueden ignorar todas las reglas con :first-line o :first-letter en el selector o, alternativamente, puede dar soporte sólo a un subconjunto de las propiedades en estos pseudo-elementos.

    • CSS Pseudoclase

      • Las Pseudoclases

        ¿Qué es la pseudoclase?

        • Una pseudo clase está formada por elementos de un único tipo que cumplen cierto criterio contextual.


        • Las pseudo-clases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que el usuario interactúa con el documento. La excepción es ':first-child', que puede deducirse de la estructura del documento.


        • Las pseudo-clases son permitidas en cualquier lugar dentro de un selector mientras que los pseudo-elementos sólo pueden aparecer después del sujeto del selector.


        • Algunas pseudo-clases son mutuamente excluyentes, mientras otras pueden aplicarse simultáneamente al mismo elemento. En caso de reglas conflictivas, el orden de cascada normal determina el resultado.

        No es lo mismo "clase" que "pseudoclase"

        • Las propiedades para pseudoclases no aplican a clases y viceversa.
        • Por ejemplo:

            • a:link { color: red}
            <a class="link" name="gatito">Esto es un link de clase "gatito".</a>

            Daria como resultado un hiperenlace de color rojo:
            Esto es un link de clase "gatito".

        Uso de Pseuclases

        • Pseudoclases se pueden combinar con clases:

            • a.external:visited {color blue}
            <a class="external" href="http://tic2.dyndns.org/">
            <img border="0" src="/Imagenes/ICONOS/TICPeq.jpg" width="60" height="45"/>
            </a>

            Daria como resultado esta imágen con hiperenlace a una página externa:

        Pseudoclases tipográficas

        • Primera línea:
            • p:first-line {font-style: small-caps}
        • Primer caracter:
            • P:first-letter {font-size: 200%}

      • :first-child

        La pseudo-clase :first-child

        • La pseudo-clase :first-child equivale a un elemento que es el primer hijo de algún otro elemento.


        • Ejemplos:

          • El selector equivale a cualquier elemento p que sea el primer hijo de un elemento div. La regla elimina el sangrado del primer párrafo de un div:

            div < p:first-child { text-indent: 0 }

          Este selector sería equivalente a p dentro de div en el siguiente fragmento:

            <p>El último p antes de la nota.</p>
            <div class="nota">
            <p>El primer p dentro de la nota.</p>
            </div>

          pero no se correspondería con el segundo p en el siguiente fragmento:

            <p>El último p antes de la nota.</p>
            <div class="nota">
            <h2>Nota</h2>
            <p>El primer p dentro de la nota.</p>
            </div>

          La siguiente regla especifica 'bold' para el peso de la fuente de cualquier elemento em que es algún descendiente de un elemento p que es un primer hijo:

            p:first-child em { font-weight : bold }

          Observe que toda vez que las cajas anónimas no forman parte de la estructura del documento, no se cuentan en el cálculo del primer hijo. Por ejemplo, aquí el em es el primer hijo de p:

            <p>abc <em>default</em>

          Los siguientes dos selectores son equivalentes:

          * < a:first-child ("a" es el primer hijo de cualquier elemento)
          a:first-child (igual)

      • :link, :visited

        Las pseudo-clases vínculo: :link y :visited

        • Las aplicaciones del usuario normalmente muestran los vínculos no visitados de un modo diferenciado de aquellos previamente visitados. CSS proporciona las pseudo-clases ':link' y ':visited' para distinguirlos:


          • La pseudo-clase :link se aplica a los vínculos que aún no han sido visitados.

          La pseudo-clase :visited se aplica una vez que el vínculo ha sido visitado por el usuario.

          Nota. Después de cierta cantidad de tiempo, las aplicaciones del usuario pueden elegir devolver un vínculo visitado a la condición de (no visitado) ':link'.

        • Los dos estados son mutuamente excluyentes.


        • Ejemplos:

          • El lenguaje del documento determina qué elementos son las anclas de orígen de los hipervínculos. Por ejemplo, en HTML 4.0, las pseudo-clases link se aplica a los elementos "a" con el atributo "href". De este modo, las siguientes dos declaraciones CSS2 tienen un efecto similar:

            a:link { color: red }
            :link { color: red }

          Si el siguiente link:

            <a class="externo" href="http://out.side/">link externo</a>

          ha sido visitado, esta regla provocará que sea azul:

            a.externo:visited { color: blue }

      • :hover, :active, :focus

        Las pseudo-clases dinámicas: :hover,:active y :focus

        • Las aplicaciones del usuario interactivas a veces cambian el procesamiento en respuesta a las acciones del usuario. CSS proporciona tres pseudo-clases para los casos comunes: :hover, :active,:focus


        • La pseudo-clase :hover se aplica mientras el usuario señala un elemento (con algún dispositivo para apuntar), pero no lo activa.
          Por ejemplo, una aplicación del usuario visual puede aplicar esta pseudo-clase cuando el cursor (el puntero del ratón) se mueve por encima de una caja generada por el elemento. Las aplicaciones del usuario que no ofrecen soporte a los medios interactivos no tienen que apoyar esta pseudo-clase. Algunas aplicaciones del usuario con conformidad que soportan medios interactivos pueden no ser adecuadas para soportar esta pseudo-clase (ej., lápices ópticos).


        • La pseudo-clase:active se aplica mientras un elemento está siendo activado por el usuario.
          Por ejemplo, el lapso durante el cual el usuario presiona el botón del ratón y lo suelta.


        • La pseudo-clase:focus se aplica mientras un elemento tiene el foco (acepta eventos del teclado u otras formas de entrada de texto).


        • Estas pseudo-clases no son mutuamente excluyentes. Un elemento puede recibir varias de ellas al mismo tiempo.


        • CSS no define qué elementos pueden estar en los estados anteriores o cómo se ingresa y se sale de los estados.
          Mediante el uso de scripts se puede decidir si los elementos reaccionan a los eventos del usuarios o no, y los distintos dispositivos y aplicaciones del usuario pueden tener diferentes maneras de apuntar o activar los elementos.


        • Las aplicaciones del usuario no son obligadas a redibujar el documento en uso a causa de las transiciones de las pseudo-clases.

        Ejemplos

          Una hoja de estilo puede especificar que la propiedad 'font-size' de un vínculo :active debe ser mayor que la de un vínculo inactivo, pero como esto puede ocasionar que las letras cambien de posición cuando el lector selecciona el vínculo, una "au" puede ignorar la regla de estilo correspondiente:

          a:link { color: red } (vínculos no visitados)
          a:visited { color: blue } (vínculos visitados)
          a:hover { color: yellow } (el usuario señala el vínculo)
          a:active { color: lime } (vínculos activos)

          Observe que a:hover debe ir después que las reglas a:link y a:visited, de otro modo las reglas de cascada ocultarán la propiedad 'color' de la regla a:hover.
          También, debido a que a:active está ubicada después de a:hover, el color activo (lime) será aplicado cuando el usuario active y señale el elemento a.


          Un ejemplo de combinación de pseudo-clases dinámicas:

            a:focus { background: yellow }
            a:focus:hover { background: white }

          El último selector equivale a los elementos a que se encuentran en la pseudo-clase :focus y en la pseudo-clase :hover.

      • :lang

        La pseudo-clase de lenguaje: :lang

        • Si el lenguaje del documento especifica cómo se determina el lenguaje humano de un elemento, es posible escribir selectores en CSS que coincidan con elementos basado en su lenguaje.


        • Por ejemplo, en HTML (HTML40), el lenguaje se determina por una combinación del atributo "lang", el elemento META y probablemente por la información del protocolo (tal como en los encabezados HTTP). XML utiliza un atributo denominado xml:lang, y puede haber otros métodos específicos del lenguaje del documento para determinar el lenguaje.


        • La pseudo-clase ':lang(C)' equivale si el elemento está en lenguaje C. Aquí C es un código de lenguaje tal como está especificado en HTML 4.0 (HTML40) y RFC 1766 (RFC1766).

    • CSS Pseudoelemento

      • Los Pseudoelementos

        ¿Que es el pseudoelemento?

        • Los pseudo-elementos crean abstracciones acerca de la estructura del documento más allá de aquellas especificadas por el lenguaje del documento.
          Por ejemplo, los lenguajes de documento no ofrecen mecanismos para acceder a la primera letra o a la primera línea del contenido de un elemento.


        • Los pseudo-elementos de CSS permiten a los diseñadores de hojas de estilo referirse a esta información inaccesible por otros medios.
          Los pseudo-elementos también pueden proporcionar a los diseñadores de hojas de estilo un modo de asignar estilos a un elemento que no existe en el documento fuente (ej., los pseudo-elementos :before y :after permite acceder al contenido generado).

      • :first-line

        El pseudo-elemento :first-line

        • El pseudo-elemento :first-line aplica estilos especiales a la primera línea de un párrafo.

        Ejemplo

          La regla siguiente significa "convertir las letras de la primera línea de cada párrafo en mayúsculas". Sin embargo, el selector "p:first-line" no equivale a ningún elemento HTML real. Se corresponde con un pseudo-elemento que las aplicaciones del usuario con conformidad insertarán al comienzo de cada párrafo.

            p:first-line { text-transform: uppercase }

          Observe que la medida de la primer línea depende de un número de factores, incluyendo el ancho de la página, el tamaño de la fuente, etc. De este modo, un párrafo HTML común como:

            <p>Este es algún párrafo largo en HTML que será partido en varias líneas. La primer línea será identificada por una secuencia ficticia de marcas. Las otras líneas serán tratadas como líneas comunes dentro del párrafo.</p>

          las líneas que resultan partidas como sigue:

            ESTE ES ALGÚN PÁRRAFO LARGO EN HTML QUE será partido en varias líneas. La primer línea será identificada por una secuencia ficticia de marcas. Las otras líneas serán tratadas como líneas comunes dentro del párrafo.

          pueden ser "re-escritas" por las aplicaciones del usuario para incluir la secuencia ficticia de marcas para :first-line. Esta secuencia ficticia de marcas ayuda a mostrar cómo se heredan las propiedades.

            <p><p:first-line> Este es algún párrafo largo en HTML que</p:first-line> será partido en varias líneas. La primer línea será identificada por una secuencia ficticia de marcas. Las otras líneas serán tratadas como líneas comunes dentro del párrafo.</p>

          Si un pseudo-elemento divide un elemento real, el efecto deseado a menudo se consigue con una secuencia ficticia de marcas que cierra y reabre el elemento. De este modo, si marcamos el párrafo anterior con un elemento SPAN:

            <p><SPAN class="test"> Este es algún párrafo largo en HTML que será partido en varias líneas.</SPAN> La primer línea será identificada por una secuencia ficticia de marcas. Las otras líneas serán tratadas como líneas comunes dentro del párrafo.</p>

          la aplicación del usuario puede generar las marcas de inicio y cierre apropiadas para SPAN cuando inserta la secuencia ficticia de marcas para :first-line.

            <p><P:first-line><SPAN class="test"> Este es algún párrafo largo en HTML que</SPAN></P:first-line><SPAN class="test"> será partido en varias líneas.</SPAN> La primer línea será identificada por una secuencia ficticia de marcas. Las otras líneas serán tratadas como líneas comunes dentro del párrafo.</p>

          El pseudo-elemento :first-line sólo puede ser aplicado en elementos a nivel de bloque.

          El pseudo-elemento :first-line es similar a un elemento a nivel de línea, pero con ciertas restricciones. Sólo las siguientes propiedades se aplican al pseudo-elemento :first-line: propiedades de la fuente, propiedades del color, propiedades del fondo, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.

      • :first-letter

        El pseudo-elemento :first-letter

        • El pseudo-elemento :first-letter puede ser usado para las "capitulares" y "capitulares caídas", que son efectos tipográficos de uso frecuente. Esta clase de letra inicial es similar a un elemento a nivel de línea cuya propiedad 'float' es 'none', de otro modo es similar a un elemento flotante.


        • Estas son las propiedades que se aplican a los pseudo-elementos :first-letter:
                *propiedades de la fuente
            
    *propiedades del color
            
    *propiedades del fondo 
            
       'text-decoration'
            
       'vertical-align' (sólo si 'float' es 'none'),
            
       'text-transform'
            
       'line-height' 
            
    *propiedades de los márgenes
            
    *propiedades del relleno
            
    *propiedades de los bordes 
            
       'float' 
            
       'text-shadow'
            
       'clear'.

        Ejemplos

          La siguiente CSS2 hará una capitular caída que abarca dos líneas:


                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
            
     <html>
      <head>
       <title>Capitular caída</title>
       <style type="text/css">
          p { font-size: 12pt; line-height: 12pt; color: blue }
          p:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left; color: red }
          span { text-transform: uppercase }
       </style>
      </head>

      <body>
            
       <p><span>Algunas</span> palabras de un artículo en un periódico.</p>
      </body>
     </html>

          Este ejemplo sería formateado como sigue:

            Algunas palabras de un artículo

            en un periódico, siendo la primera letra

            una letra capital.

          La secuencia ficticia de marcas es:

            <P><SPAN><P:first-letter>A</P:first-letter>lgunas</SPAN>palabras de un artículo en un periódico.</P>

          Observe que la marca para el pseudo-elemento :first-letter es contigua al contenido (es decir, el carácter inicial), mientras que la marca de inicio del pseudo-elemento :first-line se inserta después de la marca de inicio del elemento al que está asignado.


          Con el propósito de conseguir el formato de las capitulares caídas tradicionales, las aplicaciones del usuario pueden aproximar los tamaños de la fuente, por ejemplo para emparejar las líneas de base. Además, el contorno del signo puede ser tenido en cuenta al establecer el formato.


          La puntuación (es decir, los caracteres definidos en Unicode [UNICODE] en las clases de puntuación "open" (Ps), "close" (Pe) y "other" (Po)), que precede a la primera letra debe se incluida, como en:

            'Más vale pájaro en mano

            que cien volando'

            dice un proverbio.

          Los pseudo-elementos :first-letter equivalen a partes de los elementos a nivel de bloque solamente.

          Algunos lenguajes pueden tener reglas específicas acerca de cómo tratar ciertas combinaciones de letras. En alemán, por ejemplo, si la combinación de las letras "ij" aparece al comienzo de una palabra, ambas letras deberían ser consideradas dentro del pseudo-elemento :first-letter.

          El siguiente ejemplo ilustra cómo pueden interactuar los pseudo-elementos que se superponen. La primera letra de cada elemento p será verde con una tamaño de fuente de '24pt'. El resto de la primer línea formateada será azul mientras que el resto del párrafo será rojo.

               p              { color: red; font-size: 12pt }
   p:first-letter { color: green; font-size: 200% }
   p:first-line   { color: blue }

   <p>Un texto corto que ocupa dos líneas</p>

          Asumiendo que el corte de la línea ocurre antes de la palabra "ocupa", la secuencia ficticia de marcas para este fragmento podría ser:

            <p><p:first-line><p:first-letter>U</p:first-letter>n texto corto que</p:first-line>ocupa dos líneas</p>

          Observe que el elemento :first-letter está dentro del elemento :first-line. Las propiedades adjudicadas a :first-line son heredadas por :first-letter, pero son anuladas si la misma propiedad es determinada en :first-letter.

      • :before, :after

        Los pseudo-elementos :before y :after

        • Los pseudo-elementos ':before' y ':after' pueden ser usados para insertar un contenido generado antes o después del contenido del elemento. Son explicados en la sección acerca de texto generado.
            • h1:before {content: counter(chapno, upper-roman) ". "}

        • Cuando los pseudo-elementos :first-letter y :first-line son combinados con :before y :after, se aplican a la primera letra o línea del elemento que incluye el texto insertado. Esto procesará la "E" de "Especial!" en un amarillo oro.
            • p.special:before {content: "Especial! "}
            p.special:first-letter {color: #ffd800}

Página generada automáticamente desde la Base de Datos: CSS/ el 27/3/2008 19:58:47

Copyright © TIC 2003-2008. Email: ilopeztic@hotmail.com