lunes, 18 de julio de 2011
Posisionar Elementos
Al usar hojas de estilo junto con las etiquetas <SPAN> y <DIV> se puede especificar la ubicación del texto o de las imágenes dependiendo de los píxeles.
Esto es posible en versiones 4 y superiores de Netscape e Internet Explorer; sin embargo, la técnica todavía es difícil y puede causar problemas de compatibilidad.
Esto es posible en versiones 4 y superiores de Netscape e Internet Explorer; sin embargo, la técnica todavía es difícil y puede causar problemas de compatibilidad.
Posicionamiento absoluto y relativo
El posicionamiento absoluto {position: absolute} está determinado en relación con la esquina superior izquierda de la ventana del navegador. Las coordenadas de un punto se dan desde arriba hacia abajo (arriba) y desde la izquierda hacia la derecha (izquierda).
El posicionamiento relativo se define de acuerdo con otros elementos de la página, es decir que los elementos que contienen las etiquetas DIV o SPAN se posicionarán en base a los elementos HTML que los precedan.
 |
Posicionamiento de texto
Ubiquemos el texto "¿Cómo funciona?" 80 píxeles desde la parte superior de la ventana y 100 píxeles desde la izquierda:
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;"> ¿Cómo funciona? </SPAN> </BODY> </HTML>
Existen otras maneras de hacer esto, por ejemplo:
<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
¿Cómo funciona?
</DIV>
</BODY>
</HTML>Posicionamiento de una imagen
Ubiquemos la imagen "test.jpg" 80 píxeles desde la parte superior de la ventana y 100 píxeles desde la izquierda (la imagen es de 103 x 61):
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px"> <IMG SRC="test.jpg" > </SPAN> </BODY> </HTML>
Es importante especificar el tamaño de la imagen en las hojas de estilo para reducir el riesgo de incompatibilidad con el navegador.
Superposición de elementos
Vamos a superponer el texto "¿Cómo funciona?" sobre la imagen "test.jpg":
<HTML> <BODY> <SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px"> <IMG SRC="test.jpg" > </SPAN> <SPAN style="position: absolute; top: 50 px; left: 100 px;"> ¿Cómo funciona? </SPAN> </BODY> </HTML>
Con esta sintaxis se pueden superponer tanto elementos de texto como imágenes.
Declaración de una hoja de estilo
Las hojas de estilo no están directamente integradas en las recomendaciones HTML de W3C. Por tal razón, se debe incluir elementos en el código HTML que indiquen tanto el tipo de documento, es decir la versión de HTML y las recomendaciones CSS utilizadas por la página, como los estilos mismos.
Declaración de tipo de documento
En la página HTML se debe incluir una declaración de tipo de documento, una referencia a la norma HTML que se está usando. La declaración se hace al agregar una línea como ésta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>...</HEAD> <BODY>Contenido de la página</BODY> </HTML>
Además, puede utilizarse un metatag para indicarle al navegador o a los motores de búsqueda qué idioma se ha utilizado para definir las hojas de estilo. Este metatag, incluido en el encabezado HTML del documento, se asemeja a lo siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> </HEAD> <BODY>Contenido de la página</BODY> </HTML>
Incorporación de estilos
Se pueden incorporar estilos a un documento HTML de cuatro formas distintas:
- Estilo de documento: se declara en el encabezado, es decir, dentro de las etiquetas <HEAD> y </HEAD>.
- Estilo en línea, tiene el mismo significado que los atributos de las etiquetas.
- Estilo externo, se declara en un archivo separado con la extensión .css
- Estilo importado, se declara en un archivo separado con la extensión .css
Estilo de documento
Las hojas de estilo de una página Web se declaran por medio de la etiqueta STYLE, que se ubica dentro de las etiquetas <HEAD> y </HEAD>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!-- Definiciones de estilo; --> </STYLE> </HEAD> <BODY></BODY> </HTML>El tipo de atributo ="text/css" en la etiqueta <STYLE> se utiliza para especificar el tipo de hoja de estilo que se usa. Las etiquetas de comentario <!-- ... --> se usan para prevenir que los navegadores antiguos, que no son compatibles con las hojas de estilo, muestren esta información en la pantalla.
Estilo en línea
También se puede definir el estilo dentro de las etiquetas de un documento. Este tipo de declaración se denomina declaración en línea.
No se recomienda este método para definir hojas de estilo porque va en contra del propósito mismo de las hojas de estilo, ya que el estilo está integrado dentro de cada elemento por separado. No obstante, puede utilizarse para definir un estilo especial para algún elemento HTML en particular, que no necesita una definición universal.
Para definir un estilo en línea, simplemente se debe agregar el atributo STYLE a la etiqueta HTML a la que se quiera aplicar un estilo en particular:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> ... </HEAD> <BODY> ... <ETIQUETA Style="style:valor;"> ... </ETIQUETA> ... </BODY> </HTML>
 | Un estilo puede aplicarse "en línea" a cualquier etiqueta HTML, exceptuando lo siguiente: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE |
