1. ¿Qué son las hojas de estilo? Las hojas de estilo deben su nombre a la traducción del concepto inglés "Cascading Style Sheets". Se trata de instrumentos de formateo de los documentos para la Web (HTML, y no sólo), a través de los cuales se puede definir el estilo de página. En concreto, con las hojas de estilo es posible:
2. ¿CSS es sinónimo de HTML dinámico? No, salvo en parte. HTML dinámico explota un modelo de objetos diferente a CSS, pero está ligado a él por algunas funciones como el desplazamiento dinámico de los elementos en la página. El uso conjunto de los CSS y Javascript permite que HTML dinámico manipule los elementos de la página, además de, como es natural, tener acceso a ellos.
3. ¿Por qué todavía hoy gran parte de la formatación de los documentos HTML se produce sin CSS? La respuesta depende de diferentes interpretaciones. La costumbre de usar código de HTML "clásico" desempeña un papel importante. Podemos intentar, de todos modos, un examen analítico de las causas de que no se use:
4. ¿Los CSS sustituirán a HTML? Absolutamente no. El papel de las hojas de estilo consiste en integrar HTML estándar y no sustituirlo. Su función respecta a la separación entre estilos, contenidos y estructura. La prueba es que las especificaciones de los CSS se han integrado, primero, en la versión 3.2 y, después, en la 4.0 de HTML.
5. En mi sitio he usado CSS y formatización normal HTML. ¿Cuál de los dos prevalece sobre el otro? Los CSS en línea prevalecen sobre los CSS incorporados y externos. Los CSS incorporados prevalecen sobre los CSS externos. La formatización normal HTML, estando integrada dentro del documento, prevalece sobre los CSS incorporados y externos.
6. ¿Existe sólo un tipo de hojas de estilo? No, existen diferentes con diferente lógica de funcionamiento.
7. ¿Qué editor tengo que usar para crear los archivos con extensión CSS? Ningún editor resulta particularmente apto para las hojas de estilo, sobre todo porque no es estrictamente necesario usar uno. El presente tutorial se basa en conceptos desvinculados de las diferentes Front Page y editores visuales, centrándose exclusivamente en el código. Los ejemplos citados en estas páginas se han creado con el vulgarísimo editor de textos Notepad de Win95. Para informaciones prácticas sobre la realización
8. ¿Cuál fue el primer navegador que introdujo los CSS? El 14 de agosto de 1996, la versión 3.0 de MsIe introdujo por primera vez las hojas de estilo. Posteriormente, sería la versión 4 de Netscape Navigator.
9. ¿Qué navegadores soportan las hojas de estilo en este momento? Microsoft Internet Explorer en sus versiones 3 y superiores.
Netscape Navigator desde la versión 4 y superiores.
Opera desde la versión 3.5.
Amaya.
NCSA Mosaic.
Hay que subrayar que no todos los navegadores mencionados soportan
totalmente las especificaciones de CSS1 y CSS2, pero en cada uno de
ellos se aprecian diferencias de interpretación.
10. ¿Qué efectos son soportados por Explorer? Internet Explorer soporta bastante bien la recomendación CSS1 pero falla bastante con la 2. Además tiene algunos filtros no estándar.
11. ¿Qué efectos son soportados por Netscape? Netscape
soporta completamente una tecnología alternativa a los CSS, las hojas
de estilo Javascript. Netscape 3 es absolutamente incompatible con las
especificaciones de los CSS1 y CSS2, mientras que la versión 4 de este
navegador soporta sólo en parte las hojas de estilo. Una compatibilidad
casi absoluta es la que se refiere al posicionamiento dinámico, aunque
encuentra algunas dificultades de visualización con con las
especificaciones de los background y del color de fondo, atributos de
márgenes y alineamiento, atributos de estilo para el texto y los efectos
sobre el texto y los enlaces.
No soporta de ninguna manera: los controles del cursor, los efectos de
transición, los filtros sobre las imágenes ni los efectos sobre
formularios.
12. ¿Dónde puedo encontrar una lista completa de las incompatibilidades de los diferentes navegadores respecto a los CSS? Una lista completa y actualizada periódicamente de todos los bug de los diferentes navegadores respecto a los CSS está disponible, aunque sólo en la versión inglesa, en CSS Bugs and Workarounds.
13. ¿Qué sucede cuando Netscape, o un navegador de antigua generación, encuentra un efecto CSS incompatible? Nada, o mejor nada que implique errores en la visualización de la página, como les sucede a los Javascript incompatibles. Los editores obsoletos mostrarán la página con el flujo normal de los datos del documento, sin ninguna formatización creada por los CSS. El texto perderá toda formatización y será alineado arriba a la izquierda.
14. He incluido los CSS en mi página, pero cuando la veo, me aparece blanca, ¿por qué? Los CSS exigen mucha atención y cuidados para la redacción del código. Existen algunas diferencias de sintaxis entre HTML estándar y las hojas de estilo. Recuerda las incompatibilidades que Netscape reserva para estos instrumentos
15. No consigo ajustar el color de fondo de un documento completo con las hojas de estilo. ¿Dónde me estoy equivocando? MsIe 3 y Netscape 4 ignoran el atributo background dentro del body, obligando por tanto a usar el código que está en el marcador BODY de HTML clásico. Sin este expediente, se corre el riesgo de ofrecerles un fondo gris a los usuarios Netscape.
16. ¿Cómo puedo realizar en el documento enlaces con hojas de estilo externas? Es suficiente incluir el siguiente código entre los tag <HEAD> del documento:
<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <head> <body> ...Donde
style.css es el nombre del archivo externo (con extensión css) que recoge los estilos de página.
17. ¿Las hojas de estilo son sensibles a las mayúsculas y minúsculas? No, no lo son.
18. ¿Cómo puedo incluir comentarios en el código de las hojas de estilo?
Es necesario abrir los comentarios con:
/*
y cerrarlos con:
*/.
Pasando a un ejemplo práctico, lo que sigue a continuación es un comentario a una hoja de estilo:
<STYLE>
/* Esto es un simple comentario */
a:link, a:visited { text-decoration: none }
</STYLE>
19. ¿Es mejor usar la medición en píxel(px) o en puntos (pt)? La unidad de medida del texto en documentos para la Web se da para Pixel (px) y Puntos (pt). Si en la pantalla esta diferencia no tiene consecuencias concretas, durante el proceso de impresión es importante usar una u otra. La medición en puntos (pt), al contrario que en pixel, es independiente de la resolución que tenga la impresora, y mantiene una buena calidad incluso sobre el papel. Mejor, por tanto, usar medidas en puntos (pt). Veamos un ejemplo:
<STYLE>
H1 { font-size:12px }
</STYLE>
<STYLE>
H1 { font-size:12pt }
</STYLE>
20. ¿Cómo puedo incluir un "punto y aparte" con las hojas de stilo? Los CSS2 soportan este código:
<P style="page-break-after: always">Netscape 4 no soporta CSS2, mientras que MsIe 4 los soporta sólo en parte; por tanto, se pueden dar malos funcionamientos de este código.
21. ¿Es mejor usar las hojas de estilo en línea, incorporadas o externas? Las hojas de esstilo externas (o conectadas) son las que responden mejor a las exigencias de los reveladores, y sobre todo las que mejor interpretan la filosofía de las hojas de estilo. Así pues, nuestro consejo es que se utilicen estos estilos tanto por corrección teórica como por las ventajas prácticas.
22. Para definir el tamaño del carácter, ¿es
mejor utilizar el clásico <font size=x> de HTML o el atributo
font-size de los CSS? El W3C, consorcio de empresas que se ocupa de
la armonización de los instrumentos de la Web, ha "desaprobado" el uso
de para establecer el tamaño, tipo de fuente y color del texto.
El atributo FUENTE, siempre según el estándar actual, tiene que
sustituirse con las hojas de estilo. No respetar esta regla no implica
errores en la visualización de la página, pero convierte el documento en
incompatible con con el estándar normal de HTML.
Entre otras cosas, la formatización del texto con los CSS garantiza el
control sobre el texto y, por tanto, es lo más aconsejable.
23. ¿Cómo puedo fijar la imagen de fondo de una página a pesar del desplazador vertical? ¿Puedes fijar la imagen de fondo de un página Web a pesar del desplazador?
Este efecto está limitado a Ms Internet Explorer y se obtiene gracias al siguiente código:
<BODY background="fondo.gif" bgproperties="fixed">Donde
fondo.gif es la imagen de fondo del documento y
bgproperties colocado a fixed es la propiedad
que fija el fondo. Los usuarios de
Netscape no encontrarán ningún mensaje de error, sino sólo una página
con el clásico fondo que "se desplaza" con el resto del documento.
24. ¿Es verdad que con las hojas de estilo puedo elegir entre que una imagen de fondo se repita al infinito y que aparezca sólo una vez? No exactamente. El atributo background-repeat permite que se repita la imagen de fondo, igual que sucede con el tag BODY de HTML. Puede tomar distintos valores: repeat (la imagen se repite en vertical y horizontal), repeat-x (repite la imagen sólo en horizontal), repeat-y (repite la imagen sólo en vertical):
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-y"> HTMLpoint es el sitio italiano con mayor autoridad y más visitado en la Web publishing. Decenas de tutoriales, cientos de Javascript, de applet Java, de demo para Dynamic HTML. </DIV>
25. ¿Qué diferencia hay entre posicionamiento absoluto y relativo?
El posicionamiento absoluto
permite abstraer el CSS del flujo de los datos, y permite colocarlo en
culquier punto de la página, de modo absolutamente independiente
respecto a los demás elementos, que pueden superponerse o someterse.
El posicionamiento relativo no sale del flujo de datos, ni
produce ninguna modificación respecto a los elementos colocados de modo
estático. Asume características propias del posicionamiento dinámico
cuando se incluyen las propiedades left y right, que apartan el elemento
hacia arriba a la izquierda respecto del que lo precede.
Ambos permiten a los reveladores ordenar con precisión los elementos en
el documento, superponerlos y, a través de los script, moverlos. De esta
manera, los webdesigner tienen sobre el documento un control parecido
al de muchos de los instrumentos que poseen los gráficos tradicionales.
26. ¿Puedo colocar de manera absoluta un applet Java? Todos los elementos, y por supuesto también applet Java, soportan el posicionamiento estático y relativo, pero sólo algunos el absoluto. Veamos cuáles:
27. ¿Cómo puedo elegir el aspecto del puntero del ratón? Ms Internet Explorer implementa de la versión 4 la propiedad CSS cursor para el control del puntero del ratón, cuando el usuario lo sitúa sobre un determinado elemento. Existen desde hace años punteros con las formas más variadas y fantasiosas para Windows, pero no es de esto de lo que se trata. La propiedad CSS cursor, efectivamente, no permite obtener cursores con formas distintas de las incluidas por defecto en el sistema, pero, al contrario, permite el intercambio y el control. La costumbre nos lleva a considerar obvio que cuando el puntero del ratón pasa sobre un enlace, la flecha se transforma en una mano. Del mismo modo que cuando una página Web se está cargando es normal que el puntero se transforme en clepsidra. Pues bien, esta hoja de estilo permite controlar todo esto, asignándole un puntero a cada evento de la página a nuestro gusto.
28. He visto en un sitio efectos de presentación para la entrada y la salida de la página. ¿Han sido realizados con las hojas de estilo? Las transiciones de página permiten visualizar efectos similares a algunos cambios de imagen televisivos. En otras palabras, la pagina convocada no se ve inmediatamente, sino precedida por efectos de diferente tipo, como fundidos y otras presentaciones.
29. He añadido efectos de transición a mi página dividida en marcos. He hecho todo lo que me habéis dicho, pero no funciona, ni siquiera con MsIe 4 o superior. ¿Por qué? Es imposible usar las transiciones en páginas divididas en marcos, o mejor dicho dentro de framesets concretos. Si, en efecto, la marca se incluye en el archivo principal del marco (el que construye y coloca los diferentes frameset), los efectos se producen, mientras que no sucede en cada uno de los frameset. La explicación de esto, que a primera vista podría aparecer como un bug, está en la constatación de que los efectos de transiciones se producen en toda la pantalla del navegador y no en una pequeña parte de ella (esto explica también por qué hemos tenido que enlazar las páginas de los ejemplos con un target "_parent" y no directamente en el presente marco).
30. ¿Puedo separar las letras de una palabra más
allá de la medida estándar? En otras palabras, ¿puedo elegir la
distancia horizontal de las letras de mi página?
¿Con las hojas de estilo se puede elegir la distancia entre un carácter y otro?
El atributo Letter-spacing establece la distancia entre cada una de las
letras dentro de las marcas que lo abren y lo cierran. Los valores se
expresan con la medida em. Se trata de una unidad de medida equivalente
al tamaño de la letra m, pero que se puede usar con decimales.
<DIV STYLE="font-family:arial; letter-spacing:1em"> HTMLpoint es el sitio italiano en Web publishing. </DIV>
31. ¿Puedo hacer que el texto de una página sea todo en mayúsculas o minúsculas? El
atributo text-transform permite manipular las minúsculas y las
mayúsculas del texto gracias a tres palabras clave:
uppercase convierte en mayúsculas todas las letras del elemento;
capitalize convierte en mayúscula sólo la primera letra de cada palabra;
lowercase convierte en minúsculas todas las letras del elemento.
Ésta es la sintaxis correcta que hay que adoptar (sustituir "uppercase" por las otras dos palabras clave):
<DIV STYLE="font-family:arial; text-transform:uppercase"> HTMLpoint - el sitio italiano en Web publishing </DIV>
32. ¿Cual es el sitio oficial de CSS? La página que podemos considerar cómo oficial es dónde se marca el estándar, la página del W3C, http://www.w3.org/Style/CSS/
33. ¿Puedo sustituir los puntos del elenco de una lista normal en HTML con imágenes creadas por mí? ¿Se pueden sustituir en los puntos visualizados por defecto de los navegadores los elencos con imágenes gif o jpg?
La propiedad list-style permite sustituir los puntos elenco estándar de
HTML con imágenes en formato GIF. Se pueden aplicar dichos puntos a todo
el elenco o sólo a una parte.
<style type="text/css">
UL { list-style-image:URL(punto.gif) }
</style>
En el ejemplo de código la imagen visualizada en lugar de los clásicos puntos negros es "punto.gif".
34. ¿Cómo puedo eliminar totalmente el subrayado de los enlaces? Internet
Explorer da la posibilidad de eliminar dicho sunrayado actuando sobre
las propiedades del navegador. Con las hojas de estilo los reveladores
tienen la posibilidad de eliminar del todo el subrayado a través de un
simple código que se incluye entre los marcadores BODY del documento:
<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>
35. ¿Cómo puedo eliminar el subrayado y hacer que reaparezca cuando el ratón toca el enlace? ¿Sólo puedes conseguir que los enlaces de una página adquieran el clásico subrayado cuando el ratón pasa por encima?
Es un efecto que se obtiene gracias a las propiedades de las hojas de
estilo y es muy fácil de realizar. Es suficiente incluir entre los tag
<HEAD> del documento el siguiente código:
<style type="text/css">
A:link, {A:visited text-decoration: none}
A:hover {text-decoration: underline}
</style>
Este efecto se obtiene con Ms Internet Explorer 4 o sucesivo, mientras
Netscape 4 se limita a no visualizar el subrayado ni cuando el enlace
está activo ni cuando está inactivo.
36. ¿Cómo hacer para que los enlaces cambien de color cuando pasa el ratón? A
través de la propiedad A:hover se puede crear un efecto mediante el
cual los enlaces tienen un color por defecto, que cambia cuando el ratón
pasa por encima. El color se puede programar como palabra clave (red,
green, blue etc.) o como triplete hexadecimal.
<style type="text/css">
A:hover { color: red; }
</style>
37. ¿Cómo hacer para que los enlaces cambien de tamaño cuando pase el ratón? Aquí ofrecemos el código que hay que hay que incluir entre los elementos <HEAD> de la página:
<style type="text/css">
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 16px }
</style>
38. ¿Puedo crear título sombreados con los CSS sin usar imágenes? Aprovechando
las propiedades del posicionamiento dinámico, podemos ahora exponer un
uso práctico de dicha tectonolgía. Crear títulos con efecto de sombreado
es posible en HTML clásico exclusivamente recurriendo a imágenes
(creadas con programas específicos de Webgráfica o fotoretoque).
Se crea un texto asignándole un estilo, un tamaño y una cierta posición absoluta en la página:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1"> HTMLpoint </DIV>Para el texto se ha usado el font impact de tamaño equivalente a 100 píxel y color negro, distanciado del margen izquierdo y superior de 10 pixel. La propiedad z-index está programada sobre el valor positivo 1. Hasta aquí, nada de particular, dado que se trata de un texto negro sin sombreado. Para incluir la sombra se tiene que añadir este código:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:15px; color:gray; z-index:-1"> HTMLpoint </DIV>El texto permanece con los mismos tamaño y estilo, pero cambia de color (del black precedente al grey actual). La distancia del estilo del margen superior e izquierdo aumenta respectivamente en 5 píxel y la propiedad z-index está programada sobre el valor negativo -1. Todo esto crea el primer texto superpuesto al segundo, que estando distanciado en 5 pixel, pero con la misma dimensión, crea un efecto sombreado.
39. ¿Cuál es la diferencia entre CSS1 y CSS2? Se
trata de dos estándares diferentes de referencia creados por W3C. Los
CSS2 han sustituido los CSS1 con nuevas características que han cambiado
en parte la estructura. Encontrarás la documentación oficial clicando
en estos enlaces:
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2/
40. ¿Qué es lo que no puedo hacer con los CSS?
41. ¿Tengo que encerrar siempre los nombres de la fuente entre comillas? No, no es siempre necesario. Lo es, sin embargo, si el nombre de las fuentes están compuestos por más términos, Por ejemplo la fuente "Comic sans" va entre comillas, mientras que por el contrario arial, al ser un término único puede ir sin ellas.
42. He visitado un sitio que usa css externos. ¿Cómo puedo ver el contenido? Tienes que visualizar el código y buscar, en el encabezamiento <HEAD> del documento, la siguiente línea de código:
<link rel=stylesheet href="style.css" type="text/css">En este caso, el archivo externo se llama "style.css" y está situado en la misma carpeta del documento. Si el URL de la página es www.htmlpoint.com/css, tendrás que incluir en la cadena de tu navegador el URL: www.htmlpoint.com/css/style.css . De esta manera habrás reconstruido el recorrido y aparecerá el CSS en una ventana de bloc de notas (o del programa asignado a la apertura de archivos txt).
43. ¿Dónde puedo comprobar si en la versión de mis CSS he usado la sintaxis correcta? Puedes descargar un validador en tu disco duro directamente del sitio oficial del W3C:
http://jigsaw.w3.org/css-validator/
o bien conectarte al W3C CSS Validation Service siguiendo este enlace:
http://jigsaw.w3.org/css-validator/validator-uri.html
44. He creado un sitio mío siguiendo las secomendaciones de W3C para las hojas de estilo. ¿Cómo puedo demostrárselo a quienes me visiten? Inserta donde se vea en la portada de tu Website el siguiente logotipo creado en W3C. Sitúa el ratón sobre la imagen y pulsando la tecla derecha de éste selecciona "salva imagen como". Además de la imagen incluye también el código HTML relativo:
<A HREF="http://www.w3.org/Style/CSS/"> <IMG SRC="img/logo_css.gif" BORDER=0 ALT="Este sitio soporta el estándar oficial para CSS del W3C"> </A>
45. ¿Ha llegado verdaderamente el momento de usar los CSS? ¿No arriesgo perder demasiados visitantes? Sin duda, ha llegado el momento de usar intensamente las hojas de estilo en nuestros sitios Web. Tras una espera de años, los CSS están preparados para convertirse en un estándar de referencia. El freno más potente para la difusión de esta tecnología, la presencia de navegadores obsoletos, la enriquece con la reducción del procenaje de uso de éstos. En este momento, el 90% de los internautas usa navegadores que soportan CSS. Al restante 10% sólo le queda adecuarse.
46. ¿Cómo puedo incluir una línea más marcada en una tabla usando CSS? Tienes que incluir el siguiente código:
<TR STYLE="border-bottom: thick solid black;">
47. ¿Cómo puedo cambiar el color de fondo de los enlaces cuando pasa el ratón? Este
efecto se realiza gracias a las propiedades de las hojas de estilo. El
código que sigue hay que incluirlo entre los tag <HEAD> del
documento:
<style type="text/css">
A:hover { color: white; background:blue }
</style>
Este efecto se obtiene cólo con Ms Internet Explorer 4 o sucesivo.
48. ¿Puedo establecer la distancia vertical entre una línea y otra de texto? ¿Con las hojas de estilo puedes establecer distancias diferentes entre una línea de texto y otra?
El atributo line-height define la distancia vertical entre las
diferentes líneas de texto. Los valores se expresan en porcentajes o en
unidades absolutas em. Tales valores son directamente proporcionales al
tamaño del texto (font-size). Por eso, en el ejemplo que sigue, siendo
el valor absoluto line-height programado sobre 2 y el texto en 14px, la
distancia será 28px (14px * 2em).
<DIV STYLE="font-family:arial; font-size:14px; width:400px; line-height: 2em"> HTMLpoint - Web publishing<br> HTMLpoint - il sito italiano sul Web publishing </DIV>