Bloques de definiciones CSS dentro de la misma página HTML sobre las que se aplican. Se
determinan dentro del bloque HTML <STYLE></STYLE> y deben ir colocadas entre los
tags de cabecera del documento - Desde HTML hasta BODY -. Su definición se hace
extensible a todos los elementos HTML coincidentes de la página. La apertura de nuevas
páginas no hereda las definiciones de la página actual.
Un ejemplo de un estilo en bloque se vería en el Código fuente 34.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1{font: 15pt "Arial";color: blue}
P {color: red; text-decoration: italic}
</STYLE>
</HEAD>
<BODY>
<H1>Cabecera con estilo</H1>
<P>Párrafo con estilo</P>
Texto sin estilo
</BODY>
</HTML>
Código fuente 34
CSS Internas: in-line
Establecen la definición de marcas CSS dentro del mismo documento HTML sobre el que hacen efecto. Su ámbito es el documento al que pertenecen. Puesto que son exclusivas del documento, no se puede reutilizar su formato a no ser que sean copiadas a otros documentos HTML.
a.1) in-line
Marcas CSS que se sitúan en el mismo tag HTML sobre el que queremos que se aplique el
estilo de formato. Son las más específicas de la recomendación. Sólo afectan al elemento
HTML que las incorpora. El resto de elementos HTML, que ya no incluyen dicha definición
CSS asumen las propiedades por defecto del navegador. Se colocan dentro del cuerpo BODY
del documento HTML.
<!—Este tag IMAGE asume el estilo de tamaño de 64x64
<IMG STYLE=”height:64;width:64” SRC=”icono.gif”>
<!—Este tag IMAGE asume el tamaño predeterminado de l a imagen Icono2.gif
<IMG SRC=”icono2.gif”>
Código fuente 33
a.1) in-line
Marcas CSS que se sitúan en el mismo tag HTML sobre el que queremos que se aplique el
estilo de formato. Son las más específicas de la recomendación. Sólo afectan al elemento
HTML que las incorpora. El resto de elementos HTML, que ya no incluyen dicha definición
CSS asumen las propiedades por defecto del navegador. Se colocan dentro del cuerpo BODY
del documento HTML.
<!—Este tag IMAGE asume el estilo de tamaño de 64x64
<IMG STYLE=”height:64;width:64” SRC=”icono.gif”>
<!—Este tag IMAGE asume el tamaño predeterminado de l a imagen Icono2.gif
<IMG SRC=”icono2.gif”>
Código fuente 33
¿Es todo correcto en las CSS?
Aunque CSS es una norma que permite independizar de una manera extremadamente flexible el contenido de la forma, lo cierto es que también es una fuente potencial de errores de concepto.
Puede ocurrir que nos olvidemos de la máxima absoluta del diseño independiente de contenido – forma y diseñar los documentos orientados a las hojas de estilos que ya están creadas para poder obtener los efectos de tabulado deseados. Esto no es correcto, puesto que en un futuro modificar la forma implicará modificar el documento.
Así mismo ocurre también tener la tentación de modificar los elementos base de HTML para producir efectos de herencia y evitar así trabajo innecesario a la hora de rediseñar el documento. Pero es también un error, puesto que futuras aplicaciones de la hoja de estilo invalidaría el uso correcto de las normas de presentación elementales de HTML. Y más si un tercero va a diseñar páginas nuevas y no conoce la aplicación de las normas de estilo del documento, viéndose forzado a rescribir las reglas originales de nuevo.
Con lo cual, podemos comprobar que si no se realiza un buen diseño el empleo de CSS puede
desembocar en un descontrol de formatos que incluso pueden machacarse unos a otros. Haciendo
inviable la independencia contenido – forma.
Como resumen a este punto, dictar una nueva máxima absoluta: diseñar los documentos sin estilos.
De manera que puedan ser correctamente leídos en cualquier tipo de entorno. Un documento
nunca dependerá de su estilo. Después, y cuando las normas de diseño lo exijan, será cuando
apliquemos estas “mascaras” de formato gráfico que llamaremos “estilos”.
Puede ocurrir que nos olvidemos de la máxima absoluta del diseño independiente de contenido – forma y diseñar los documentos orientados a las hojas de estilos que ya están creadas para poder obtener los efectos de tabulado deseados. Esto no es correcto, puesto que en un futuro modificar la forma implicará modificar el documento.
Así mismo ocurre también tener la tentación de modificar los elementos base de HTML para producir efectos de herencia y evitar así trabajo innecesario a la hora de rediseñar el documento. Pero es también un error, puesto que futuras aplicaciones de la hoja de estilo invalidaría el uso correcto de las normas de presentación elementales de HTML. Y más si un tercero va a diseñar páginas nuevas y no conoce la aplicación de las normas de estilo del documento, viéndose forzado a rescribir las reglas originales de nuevo.
Con lo cual, podemos comprobar que si no se realiza un buen diseño el empleo de CSS puede
desembocar en un descontrol de formatos que incluso pueden machacarse unos a otros. Haciendo
inviable la independencia contenido – forma.
Como resumen a este punto, dictar una nueva máxima absoluta: diseñar los documentos sin estilos.
De manera que puedan ser correctamente leídos en cualquier tipo de entorno. Un documento
nunca dependerá de su estilo. Después, y cuando las normas de diseño lo exijan, será cuando
apliquemos estas “mascaras” de formato gráfico que llamaremos “estilos”.
Las CSS o Cascade Style Sheets (hojas de estilo en cascada)
CSS (Cascade Style Sheets, hojas de estilo en cascada) es una recomendación basada en el estándar de
Internet del W3C, que describe el conjunto de símbolos, reglas y asociaciones existentes entre los
elementos del lenguaje que forman un documento HTML y su apariencia gráfica en pantalla: color,
fondo, estilo de fuente, posición en el espacio...etc.
CSS establece los elementos necesarios para independizar el contenido de los documentos HTML de
la forma con la que se presentan en pantalla en función del navegador empleado. CSS extiende las
normas de formato del documento, sin afectar a la estructura del mismo. De esta manera, un error en
un formato, un navegador que no soporta colores...o cualquier otro error relacionado con el formato
del documento no invalida el mismo.
CSS además también aporta elementos dinámicos de formato, pues es posible capturar el estilo de los
elementos cuando se produce una reacción sobre ellos. De esta manera es posible evitar la escritura de
código JavaScript para conseguir efectos tan vistosos como el subrayado automático de hipervínculos,
botones gráficos, fondos de color en controles input html... etc.
Internet del W3C, que describe el conjunto de símbolos, reglas y asociaciones existentes entre los
elementos del lenguaje que forman un documento HTML y su apariencia gráfica en pantalla: color,
fondo, estilo de fuente, posición en el espacio...etc.
CSS establece los elementos necesarios para independizar el contenido de los documentos HTML de
la forma con la que se presentan en pantalla en función del navegador empleado. CSS extiende las
normas de formato del documento, sin afectar a la estructura del mismo. De esta manera, un error en
un formato, un navegador que no soporta colores...o cualquier otro error relacionado con el formato
del documento no invalida el mismo.
CSS además también aporta elementos dinámicos de formato, pues es posible capturar el estilo de los
elementos cuando se produce una reacción sobre ellos. De esta manera es posible evitar la escritura de
código JavaScript para conseguir efectos tan vistosos como el subrayado automático de hipervínculos,
botones gráficos, fondos de color en controles input html... etc.
Programación de Hojas de Estilo en Cascada (CSS)
Desde el comienzo de los procesadores de texto siempre ha existido la necesidad de formatear los documentos de acuerdo a un conjunto de normas que se establecen previamente de acuerdo a unos requisitos: documentos empresariales, orientados al marketing, generación de informes de resultados o análisis... etc. Dichos documentos establecen inicialmente unas propiedades que se van a mantener durante toda la etapa de generación del mismo. A este conjunto de propiedades que establecen la forma del documento, le llamaremos formato.
Tan importante es generar el contenido del documento como generar el formato del mismo. Pues, de echo, es la cara visible que cualquier persona va a tener accesible cuando quiera consultar los contenidos del documento. La importancia de la forma estriba en el nivel de satisfacción que deseamos que tenga la persona que va a consultar nuestros informes: los colores empleados, la forma de las letras, la colocación de los párrafos, la sencillez de búsqueda de información concreta... Son elementos que no se pueden tomar a la ligera y menos ignorar. Puesto que el futuro uso de nuevos documentos (o reutilización de los ya existentes) por parte del mismo usuario depende de ello.
Si estos conceptos ya son importantes en la vida ordinaria y en la documentación generada por diversas fuentes, con más razón en Internet, donde la forma muchas veces marca el éxito de las páginas Web o bien la caída en el olvido en los inmensos mares de bits de la Red mundial.
Pero en Internet surge una necesidad - que ya existía en los primeros sistemas de edición de documentos, pero que no está tan marcada - : la posibilidad de poder cambiar de manera sencilla y rápida el formato de los documentos. ¿Por qué?... porque Internet es un medio totalmente dinámico, que siempre está cambiando, evolucionando, probando nuevos elementos visuales. Y las páginas Web mantienen una auténtica “guerra” a ver quién consigue un formato visual más atractivo, que enganche al usuario y así fidelizarlo lo más posible. Debido a esta cadena continua de cambios, los documentos HTML deberían proporcionar mecanismos que permitieran “cambiar” la forma del documento de un manera ágil, sin que afecte a la estructura del mismo, de tal manera que a base de asignar nuevas “plantillas” de formato, la forma del documento aparentara cambiar radicalmente de aspecto.
Pudiendo ser depurado éste de manera continua, y dando, además, la posibilidad de verse mejorado a base de adición de nuevos elementos de formato. Se consigue así independizar el contenido de la forma.
A este conjunto de “plantillas” de formato de documentos las denominaremos hojas de estilo. Y serán las que determinen las propiedades graficas de formato que deben cumplir todos y cada uno de los elementos HTML de los que se compone una página Web. Puesto que podremos estructurar diversas
hojas de estilo en función a diversos criterios, y dichas hojas aplicarlas sobre un mismo documento, ampliaremos el nombre las mismas por el de hojas de estilo en cascada, dando a entender que es posible combinar varias hojas de estilo para obtener efectos de presentación complejos, fruto de la aplicación en cascada de las mismas. Y si en algún momento el diseño no va de acorde a las expectativas, siempre será posible cambiar aquella hoja que no es de agrado y sustituirla por otra mejor sin afectar al resto de los componentes.
Tan importante es generar el contenido del documento como generar el formato del mismo. Pues, de echo, es la cara visible que cualquier persona va a tener accesible cuando quiera consultar los contenidos del documento. La importancia de la forma estriba en el nivel de satisfacción que deseamos que tenga la persona que va a consultar nuestros informes: los colores empleados, la forma de las letras, la colocación de los párrafos, la sencillez de búsqueda de información concreta... Son elementos que no se pueden tomar a la ligera y menos ignorar. Puesto que el futuro uso de nuevos documentos (o reutilización de los ya existentes) por parte del mismo usuario depende de ello.
Si estos conceptos ya son importantes en la vida ordinaria y en la documentación generada por diversas fuentes, con más razón en Internet, donde la forma muchas veces marca el éxito de las páginas Web o bien la caída en el olvido en los inmensos mares de bits de la Red mundial.
Pero en Internet surge una necesidad - que ya existía en los primeros sistemas de edición de documentos, pero que no está tan marcada - : la posibilidad de poder cambiar de manera sencilla y rápida el formato de los documentos. ¿Por qué?... porque Internet es un medio totalmente dinámico, que siempre está cambiando, evolucionando, probando nuevos elementos visuales. Y las páginas Web mantienen una auténtica “guerra” a ver quién consigue un formato visual más atractivo, que enganche al usuario y así fidelizarlo lo más posible. Debido a esta cadena continua de cambios, los documentos HTML deberían proporcionar mecanismos que permitieran “cambiar” la forma del documento de un manera ágil, sin que afecte a la estructura del mismo, de tal manera que a base de asignar nuevas “plantillas” de formato, la forma del documento aparentara cambiar radicalmente de aspecto.
Pudiendo ser depurado éste de manera continua, y dando, además, la posibilidad de verse mejorado a base de adición de nuevos elementos de formato. Se consigue así independizar el contenido de la forma.
A este conjunto de “plantillas” de formato de documentos las denominaremos hojas de estilo. Y serán las que determinen las propiedades graficas de formato que deben cumplir todos y cada uno de los elementos HTML de los que se compone una página Web. Puesto que podremos estructurar diversas
hojas de estilo en función a diversos criterios, y dichas hojas aplicarlas sobre un mismo documento, ampliaremos el nombre las mismas por el de hojas de estilo en cascada, dando a entender que es posible combinar varias hojas de estilo para obtener efectos de presentación complejos, fruto de la aplicación en cascada de las mismas. Y si en algún momento el diseño no va de acorde a las expectativas, siempre será posible cambiar aquella hoja que no es de agrado y sustituirla por otra mejor sin afectar al resto de los componentes.
Conclusión
Como puede ver el lector la situación respecto a las versiones 4.x de los navegadores era problemática.
Afortunadamente, los sucesivos parches y versiones de refresco, han ido acercándose cada vez más a
ese estándar de facto que es la recomendación de W3C HTML 4.01.
Afortunadamente, los sucesivos parches y versiones de refresco, han ido acercándose cada vez más a
ese estándar de facto que es la recomendación de W3C HTML 4.01.
Objetos, Imágenes y Applets La marca IMG
Excepción hecha del atributo longdesc (descripción larga), ambos navegadores soportan esta marca de acuerdo con el estándar, si bien –debido a la creciente importancia de los elementos multimedia- le han añadido algunas características por su cuenta.
La marca LINK
Debido a una cierta falta de interés en especificar tipos de enlace en el estándar anterior, ésta marca se soporta de forma superficial. De hecho, el único tipo de enlace soportado por ambos es rel=stylesheet, que, lógicamente, indica una Hoja de Estilo. Netscape, también soporta rel=fontdef, para indicar un fichero de tipo de letra si se quiere utilizar la característica Fuentes Dinámicas de Netscape. Así mismo, ambos navegadores soportan el atributo type, como forma de definir el lenguaje de la Hoja de Estilo a utilizar. (Como ya hemos citado anteriormente, Explorer soporta también el atributo media, cuyo único efecto consiste en ignorar las Hojas de Estilo enlazadas mediante el atributo media=print.
Hiperenlaces La marca A
Los dos navegadores soportan su funcionalidad básica: como marcadores y como encabezamientos de hiperenlace. Sin embargo, los atributos hreflang, type, charset, rel y rev, siguen sin considerarse. El único atributo útil es title que sólo lo soporta Explorer, que muestra la correspondiente etiqueta flotante (tooltip), con su contenido, amén de usar el texto como valor de marcador de usuario por defecto.
Columnas, filas y agrupaciones de ambas
Explorer soporta las marcas thead, tfoot, tbody, colgroup, col, tr, th y td de acuerdo con la especificación, con algunas excepciones: ninguno de los elementos citados puede alinearse estableciendo el atributo align a justify, y los contenidos no pueden ser alineados respecto a un carácter mediante aling=char y los atributos char y charoff. De igual forma, ignora el atributo axis, referente a las celdas de la tabla. Por lo demás se ajusta el estándar totalmente.
La marca CAPTION
Explorer la reconoce, aunque interpreta los valores left y right del atributo align como alineación del
texto del título de la tabla (Caption), en vez de como la posición de éste en la tabla misma. También se
reconoce el atributo valign con valores top y bottom para la alineación del título en la celda.
texto del título de la tabla (Caption), en vez de como la posición de éste en la tabla misma. También se
reconoce el atributo valign con valores top y bottom para la alineación del título en la celda.
Suscribirse a:
Entradas (Atom)