A continuación encontrará un ejemplo de un estilo aplicado a una etiqueta <H1>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> ... </HEAD> <BODY> ... <H1 Style="Font: 18px Verdana; font-weight:bold;"> Título </H1> ... </BODY> </HTML>
Estilo externo
Es una ventaja poder almacenar definiciones de hojas de estilo fuera del documento ya que por lo tanto es posible, al editar el archivo que contiene las hojas de estilo, cambiar la apariencia de todas las páginas Web que utilizan esa hoja.
El primer paso es crear un archivo de texto que contenga las hojas de estilo, cuya extensión es .css, por ejemplo style.css:
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body {background-image: home.gif;}
LI {font: 13px Verdana;}
B {font: 14px Verdana; font-weight: bold;}
A {
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1 {font: 16px Arial;font-weight: bold;color=black;}
H2 {font: 14px Arial;font-weight: bold;color=black;}
-->A continuación, se debe agregar en cada página HTML un acceso directo a la página con las definiciones de estilo:
<HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="style.css"> </HEAD> ...
- La etiqueta <LINK> le indica al navegador que debe buscar un documento situado fuera de la página HTML.
- El atributo rel="stylesheet" especifica que el documento en cuestión es una hoja de estilo externa.
- El atributo type="text/css" especifica el tipo de hoja de estilo.
- El atributo href=" URL " muestra la URL de la hoja de estilo (su ubicación en Internet).
Estilo importado
Por último, las recomendaciones de W3C también ofrecen una manera de incluir hojas de estilo en un documento: importar las hojas de estilo. Es posible importar hojas de estilo externas cuando se declara el estilo del documento al insertar el comando @IMPORT inmediatamente después de la etiqueta de estilo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!-- @IMPORT URL (url de la hoja a importar); Definición de los estilos del documento; --> </STYLE> </HEAD> <BODY></BODY> </HTML>
| Si existen muchas definiciones importadas que afecten todas a la misma etiqueta, el navegador sólo utilizará la última. |
Las etiquetas <SPAN> y <DIV>
En ocasiones, dentro de un mismo párrafo, se deben aplicar estilos diferentes a ciertos segmentos de texto y es para ello que se utilizan las etiquetas <SPAN> y <DIV>.
La etiqueta <SPAN>
La etiqueta <SPAN> se utiliza para aplicar estilos a los segmentos de un párrafo.
Se puede usar con ID o con CLASS.
Su sintaxis es:
Se puede usar con ID o con CLASS.
Su sintaxis es:
<SPAN class=Nonmbre_de_la_clase> Texto </SPAN>
La etiqueta <DIV>
En lugar de aplicar estilos a unas pocas palabras dentro de un párrafo, esta etiqueta los aplica a un bloque de texto, que puede ser un párrafo o varios.
La sintaxis de la etiqueta DIV es:
<DIV class=important> párrafos </DIV>
Estilos en cascada
Con la utilización de los distintos métodos de implementación CSS se pueden definir múltiples estilos. Por tal razón, activar varias hojas de estilo externas da como resultado lo que se denomina estilo en cascada, una combinación de estilos para diferentes elementos HTML. Si varios estilos afectan al mismo elemento, se mantendrá solamente el último.
<LINK rel=stylesheet type="text/css" href="style1.css"> <LINK rel=stylesheet type="text/css" href="style2.css"> <LINK rel=stylesheet type="text/css" href="style3.css">
Cuando diversos estilos están en conflicto en las hojas de estilo externas, las recomendaciones CSS les permiten a los usuarios elegir entre varias hojas de estilo alternativas mediante el atributo rel de la etiqueta STYLE en combinación con el atributo TITLE para seleccionarlas por nombre:
<LINK rel="alternate stylesheet" type="text/css" href="style1.css" title="style1"> <LINK rel="alternate stylesheet" type="text/css" href="style2css" title="style2"> <LINK rel=stylesheet type="text/css" href="style2.css">
Además, cuando se activan múltiples estilos dentro de una página al utilizar varios métodos de inclusión posibles y algunos estilos entran en conflicto, se aplica el estilo más próximo al contenido. La prioridad, en orden descendente, es la siguiente:
Estilo en línea > estilo de documento > estilo importado > estilo externo
Estilo en línea > estilo de documento > estilo importado > estilo externo
Definición de un estilo
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:
- una o más propiedades, seguidas por el carácter ":" (dos puntos)
- 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.
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
}Selectores de tipo
Los "selectores de tipo" (o "selectores de elementos de tipo") son las palabras que están delante de los paréntesis y que indican las etiquetas a las que se aplica el estilo que aparece entre paréntesis.
Para definir el estilo de una etiqueta HTML en particular, sólo debe usarse el nombre de la etiqueta (sin los caracteres < y >). Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
tag {properties}
-->
</STYLE>
</HEAD>
<BODY>
<tag> ... </tag>
...
</BODY>
</HTML>Selectores múltiples
También se puede aplicar un estilo a múltiples etiquetas al separar los nombres de las mismas con una coma (,). La sintaxis de tal selector, denominado selector múltiple, es:
type-selector1, type-selector2 { /* style */ }Selector universal
A través del selector universal ("*") se puede definir un estilo que se aplicará a todos los elementos HTML. La sintaxis del selector universal es:
* { /* style */ } | El selector universal generalmente no se implementa en navegadores. |
Selectores anidados
Se puede seleccionar una etiqueta dentro de un contexto dado, es decir, según los elementos que se encuentran alrededor, mediante selectores contextuales.
Existen varios tipos de selectores contextuales:
- El selector anidado se usa para crear una regla que se aplica solamente cuando el elemento Y está anidado dentro del elemento X. Su sintaxis es:
selector_X selector_Y { /* style; */ }
Para el siguiente código HTML:<p> <i>Nota</i>, esto es una <b>advertencia</b> </p> <b> Leer detenidamente </b>
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por etiquetas <B> que están a su vez anidadas dentro de un grupo de etiquetas <P>):P B { font-weight: bold; color: red; } - El selector de hermanos adyacentes se usa para crear una regla que se aplica solamente cuando el elemento Y le sigue inmediatamente al elemento X. Su sintaxis es:
selector_X + selector_Y { /* style; */ }
Para el siguiente código HTML:<p> <i>Nota</i>, esto es una <b>advertencia</b> </p> <b> Leer detenidamente </b>
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por etiquetas <B> que a su vez siguen al grupo de etiquetas <l>):I + B { font-weight: bold; color: red; } - El selector de hijo se usa para crear una regla que solamente se aplica cuando el elemento Y es descendiente del elemento X. La regla no se aplica si Y se encuentra dentro de una o más etiquetas intermediarias. Su sintaxis es:
selector_X > selector_Y { /* style; */ }
Para el siguiente código HTML:<p> <b><i> Nota </i></b>, esto es una <i><b> advertencia </b></i> </p> <b> Leer detenidamente </b>
La siguiente regla sólo afecta al elemento "<i> Nota </i>" (la única rodeada por etiquetas <B> que están a su vez dentro de un grupo de etiquetas <P>):P > B { font-weight: bold; color: red; }
Propiedades de estilo
Comentarios
Es posible (y se recomienda) documentar las hojas de estilo a través de la incorporación de comentarios que aportan información adicional (una razón para elegir un estilo u otro, el tipo de documento al que se va a aplicar, el contexto, etc.). Los comentarios CSS están marcados con los signos /* y */:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
/* Esto es un comentario */
tagA {properties}
tagB {properties}
tagC {properties}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
Propiedades de Fuente
| Propiedad | Valor | Descripción |
|---|---|---|
| font-family | Fuente específica (Arial, Times, Verdana) Familia (serif, sans-serif, fantasy, monospace, cursive) | Define uno o más nombres de fuentes o familias de fuentes. Si se definen múltiples fuentes, se utilizará la primera que se encuentre en el sistema del usuario. |
| font-style | normal, italic, oblique | Define el estilo de la escritura |
| font-weight | lighter, normal, bold o bolder. Valor numérico (100, 200, 300, 400, 500, 600, 700, 800, 900) | Define el grosor de la fuente |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large Tamaño en puntos (pt), cm, % | Define el tamaño de la fuente |
| font-variant | normal, small-caps | Define una variante (mayúsculas chicas) |
| font | font: Verdana, Arial, bold italic 8px; | Acceso directo a todas las propiedades |
Textos y párrafos
| Propiedad | Valor | Descripción |
|---|---|---|
| color | "#RRGGBB" | Define el color del texto |
| line-height | line-height: 12pt; | Define el espacio entre las líneas |
| text-align | left, center, right o justify | Define la alineación del texto |
| text-indent | text-indent: 5px; | Define la sangría |
| text-decoration | blink (parpadeo), underline (subrayado), line-through (tachado), overline (línea sobre el texto) o none (sin decoración) | Define la decoración |
| text-shadow | text-shadow: 1px 2px 4px black; | Define una sombra paralela del texto y representa, respectivamente, la sombra hacia la derecha, hacia abajo, radio de desenfoque y color. |
| text-transform | uppercase (mayúscula), lowercase (minúscula) o capitalize (primea letra en mayúscula) | Define la capitalización del texto |
| white-space | normal (el texto continuará en la próxima línea), pre (el texto aparecerá con los espacios en blanco que se ingresaron), nowrap (el texto no continuará) | División de palabras |
| word-spacing | word-spacing: 6px; | Define cuánto espacio insertar entre las palabras |
| width | en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en % | Define el ancho de un texto o una imagen |
| height | en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en % | Define la altura de un texto o una imagen |
Colores de fondo
| Propiedad | Valor | Descripción |
|---|---|---|
| background-color | "#RRGGBB" | Define el color de fondo |
| background-image | url(http://url) | Define la imagen de fondo |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | Define cómo se repite la imagen de fondo |
| background-attachment | scroll, fixed | Especifica si la imagen de fondo se quedará en su lugar cuando la pantalla se desplace |
| background-position | top, middle, bottom, left, center o right | Posiciona la imagen con respecto a la esquina superior izquierda |
| background | background: url(test.jpg) fixed repeat; | Acceso directo a las propiedades de fondo |
Márgenes
| Propiedad | Ejemplo | Descripción |
|---|---|---|
| margin-top | margin-top: 5px; | Valor del margen superior |
| margin-right | margin-right: 0.5em; | Valor del margen derecho |
| margin-bottom | margin-bottom: 2pt; | Valor del margen inferior |
| margin-left | margin-left: 0; | Valor del margen izquierdo |
| margin | margin: 5px 0.5em 2pt 0; | Acceso directo a las propiedades de márgenes |
Bordes
| Propiedad | Valor | Descripción |
|---|---|---|
| border[-top -left -bottom -right]-width | en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en % | Grosor del borde (para la ubicación dada) |
| border[-top -left -bottom -right]-color | border-left-color: #RRGGBB; | Color del borde (para la ubicación dada) |
| border[-top -left -bottom -right]-style | solid (sólido), dashed (con trazos), dotted (con puntos), double (dos líneas) o ridge (tridimensional) | Estilo del borde (para la ubicación dada) |
| border-collapse | collapse separate | Agrega o elimina el efecto "3D" |
| Border | border: 1px 0 0 2px dotted green; | Acceso directo global a las propiedades de bordes |
Relleno
| Propiedad | Valor | Descripción |
|---|---|---|
| padding-top | padding-top: 3px; | Relleno entre el elemento y el borde superior |
| padding-right | padding-right: 0.25em; | Relleno entre el elemento y el borde derecho |
| padding-bottom | padding-bottom: 0; | Relleno entre el elemento y el borde inferior |
| padding-left | padding-left: 2pt; | Relleno entre el elemento y el borde izquierdo |
| padding | padding: 3px 0.25em 0 2pt; | Acceso directo a las propiedades de relleno |
Tablas
| Propiedad | Valor | Descripción |
|---|---|---|
| border-collapse | separate o collapse | Combina los bordes de las celdas (collapse), no los combina (separate) |
| border-spacing | border-spacing: 4px; | Espacio de las celdas |
| caption-side | top, bottom, left o right | Ubica la leyenda de la tabla |
| empty-cells | show o collapse | Muestra (show) u oculta (collapse) las celdas vacías |
| table-layout | fixed (independiente del contenido de la celda) o auto (depende del contenido de la celda) | Ancho fijo o variable |
| speak-headers | always (siempre antes de cada celda) o once (sólo una vez) | Propiedad destinada para los ciegos y minusválidos visuales que indica cómo actúa el sonido al leer las celdas de encabezado de las tablas |
Listas
| Propiedad | Valor | Descripción |
|---|---|---|
| list-style-type | decimal, upper-roman, lower-latin, disc, circle, square o none | Tipo de viñetas y numeración |
| list-style-image | list-style-image: url(image.png); | Personaliza las viñetas con una imagen |
| list-style-position | inside o outside | Especifica la sangría de las viñetas |
| list-style | Acceso directo a las propiedades de lista |
Presentación de la página
| Propiedad | Valor | Descripción |
|---|---|---|
| @page | @page(size: portrait) | Define la presentación de impresión |
| size | auto, landscape o portrait | Formato de impresión |
| margin-top | margin-top: 3 cm; | Margen superior |
| margin-right | margin-right: 1,5 cm; | Margen derecho |
| margin-bottom | margin-bottom: 1 cm; | Margen inferior |
| margin-left | margin-left: 2 cm; | Margen izquierdo |
| marks | crop (marcas de recorte), cross (marcas cruzadas), none (sin marcas) | Marcas de recorte y marcas cruzadas |
| page-break-before | Always, avoid | Inserta un salto de página antes de un elemento |
| page-break-after | Always, avoid | Inserta un salto de página después de un elemento |
| orphans | orphans: 2; | Evita que haya líneas huérfanas al final de una página. Define la cantidad mínima de líneas de un elemento que quedan en la parte inferior de una página antes del salto de página. |
| widows | widows: 1; | Evita que haya líneas viudas al final de una página. Define la cantidad mínima de líneas de un elemento que quedan en la parte superior de una página después de un salto de página. |
Unidades de las CSS
Con las hojas de estilo se pueden usar valores numéricos para establecer propiedades de estilo de varias maneras:
- De manera absoluta, es decir, en unidades que son independientes de la forma del resultado (por ejemplo, en centímetros).
- De manera relativa, es decir, en unidades con respecto a un elemento.
Los valores de las hojas de estilo pueden darse en números enteros o en números reales (dígitos con una parte entera y una parte decimal).
En algunos casos, estos valores pueden ser negativos (precedidos por un signo menos "-"). Sin embargo, algunas propiedades tienen límites superiores e inferiores para los valores que pueden aceptar.
Unidades absolutas
Las unidades absolutas que ofrece el estándar CSS están resumidas en este cuadro:
| unidad | descripción |
|---|---|
| em | Relativa al tamaño de la fuente del elemento indicado. La única excepción a esta regla: cuando la propiedad font-size está definida, es relativa al tamaño de fuente del elemento principal. |
| ex | Relativo a la altura de las letras minúsculas del elemento indicado. La única excepción a esta regla: cuando la propiedad font-size está definida, es relativa a la altura de las letras minúsculas del elemento principal. |
| px | El píxel. Esta unidad puede mostrarse diferente según la resolución de pantalla del monitor del usuario. |
| % | El porcentaje es una unidad relativa al tamaño del elemento indicado o de su elemento principal. |
Editores de Texto
Aunque los archivos CSS pueden crearse y editarse “a mano”, es decir, con un editor de texto, también es posible procesar una hoja de estilo mediante un programa escrito en ECMAscript, Java o algún otro lenguaje. De hecho, es algo tan común que existen librerías de software con funciones útiles para estas aplicaciones. Para contribuir a la portabilidad de esos programas y librerías a diferentes plataformas informáticas, el W3C ha elaborado una especificación, llamada CSS-DOM, que define un conjunto de funciones que todas esas librerías deben proveer.
El Modelo de Objetos para Documentos CSS es una interfaz de programación abstracta (API, Abstract Programming Interface) que permite manipular CSS (y hasta cierto punto otros lenguajes de aplicación de estilos) desde dentro de un programa. Una API es la especificación de una librería de software. Usted puede verlo como su fuera un manual: describe las funciones y sus parámetros pero no contiene el código en si mismo.
Existen diversas bibliotecas CSS-DOM para diferentes plataformas, y muchas de ellas son gratuitas. Muchos navegadores traen incorporada una biblioteca CSS-DOM para usar con programas escritos en ECMAscript.
SAC (Simple API for CSS / Interfaz Abstracta de Programación Simple para CSS) es un complemento al CSS-DOM. El CSS-DOM contiene funciones para manipular una hoja de estilos después de que la misma ha sido cargada en memoria; las funciones definidas por SAC ayudan en el análisis sintáctico (parsing) de una hoja de estilos, por ejemplo, para transferir una hoja de estilos de un archivo a la memoria.
El CSS-DOM es una Recomendación del W3C. SAC es un proyecto en desarrollo. Otro software relacionado (a excepción de navegadores) es listado en la página principal de CSS.
El Modelo de Objetos para Documentos CSS es una interfaz de programación abstracta (API, Abstract Programming Interface) que permite manipular CSS (y hasta cierto punto otros lenguajes de aplicación de estilos) desde dentro de un programa. Una API es la especificación de una librería de software. Usted puede verlo como su fuera un manual: describe las funciones y sus parámetros pero no contiene el código en si mismo.
Existen diversas bibliotecas CSS-DOM para diferentes plataformas, y muchas de ellas son gratuitas. Muchos navegadores traen incorporada una biblioteca CSS-DOM para usar con programas escritos en ECMAscript.
SAC (Simple API for CSS / Interfaz Abstracta de Programación Simple para CSS) es un complemento al CSS-DOM. El CSS-DOM contiene funciones para manipular una hoja de estilos después de que la misma ha sido cargada en memoria; las funciones definidas por SAC ayudan en el análisis sintáctico (parsing) de una hoja de estilos, por ejemplo, para transferir una hoja de estilos de un archivo a la memoria.
El CSS-DOM es una Recomendación del W3C. SAC es un proyecto en desarrollo. Otro software relacionado (a excepción de navegadores) es listado en la página principal de CSS.
Suscribirse a:
Entradas (Atom)