FAQ |
![]() |
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. 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. 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: 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: 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: 20. ¿Cómo puedo incluir un "punto y aparte" con las hojas de stilo? Los CSS2 soportan 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. 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? 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): 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. 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? 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, capitalize e lowercase. 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/ 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: 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? 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 exadecimal. 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: 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). 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: 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: 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: 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:
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: 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: 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 - il sito italiano sul Web publishing<br> HTMLpoint - il sito italiano sul Web publishing </DIV>
|