Manual de CSS (página 2)

SOLUCION 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:

• definir el estilo para el texto (negrita, cursiva, subrayado, etc.); definir los márgenes del documento; establecer el alineamiento del texto; definir el tipo, la posición y la repetibilidad del fondo; situar en un punto preciso de la página elementos textuales y de imagen; cambiar el aspecto al puntero del ratón; crear efectos de transición en entrada o salidad de página;

• dinamizar los enlaces de texto con cambios de color, subrayado y tamaño

La primera impresión es que las hojas de estilo, excepto algunas operaciones, producen efectos similares al código normal HTML. En realidad, no es así, porque los CSS tienen también otras peculiaridades:

• cambiando un solo archivo se cambia el aspecto de todas las páginas de un sitio;

• hace independientes los contenidos del formateado del documento

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:

• falta de soporte de los navegadores obsoletos (Netscape 3 y en parte MsIe 3); miedo a perder visitantes dados los dudosos efectos en los navegadores más antiguos; escasa innovación en términos estéticos; falta de soporte por parte de algunos editores HTML que, siempre y de todos modos, siguen utilizando el código HTML;

• escaso ascendente del W3C en los reveladores comunes, que no consigue imponer sus propios estándares;

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

del documento:

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:

Pasando a un ejemplo práctico, lo que sigue a continuación es un comentario a una hoja de estilo:

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:

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,

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:

Donde "fondo.gif" es la imagen de fondo del documento y bgproperties colocado en "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):

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:

• Applet Button Div Fieldset IFrame IMG Input Object Select Span Table

• Textarea

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.

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.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):

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.

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:

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

del documento el siguiente código:

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 exadecimal.

37. ¿Cómo hacer para que los enlaces cambien de tamaño cuando pase el ratón?

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:

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:

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-CSS1http://www.w3.org/TR/REC-CSS2/

40. ¿Qué es lo que no puedo hacer con los CSS?

• No puedes crear procedimientos automáticos tipo forum o mailing list; No puedes obtener efectos dinámicos; No puedes interactuar con el servidor; No puedes recoger datos de los visitantes;

• No puedes eliminar el desplazador de página;

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?

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:

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

del documento:

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).

Autor:

Tito Fernando Ale Nieto

INTRODUCCION AL DESARROLLO WEB

DOCENTE:

ING. TITO FERNANDO ALE NIETO