Codificación aprenderaprogramar.com: CU01042D
MÁS CONTROL DEL TEXTO CSS
Continuamos repasando propiedades que resultan de interés para darle formato a textos como text-transform, que nos permitirá entre otras posibilidades transfomar un texto a mayúsculas o minúsculas.Además veremos como word-spacing y letter-spacing nos permiten variar el espacio de separación entre palabras o letras y word-wrap nos permitirá romper palabras largas que no caben en su contenedor y no tienen espacios intermedios que permitan crear saltos de línea.
PROPIEDAD TEXT-TRANSFORM
| PROPIEDAD CSS text-transform | |
| Función de la propiedad | Permite transformar la apariencia de un texto. |
| Valor por defecto | none |
| Aplicable a | Todos los elementos |
| Valores posibles para esta propiedad | none (no hay transformación del texto) |
| uppercase (transforma el texto a mayúsculas) | |
| lowercase (transforma el texto a minúsculas) | |
| capitalize (convierte la primera letra de cada palabra en mayúsculas) | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com | #content1 {text-transform: uppercase;} |
Supongamos que tenemos el texto: “La mejor web para APRENDER a programar”. Los efectos serían:
uppercase: LA MEJORA WEB PARA APRENDER A PROGRAMAR
lowercase: la mejor web para aprender a programar
capitalize: La Mejor Web Para Aprender A Programar
Recordar que hay un selector que nos permite definir estilos para la primera letra de texto de un párrafo o contenedor que es first-letter. Podemos combinar este selector con text-transform para poner la primera letra en un formato especial. Por ejemplo p::first-letter {font-size: 300%; text-transform: uppercase;} nos permite poner la primera letra en mayúsculas y con un formato extragrande.
PROPIEDADES LETTER-SPACING Y WORD-SPACING
Se trata de dos propiedades de uso no habitual que permiten establecer una separación entre letras específica o una separación entre palabras específica.
Su valor por defecto es normal y se establecen indicando una unidad de medida válida en CSS como valores en píxeles o en em.
Ejemplos: content1 { letter-spacing: 9px;}
#jukBox { word-spacing: 1.3em;}
Se admiten valores negativos, pero en algunos casos pueden generar efectos extraños indeseados (por ejemplo superposición de palabras o letras unas encima de otras).
PROPIEDAD WORD-WRAP
Ya sabemos que a no ser que hayamos especificado lo contrario con la propiedad white-space, las palabras aprovecharán espacios en blanco para situarse en una nueva línea cuando el espacio a lo ancho es insuficiente en el contenedor. No obstante, existe el problema de que una palabra puede ser tan larga que ocupe todo el ancho disponible y se salga del contenedor sin posibilidad de crear una nueva línea por la falta de espacios en blanco (esto se podría denominar “palabra irrompible”). Usando la propiedad word-wrap cuyo valor por defecto es normal y cuyo único valor posible es break-word podemos especificar que la palabra deberá continuar en una nueva línea incluso cuando no exista un espacio en blanco para generar el salto de línea.
Crea un documento HTML con este contenido para probar esta propiedad y visualiza los resultados:
|
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial; } h1 {margin: 20px; padding:10px 20px; border-style: solid; border-color: red; border-width: thin;} </style> </head> <body> <h1 style="width:210px; background-color:yellow;">aprenderaprogramar.com</h1> <h1 style="width:210px; background-color:yellow; word-wrap: break-word;">aprenderaprogramar.com</h1> </body> </html> |
EJERCICIO
Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:
a) Deben exisitir tres contenedores (div1, div2 y div3) situados en horizontal, cada uno con margin 33px en todas direcciones, sin relleno, ancho de 180 píxeles, altura de 300 píxeles y borde sólido de 6 píxeles de anchura con color de borde rojo.
b) El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 5% superior a lo normal. La primera letra de cada párrafo debe tener un tamaño un 250% lo normal.
c) El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a minúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.
d) El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse para que toda palabra comience con una letra mayúscula mediante el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.
Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
