He incluido efectos de
transición en 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é?
[respuesta]
¿Puedo distanciar las
letras de una palabra más allá de la medida
estándar? En otras palabras, ¿puedo elegir la
distancia en horizontal de las letras de mi página?
[respuesta]
¿Puedo hacer que el texto
de una página sea todo en mayúsculas o
minúsculas? [respuesta]
¿Cuál es el sitio
oficial de CSS? [respuesta]
¿Puedo sustituir los
puntos elenco de una lista normal en HTML con imágenes
creadas por mí? [respuesta]
¿Cómo puedo
eliminar totalmente el subrayado de los enlaces?
[respuesta]
¿Cómo puedo
eliminar el subrayado y después hacer que reaparezca
cuando el ratón toca el enlace?
[respuesta]
¿Cómo hacer para
que los enlaces cambien de color cuando pase el ratón?
[respuesta]
¿Cómo hacer para
que los enlaces cambien de tamaño cuando pase el
ratón? [respuesta]
¿Puedo crear
títulos sombreados con los CSS sin el uso de
imágenes? [respuesta]
¿Cuál es la
diferencia entre CSS1 y CSS2? [respuesta]
¿Qué es lo que no
puedo hacer con los CSS? [respuesta]
¿Tengo que poner siempre
los nombres de las fuentes entre comillas?
[respuesta]
He visitado un sitio que usa css
externos. ¿Qué hago para ver el contenido?
[respuesta]
¿Dónde puedo
comprobar si en la redacción de mis CSS he usado la
sintaxis correcta? [respuesta]
He creado mi sitio siguiendo las
recomendaciones del W3C para las hojas de estilo;
¿cómo puedo demostrárselo a mis
visitantes? [respuesta]
¿Ha llegado verdaderamente
el momento de usar los CSS? ¿No arriesgo perder
demsaidos visitantes? [respuesta]
¿Cómo puedo
añadir una línea más marcada en una
tabla usando los CSS? [respuesta]
¿Cómo puedo hacer
que cambie el color de fondo de los enlaces cuando pase el
ratón? [respuesta]
¿Puedo establecer la
distancia vertical entre una línea y otra del texto?
[respuesta]
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 TableTextarea
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
 Página anterior | Volver al principio del trabajo | Página siguiente  |