Sintaxis de estilo (CSS)

 

En las primeras versiones del HTML, el código fuente de una página web contenía tanto la información (el contenido) como la forma de representarse (el diseño o formato). Actualmente, estos dos aspectos se pueden separar. La página web (el documento html) sólo debe contener información, mientras que el formato se debe definir en las llamadas hojas de estilo (en inglés, CSS, Cascading Style Sheets, es decir, Hojas de Estilo en Cascada).

Las ventajas de utilizar hojas de estilo son muchas, sobre todo permiten hacer un diseño consistente y fácil de modificar. Si varias páginas web hacen referencia a la misma hoja de estilo, para cambiar la apariencia de un elemento de todas las páginas (por ejemplo, del encabezado <h1>) es suficiente con hacer los cambios en un único lugar, en la hoja de estilo.

 

Definición de un estilo

 

Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los elementos de la página. Una regla CSS se caracteriza por dos elementos principales:

 

• Un selector de tipo para especificar a qué etiquetas del documento se aplica el estilo.

• Una declaración de estilo, que se define entre paréntesis, para especificar qué estilo aplicar a las etiquetas seleccionadas. A su vez, la declaración está compuesta por:

 

 1.-una o más propiedades, seguidas por el carácter ":" (dos punto

 2.-uno o más valores asociados a cada propiedad, entre comillas y separados por comas si hay múltiples valores, y todos seguidos por un punto y coma.

 

Por lo tanto, la sintaxis es:

 

 

 

 

 

 

 

 

La siguiente sintaxis define, a forma de ejemplo, el estilo a aplicar a hipervínculos (etiqueta <A>), específicamente fuente Verdana de 18 píxeles de tamaño, en negrita y en color amarillo:

 

A {

 font-family: Verdana;

 font-size: 18px;

 font-style: bold;

 color: yellow

 }

 

Sintaxis de las hojas de estilo

 

Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de cada una de las etiquetas de una página web.

Una hoja de estilo está formada por una o varias sentencias. Existen dos tipos de sentencias: las reglas-arroba y las reglas.

Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;).

Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y acaba con llaves { }.

 

 

 

 

 

 

 

 

 

 

 

Algunas reglas-arroba (@charset, @import o @namespace) deben aparecer al principio de la hoja de estilo, pero el resto (@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.

 

 

 

 

 

 

 

 

 

 

Cada declaración está formada por una o varias propiedades y su valor (o valores) correspondiente. Las propiedades van separadas entre sí por puntos y comas. El valor (o valores) van separados de las propiedades por dos puntos. En general, si una propiedad necesita varios valores, los valores van separados por espacios en blanco. En general, si una propiedad admite varios valores alternativos, los valores van separados por comas.

 

 

 

 

 

 

 

 

Definir varias selectores simultáneamente

 

Se pueden definir varios selectores simultáneamente escribiendo los selectores separados por comas, como muestran los siguientes ejemplos:

 

 

 

 

 

Lo que no es correcto es definir varias propiedades simultáneamente, como muestran los siguientes ejemplos:

 

 

 

 

 

 

 

 

Comentarios en las hojas de estilo

 

Una hoja de estilo puede contener comentarios. Los delimitadores del comentario son /* ... */ (como en el lenguaje de programaciónC). Los comentarios pueden extenderse varias líneas, como ilustra el siguiente ejemplo:

 

 

 

 

 

 

 

 

 

 

Bibliografia 

 

http://www.mclibre.org/consultar/amaya/css/css_quees.html#

 

http://www.tic2.org/WebTecnica/Programacion/CSS/CSSDocEstructura/CSSDocEstructura.htm#IDAIKPY