HTML10

Diseo de tipos con CSS.
1/18
Diseo de tipos con CSS

1. Introduccin La seleccin de tipos con hojas de estilo representa uno de los aspectos de diseo del HTML 4.0 ms fascinantes. As, en lugar de utilizar la etiqueta <FONT>, puede utilizar la propiedad de hoja de estilo font-family. A ella, puede aadir varios valores o puede utilizar clases y agrupamiento para aprovechar, al mximo, los tipos en la hoja de estilo. An ms, puede agregar una gran variedad de convenciones tipogrficas que mejoran, con mucho, al elemento FONT, proporcionndole nuevas opciones y resultados de diseo refinados. 2. Familias de fuente de hoja de estilo Las hojas de estilo reconocen cinco familias de fuente, tratando de abarcar los principales grupos de familia disponibles en tipografa. Las cinco familias de fuentes que distinguen las hojas de estilo estn contenidas en la siguiente tabla: Categora de fuente Serif Descripcin Las letras serif son aquellas que tienen trazos (serifas) en los extremos. Se dice que estos trazos mejoran la legibilidad; por ello, los estilos de letra serif suelen utilizarse mucho para los cuerpos de texto impresos. Algunos ejemplos de letras con serifa son Times, Garamond y Century Schoolbook. Estos estilos de letra suelen ser redondeados y no tienen serifas. Letras sans serif comunes son Helvetica, Arial, Avant garde y Verdana. Una letra script (o manuscrita) es la que se asemeja a la escritura a mano. Entre los estilos script estn Park Avenue y Lucida Handwriting. Estas letras recuerdan a las de las mquinas de escribir. Se les llama fuente monoespacio por que cada letra del estilo ocupa la misma anchura que cualquier otra. Por ejemplo, la letra w, que en la mayora de los estilos es ms ancha que la i, tiene la misma anchura que sta en las fuentes monoespacio. Courier es la fuente monoespacio ms comn y se encuentra en plataformas Windows y Macintosh. Conocidas por la mayor parte de los tipgrafos como fuentes decorativas, las fuentes disponibles en esta categora se utilizan, sobre todo, para cabeceras y texto artstico, no en cuerpo de texto. Dos fuentes decorativas son, entre otras, Whimsy y Party.
Sans Serif
Script
Monoespacio
Fantasa
Diseo de tipos con CSS. 2/18
Para aplicar una familia internamente, debe seguir una convencin igual que se haca con la etiqueta FONT. Se hace as en todos los estilos, ya sean internos, empotrados o vinculados. ste es un ejemplo interno: <P style="font-family: arial, helvetica, sans-serif"> En esta seleccin, el navegador buscar en el ordenador del usuario la fuente Arial. Si la encuentra, visualizar el texto con esa fuente. Si no la encuentra, buscar la fuente Helvetica. Si tampoco encuentra sta, el navegador visualizar el texto con la primera fuente sans-serif disponible. </P> En el siguiente listado se ha cogido este prrafo para aadirlo a una pgina HTML con otro texto que no tena aadida informacin de estilo o fuente: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo</TITLE> </HEAD> <BODY> <P> Este prrafo no tiene informacin aadida de fuente o estilo. Por tanto, depende del estilo de letra predeterminado en el navegador. Ver este prrafo visualizado en Times. </P> <P style="font-family: arial, helvetica, sans-serif"> En esta seleccin, el navegador buscar en el ordenador del usuario la fuente Arial. Si la encuentra, visualizar el texto con esa fuente. Si no la encuentra, buscar la fuente Helvetica. Si tampoco encuentra sta, el navegador visualizar el texto con la primera fuente sans-serif disponible. </P> </BODY> </HTML> En la figura siguiente se muestra la diferencia entre el primer prrafo, en el que el navegador tiene que adivinar que estilo de letra debe usar y el segundo prrafo, en el que el estilo de letra est controlado por STYLE:
3. Propiedades y valores de tipos Puede aplicar toda una batera de propiedades a estilos de letra utilizando hojas de estilo, adems, puede aplicar una gran seleccin de valores a esas propiedades. Nos centraremos aqu en las ms inmediatas y familiares, para que pueda empezar a utilizarlas en sus diseos. Del mismo modo que con las fuentes estndar de HTML, las propiedades se utilizan para controlar el tamao y el color. Sin embargo, con las hojas de estilo puede controlar tambin el peso y el estilo de una letra, adems de la altura de lnea, tambin conocida como espacio, que mide la distancia entre lneas individuales. Ms an, los mtodos disponibles para controlar el tamao de fuentes son muy especficos y mejoran mucho las opciones ofrecidas por el HTML anterior al estndar 4.0.
3.1. Cmo establecer el tamao de los tipos Para ajustar el tamao de los tipos se utiliza la propiedad font-size o propiedades agrupadas. El tamao de los tipos en hojas de estilo se puede establecer en puntos, pxeles, centmetros, pulgadas, milmetros y picas. Para los diseadores Web, la opcin ms natural es usar pxeles o puntos, aunque la eleccin siempre depende de las preferencias personales. Esto es un ejemplo de ajuste de estilo interno para establecer el tamao de las letras en puntos: <P style="font-family: garamond, times, serif; font-size: 24pt;"> "Lo ms bello que podemos experimentar es lo misterioso; Es la fuente de todo el
verdadero arte y la verdadera ciencia" <BR> -- Albert Einstein </P> La figura que aparece a continuacin muestra como se aplican el estilo de fuente y el tamao a esta cita:
En este ejemplo, se ha preparado una hoja de estilo que puede ser empotrada en una sola pgina o a la que se puede vincular cualquier pgina. Entonces, el estilo afecta a cualquier prrafo estndar de esa pgina: <STYLE> <!-P{ font-family: arial, helvetica, sans-serif; font-size: 14pt; } --> </STYLE> En la siguiente figura puede ver la hoja de estilo empotrada en funcionamiento. El texto, ahora, se escribe con la fuente Arial de 14 puntos:
3.2. Cmo aadir color Las hojas de estilo se apoyan en las tcnicas de color estndar de los navegadores. En otras palabras, tendr que utilizar colores hexadecimales para obtener los mejores resultados. Puede tambin aadir color, de la misma manera que el resto de las propiedades correspondientes a estilo, a cualquier etiqueta de HTML razonable, utilizando para ello estilo interno, empotrado o vinculado, mediante la propiedad color. Para aadir estilo de letra, tamao de tipo y color a una pgina de HTML, siga estos pasos: 1. Empiece con un esqueleto HTML. <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo</TITLE> </HEAD> <BODY> </BODY> </HTML> 2. Aada un prrafo de texto: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo</TITLE> </HEAD> <BODY> Un ser humano es una parte del todo que llamamos universo, una parte limitada en
el tiempo y en el espacio. Se percibe a s mismo, a sus pensamientos y sentimientos, como algo separado del resto, una especie de ilusin ptica de su conciencia. Esta ilusin es una especie de prisin para nosotros, que nos restringe a nuestros deseos personales y limita nuestro afecto a slo algunas personas cercanas. Nuestra tarea debe ser liberarnos de esta prisin ampliando nuestro crculo de compasin para acoger a todas las criaturas vivientes y a toda la naturaleza en su belleza. -- Albert Einstein </BODY> </HTML> 3. Agregue las etiquetas prrafo utilizando el estilo de apertura/cierre: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo</TITLE> </HEAD> <BODY> <P > Un ser humano es una parte del todo que llamamos universo, una parte limitada en el tiempo y en el espacio. Se percibe a s mismo, a sus pensamientos y sentimientos, como algo separado del resto, una especie de ilusin ptica de su conciencia. Esta ilusin es una especie de prisin para nosotros, que nos restringe a nuestros deseos personales y limita nuestro afecto a slo algunas personas cercanas. Nuestra tarea debe ser liberarnos de esta prisin ampliando nuestro crculo de compasin para acoger a todas las criaturas vivientes y a toda la naturaleza en su belleza. -- Albert Einstein </P> </BODY> </HTML> 4. A la etiqueta de apertura de prrafo, aada la propiedad font-family y sus valores asociados: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo</TITLE> </HEAD> <BODY> <P style="font-family: courier new, courier, monoespace; "> Un ser humano es una parte del todo que llamamos universo, una parte limitada en el tiempo y en el espacio. Se percibe a s mismo, a sus pensamientos y sentimientos, como algo separado del resto, una especie de ilusin ptica de su conciencia. Esta ilusin es una especie de prisin para nosotros, que nos restringe a nuestros deseos personales y limita nuestro afecto a slo algunas
personas cercanas. Nuestra tarea debe ser liberarnos de esta prisin ampliando nuestro crculo de compasin para acoger a todas las criaturas vivientes y a toda la naturaleza en su belleza. -- Albert Einstein </P> </BODY> </HTML> 5. Ponga el tamao en puntos: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo</TITLE> </HEAD> <BODY> <P style="font-family: courier new, courier, monoespace; font-size: 12pt;"> Un ser humano es una parte del todo que llamamos universo, una parte limitada en el tiempo y en el espacio. Se percibe a s mismo, a sus pensamientos y sentimientos, como algo separado del resto, una especie de ilusin ptica de su conciencia. Esta ilusin es una especie de prisin para nosotros, que nos restringe a nuestros deseos personales y limita nuestro afecto a slo algunas personas cercanas. Nuestra tarea debe ser liberarnos de esta prisin ampliando nuestro crculo de compasin para acoger a todas las criaturas vivientes y a toda la naturaleza en su belleza. -- Albert Einstein </P> </BODY> </HTML> 6. Elija un color hexadecimal e inserte, en la cadena, la propiedad color y su valor: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo</TITLE> </HEAD> <BODY> <P style="font-family: courier new, courier, monoespace; font-size: 12pt; color=#999999;"> Un ser humano es una parte del todo que llamamos universo, una parte limitada en el tiempo y en el espacio. Se percibe a s mismo, a sus pensamientos y sentimientos, como algo separado del resto, una especie de ilusin ptica de su conciencia. Esta ilusin es una especie de prisin para nosotros, que nos restringe a nuestros deseos personales y limita nuestro afecto a slo algunas personas cercanas. Nuestra tarea debe ser liberarnos de esta prisin ampliando nuestro crculo de compasin para acoger a todas las criaturas vivientes y a toda la naturaleza en su belleza.
<BR> -- Albert Einstein </P> </BODY> </HTML> 7. Guarde el archivo como style_color.html. 8. Vea el archivo en su navegador. Su prrafo debe aparecer en gris. Compare su resultado con la salida mostrada en la siguiente figura:
Estilo empotrado con FACE, SIZE y COLOR: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo: empotrada</TITLE> <STYLE> <!-P{
font-family: garamond, times, serif; font-size: 18pt; color: #CC9966; } --> </STYLE> </HEAD> <BODY> <P> Los investigadores del cerebro estiman que nuestra base de datos inconsciente supera a la consciente en un orden que excede diez millones a uno. Esta base de datos es la fuente de nuestra genialidad natural oculta. En otras palabras, una parte de nosotros es mucho ms lista que nosotros mismos. Los sabios suelen consultar a menudo a su parte ms lista. </P> <P> Los locos productivos son genios. Los locos ricos son excntricos. Los locos que no son ni productivos ni ricos simplemente estn locos. Los genios y los locos son gente que se encuentra en el medio de un profundo ocano; los genios nadan, los locos se hunden. La mayora de nosotros nos quedamos sentados tranquilamente en la seguridad de la orilla. Aproveche cualquier oportunidad y mjese los pies. </P> <P style=text-align: left"> -- Michael J. Gelb </P> </BODY> </HTML> La figura siguiente muestra el resultado:
3.3. Cmo aadir peso a los tipos
Peso se refiere a lo ancho o estrechos que sean los tipos. La letra Arial, por ejemplo, tiene variaciones en el peso por las que puede ser black (una letra muy pesada), bold, light, etc.
Dado que los estilos de letra tienen diferentes variaciones, a no ser que est absolutamente seguro de que los visitantes de su sitio van a disponer de un estilo de letra, generalmente deber aplicar un valor que est disponible para todos los estilos de letra que est utilizando. El valor ms general para los estilos de letra es negrita (bold). Por tanto, el propsito principal de la propiedad font-weight es poner en negrita un estilo de letra dado. He aqu un ejemplo de peso aplicado internamente: <P style="font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 14pt; color: #CCCCCC;"> "He estudiado las vidas de grandes hombres y famosas mujeres, y he descubierto que los hombres y mujeres que llegaron a lo ms alto fueron aquellos que llevaron a cabo las tareas que les correspondan, poniendo en ellas toda su
energa y entusiasmo". -- Harry S. Truman </P> Tambin puede aplicar peso a una hoja de estilo empotrada o vinculada. En el listado que aparece a continuacin, se ha aplicado negrita a la cabecera, pero se ha dejado el prrafo con el peso estndar: <HTML> <HEAD> <TITLE>ejemplo de hoja de estilo: empotrada</TITLE> <STYLE> <!-H1 { font-family: helvetica, arial, sans-serif; font-weight: bold; color: #CC9966; } P{ font-family: garamond, times, serif; color: #999999; } --> </STYLE> </HEAD> <BODY> <H1>Citas de Michael J. Gelb</H1> <P> "Los investigadores del cerebro estiman que nuestra base de datos inconsciente supera a la consciente en un orden que excede diez millones a uno. Esta base de datos es la fuente de nuestra genialidad natural oculta. En otras palabras, una parte de nosotros es mucho ms lista que nosotros mismos. Los sabios suelen consultar a menudo a su parte ms lista". </P> <P> "Los locos productivos son genios. Los locos ricos son excntricos. Los locos que no son ni productivos ni ricos simplemente estn locos. Los genios y los locos son gente que se encuentra en el medio de un profundo ocano; los genios nadan, los locos se hunden. La mayora de nosotros nos quedamos sentados tranquilamente en la seguridad de la orilla. Aproveche cualquier oportunidad y mjese los pies". </P> </BODY> </HTML>
La siguiente figura muestra el resultado:
3.4. Aplicacin de estilo de fuente En este contexto, estilo se refiere a la inclinacin de un estilo de letra dado. Hay dos estilos: oblicuo (oblique) y cursiva (italic). Igual que sucede con las variantes del peso, la opcin de letra oblicua se utiliza muy poco y debe aplicarse con precaucin. El estilo cursiva es mucho ms utilizado y est disponible en casi todos los estilos de letra. A continuacin, mostramos un ejemplo de estilo de fuente interno: <P style="font-family: garamond, times, serif; font-style: italic; font-size: 14pt; color: #999999;"> "He estudiado las vidas de grandes hombres y famosas mujeres, y he descubierto que los hombres y mujeres que llegaron a lo ms alto fueron aquellos que llevaron a cabo las tareas que les correspondan, poniendo en ellas toda su energa y entusiasmo". -- Harry S. Truman </P> En la figura que aparece a continuacin podemos observar este pasaje en Garamond de 14 puntos y cursiva:
3.5. Cmo ajustar el espacio El espacio es la separacin entre lneas individuales de texto. El espacio normal predeterminado suele coincidir con el tamao en puntos de la fuente. Por ejemplo, si utiliza tipos de 12 puntos, el espacio tendr un aspecto natural si tambin mide 12 puntos. Para poder controlar el espacio con hojas de estilo, se utiliza la propiedad line-height. Su valor es numrico y puede utilizar cualquier unidad de medida adecuada. En el listado siguiente podemos ver la altura correspondiente a la lnea normal predeterminada, seguida de un valor ms grande y, en el ltimo prrafo, de un valor ms pequeo: <HTML> <HEAD> <TITLE>Sueo de una noche de verano</TITLE> </HEAD> <BODY> <P style="font-family: courier new, courier, monoespace; font-size: 12pt; color: #999999;"> Hermosa me llamis? No volvis a decir eso de hermosa. Demetrio es quien, al amaros, ama a la hermosura! Vuestros ojos son estrellas polares, y el trino de vuestras voces Ofrece ms dulzura que el canto de la alondra, al odo del pastor, Cuando se hallan los trigos en cierne y asoman los capullos del espino! </P> <P style="font-family: courier new, courier, monoespace; font-size: 12pt; line-height: 18pt; color: #999999;"> Las enfermedades son contagiosas. Oh! Si lo fueran las gracias,
Se me pegaran las vuestras, hermosa Hermia, antes de partir. Mi odo adquirira vuestra voz; mis ojos, vuestros ojos; Mi lengua la suave meloda de la vuestra. </P> <P style="font-family: courier new, courier, monoespace; font-size: 12pt; line-height: 9pt; color: #999999;"> Fuera mo el mundo, y, Demetrio exceptuado, Dara todo lo dems por cambiarme con vos. Oh, enseadme cmo hechizis y con qu artes Dirigs los impulsos del corazn de Demetrio! </P> </BODY> </HTML> En la figura siguiente puede ver como afecta el espacio a cada prrafo:
3.6. Uso de decoracin de texto y fondo Debe conocer tambin otras opciones de tipos, como son: text-decoration: Esta propiedad resulta muy til cuando se quiere desactivar el subrayado de los vnculos dentro de un ancla o enlace. Para hacerlo, se aplica el valor none a esa propiedad. Tambin, se admiten los valores underline (subrayado), italic (cursiva) y line-through (tachado). background: Si quiere poner un color o una imagen como fondo del texto, puede hacerlo gracias a esta propiedad. Utilice un color hexadecimal o un URL; ste debe apuntar a una imagen de fondo. Esta opcin puede asignarse a toda la etiqueta BODY o a cualquier etiqueta o seccin de texto para resaltar un rea de la pgina.
El listado siguiente se corresponde a una pgina que demuestra la utilizacin de decoracin de texto y fondo: <HTML> <HEAD> <TITLE>Sueo de una noche de verano</TITLE> </HEAD> <BODY> <P style="font-family: courier new, courier, monoespace; font-size: 12pt; color: #999999;"> Hermosa me llamis? No volvis a decir eso de hermosa. <A href="demetrius.html" style="text-decoration: line-through;">Demetrio</A> es quien, al amaros, ama a la hermosura! Vuestros ojos son estrellas polares, y el trino de vuestras voces Ofrece ms dulzura que el canto de la alondra, al odo del pastor, Cuando se hallan los trigos en cierne y asoman los capullos del espino! Las enfermedades son contagiosas. Oh! Si lo fueran las gracias, Se me pegaran las vuestras, hermosa <A href="hermia.html" style="text-decoration: none">Hermia</A>, antes de partir. Mi odo adquirira vuestra voz; mis ojos, vuestros ojos; Mi lengua la suave meloda de la vuestra. </P> <P style="background: #000000; font-family: courier new, courier, monoespace; font-size: 12pt; color: #FFFFFF;"> Fuera mo el mundo, y, Demetrio exceptuado, Dara todo lo dems por cambiarme con vos. Oh, enseadme cmo hechizis y con qu artes Dirigs los impulsos del corazn de Demetrio! </P> </BODY> </HTML>
4. Identificacin de un elemento usando el atributo id Adems de agrupar elementos, podras necesitar identificar un elemento nico. Esto se hace con el atributo id. Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser nico. En cualquier otro caso, se debera usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id: <html> <head> <title>ejemplo de hoja de estilo</title> <style> <!-#c1-2, #c1-1 { color: red; } --> </style> </head>
Diseo de tipos con CSS. 17/18 <body> <h1 id="c1">Captulo 1</h1> <h2 id="c1-1">Captulo 1.1</h2> <h2 id="c1-2">Captulo 1.2</h2> <h1 id="c2">Captulo 2</h1> <h2 id="c2-1">Captulo 2.1</h2> <h3 id="c2-1-2">Captulo 2.1.2</h3> </body> </html> 5. Evolucin de la hoja de estilo A pesar del gran control de la tipografa que permiten las hojas de estilo, sigue teniendo que enfrentarse al problema de la interoperabilidad multinavegador. La triste realidad contina siendo que, si quiere atraer a la mayor cantidad de audiencia posible conservando su diseo, necesita crear pginas Web multinavegador. Sin embargo, si combina el elemento FONT con las hojas de estilo, puede crear pginas que tengan buen aspecto en los navegadores que no admitan estas ltimas. Otro tema es el siempre catico estado del World Wide Web Consortium (W3C). En el momento de escribir esto, la recomendacin de hoja de estilo est en el nivel CSS2. La ampliacin de la recomendacin aade mucha funcionalidad, pero no cambia de manera demasiado significativa los conceptos de CSS1. Sin embargo, XSL, que es el componente de hoja de estilo de XML, es otra historia. Este lenguaje de hoja de estilo tambin est en pleno desarrollo, aadiendo ms picante a la sopa del estilo.
El 12 de mayo de 1998, las Hojas de estilo en cascada versin II (CSS) se convirtieron en la recomendacin del W3C. A pesar de que se han cambiado pocas propiedades, tambin se han aadido muchas otras. stas incluyen colocacin avanzada y fuentes descargables. Esta caracterstica le ayudar a conseguir la personalidad que busca para su pgina sin necesidad de tener que utilizar el mtodo de apilamiento de fuentes en la hoja de estilo o bien en el elemento FONT. El XSL, o Lenguaje de estilo extensible, ha entrado en los planes de trabajo con los lenguajes del W3C. El XSL se utiliza en el XML para modificar el estilo dentro de las pginas XML. El plan de trabajo especfica que el XSL va a ser usado como apoyo de las CSS: las CSS afectan a los documentos HTML, creando una cadena de potentes opciones de estilo. Nota: para obtener ms informacin acerca de CSS2 y XSL, visite el World Wide Web Consortium en http://w3.org/style/.

HTML10

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML10

Încărcat de

Drepturi de autor:

Formate disponibile

Diseo de tipos con CSS.

Diseo de tipos con CSS

Diseo de tipos con CSS. 2/18

Diseo de tipos con CSS. 3/18

Diseo de tipos con CSS. 4/18

Diseo de tipos con CSS. 5/18

Diseo de tipos con CSS. 6/18

Diseo de tipos con CSS. 7/18

Diseo de tipos con CSS. 8/18

Diseo de tipos con CSS. 9/18

Diseo de tipos con CSS. 10/18

3.3. Cmo aadir peso a los tipos

Diseo de tipos con CSS. 11/18

Diseo de tipos con CSS. 12/18

La siguiente figura muestra el resultado:

Diseo de tipos con CSS. 13/18

Diseo de tipos con CSS. 14/18

Diseo de tipos con CSS. 15/18

Diseo de tipos con CSS. 16/18

Diseo de tipos con CSS. 18/18

S-ar putea să vă placă și