Sangria Y Texto En Php
Enviado por artemiotemo • 14 de Mayo de 2013 • 1.802 Palabras (8 Páginas) • 1.649 Visitas
Lección 5: Texto
Formatear y añadir estilo al texto es un tema clave para cualquier diseñador web. En esta lección presentaremos las increíbles oportunidades que ofrece CSS a la hora de añadir presentación al texto. Describiremos las siguientes propiedades:
• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform
Sangría del texto [text-indent]
La propiedad text-indent permite añadir un toque de elegancia a los párrafos de texto al aplicar sangría a la primera línea de dicho párrafo. En el ejemplo siguiente se ha aplicado una sangía de 30px a todos los párrafos de texto marcados con la etiqueta <p>:
p {
text-indent: 30px;
}
• Ver ejemplo
Alineación del texto [text-align]
La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son:left(texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineación centrada). Además, el valor justify(alineación justificada) alargará cada línea de forma que los márgenes izquierdo y derecho estén justificados. Esta tipo de presentación la habrás visto, por ejemplo, en periódicos y revistas.
En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la derecha, mientras que los datos de la tabla, <td>, aparecen centrados. Además, los párrafos de texto normales están justificados:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
• Ver ejemplo
Decoración del texto [text-decoration]
La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el elemento <h1>aparecerá subrayado, el elemento <h2> aparecerá con un subrayado por encima del texto y el elemento <h3> tendrá el texto tachado.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
• Ver ejemplo
Espaciado entre caracteres [letter-spacing]
El espaciado entre los caracteres de texto se puede especificar usando la propiedad letter-spacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de 3px entre los caracteres de un párrafo de texto <p> y6px entre los caracteres de los encabezados <h1>, usaríamos el siguiente código:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
• Ver ejemplo
Transformación del texto [text-transform]
La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir entre los valorescapitalize, uppercase olowercase, sin importar cómo aparece el texto original en el código HTML.
Un ejemplo podría ser la palabra "título" que se puede presentar al usuario como "TÍTULO" o "Título". A continuación ofrecemos una explicación de los valores de la propiedadtext-transform mencionados en el párrafo anterior:
capitalize
Pone en mayúscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecerá como "John Doe".
uppercase
Convierte todas las letras a mayúscula. Por ejemplo, "john doe" aparecerá como "JOHN DOE".
lowercase
Convierte todas las letras a minúscula. Por ejemplo, "JOHN DOE" aparecerá como "john doe".
none
No se realiza transformación alguna; el texto se presenta tal como aparece en el cógido HTML.
Como ejemplo, usaremos una lista de nombres. Todos los nombres están marcados con la etiqueta <li> (de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayúscula y los títulos con todos los caracteres en mayúscula.
Échale un vistazo al código fuente del ejemplo y verás que el texto aparece realmente en minúscula.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
• Ver ejemplo
Resumen
En las tres últimas lecciones has aprendido varias propiedades CSS, pero todavía te queda mucho más que aprender de CSS. En la lección siguienteexaminaremos los enlaces.
<link rel="stylesheet" href="/tutorials/css/lesson5_ex1.css" type="text/css" media="all" />checar mi practika de css
TEXTO EN EL LIBRO WEB XHTML
6.2. Texto
Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto. Estas propiedades adicionales permiten controlar al alineación del texto, el interlineado, la separación entre palabras, etc.
La propiedad que define la alineación del texto se denomina text-align.
Propiedad text-align
Valores left | right | center | justify | inherit
Se aplica a Elementos de bloque y celdas de tabla
Valor inicial left
Descripción Establece la alineación del contenido del elemento
Los valores definidos por CSS permiten alinear el texto según los valores tradicionales: a la izquierda (left), a la derecha (right), centrado (center) y justificado (justify).
La siguiente imagen muestra el efecto de establecer el valor left, right, center y justifyrespectivamente a cada uno de los párrafos de la página.
Figura 6.5 Ejemplo de propiedad text-align
La propiedad text-align no sólo alinea el texto que contiene un elemento, sino que también alinea todos sus contenidos, como por ejemplo las imágenes.
El interlineado de un texto se controla mediante la propiedad line-height, que permite controlar la altura ocupada por cada línea de texto:
Propiedad line-height
Valores normal | numero | unidad de medida | porcentaje | inherit
Se aplica a Todos los elementos
Valor inicial normal
Descripción Permite establecer la altura de línea de los elementos
Además de
...