texto en css
DESCRIPTION
Una breve descripción de las propiedades de texto en CSSTRANSCRIPT
![Page 1: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/1.jpg)
CSS: Texto
CSS define muchas propiedades para modificar la apariencia del texto.
Aunque no dispone de tantas posibilidades y recursos como los programas especializados para crear documentos escritos, con CSS se pueden aplicar estilos complejos y variados al texto de las páginas web
![Page 2: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/2.jpg)
Color
El atributo más básico del texto es cambiar el color del mismo. Para ello utilizamos la siguiente sintaxis:
Color : <color> | inherit
Valor inicial: depende del navegador
Se aplica: a todos los elementos del div
Valores: rgb, rgb hexadecimal,palabra clave.
![Page 3: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/3.jpg)
Tipo de fuente
Se utiliza para indicar el tipo de letra con el que se presentará el texto.
Font-family: (<nombre_familia>|<familia_generica>)...| inherit
Valor inicial: depende del navegador
Se aplica: a todos los elementos
![Page 4: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/4.jpg)
Valores para nombre de familia (el tipo de letra)
Arial, Verdana, Garamond
Valores para familia generica (estilo del tipo de letra)
serif, sans-serif, cursive, fantasy y monospace
Para prevenir los casos en que el tipo de letra no esta en el equipo del usuario, se escriben varias alternativas separadas por una coma:
font-family:Georgia, "Times New Roman", Times, serif;
![Page 5: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/5.jpg)
Tamaño de letra
Se modifica el tamaño con la propiedad: Font-size:<tamaño> | inherit
Valor inical: medium
Se aplica: a todos los elementos
Valores: tamaño absoluto, relativo, por medida y porcentaje.
![Page 6: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/6.jpg)
Anchura de letra
Propiedad que modifica el grosor de la letra
Font-weight: <anchura> | inherit
Valor inicial: normal
Se aplica: a todos los elementos
Valores: palabra clave, valor numerico (100 - 900)
![Page 7: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/7.jpg)
Estilo de letra
Propiedad utilizada para variar el estilo de las letras
Font-style: <estilo> | inherit
Valor inicial: normal
Se aplica: a todos los elementos
Valores: normal, italic, oblique
![Page 8: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/8.jpg)
Estilo alternativo
Permite mostrar el texto con letra versal (mayusculas pequeñas)
Font-variant: <normal> | <small-caps> | inherit
Valor inicial: normal
Se aplica: a todos los elementos
![Page 9: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/9.jpg)
Shorthand: font
Permite indicar de forma directa las propiedades de tipografia de un texto
Font: <style> | <variant> | <weight> ? <size> |<line height> ? <tipo de letra>
Se aplica: a todos los elementos
Valores: los posibles para cada parametro, tipo de letra mediante palabras clave: icon, menu,caption, etc.
![Page 10: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/10.jpg)
Alineacion del texto
Esto se logra con la propiedad text-align
Text-align: <direccion> | inherit
Valor inicial: left
Se aplica: elementos de bloque y celdas de tabla
Valores: left, right,center, justify
![Page 11: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/11.jpg)
Interlineado
Controla la altura ocupada por cada linea de texto.
Line-height: <medida> | inherit
Valor inicial: normal
Se aplica: a todos los elementos
Valores: valor numerico, porcentaje, medida
![Page 12: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/12.jpg)
Decoraciones
Existe una propieda que permite decorar el texto (subrayar, parpadear, etc.)
Text-decoration: none | <decoracion> | inherit
Valor inicial: none
Se aplica: a todos los elementos
Valores: underline, overline, line-through, blink
![Page 13: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/13.jpg)
Transformacion del texto
La propiedad text-transform permite mostrar el texto original transformado en un texto completamente en mayúsculas, en minúsculas o con la primera letra de cada palabra en mayúscula
Text-transform: none | <transformacion> | inherit
Valor inicial: none
Se aplica: a todos los elementos
Valores: capitalize, uppercase, lowercase
![Page 14: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/14.jpg)
Alineacion vertical
Consiste en la alineación vertical de varios elementos diferentes, como imagenes y texto.
Vertical-align: <tipo de alineacion> | inherit
Valor inicial: baseline
Se aplica: Elementos en línea y celdas de tabla
Valores: baseline, sub,super, top, text-top, middle, bottom, text-bottom, porcentaje, medida
![Page 15: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/15.jpg)
![Page 16: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/16.jpg)
Tabulacion
CSS perimte controla la tabulacion para facilitar la lectura
Text-indent: <tamaño> | inherit
Valor inicial: 0
Se aplica: elementos de bloque y celdas de tabla
Valores: por medida o porcentaje
![Page 17: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/17.jpg)
Separaciones
Existen dos tipos de separaciones: entre letras y entre palabras.
Letter-spacing | Word-spacing: <tamaño> | inherit
Valor inicial: normal
Se aplica: a todos los elementos
Valores: normal o medida
![Page 18: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/18.jpg)
Espacios en blanco
La forma en que CSS controla el tratamiento de los espacios en blanco
White-space: <tratamiento> | inherit
Valor inicial: normal
Se aplica: a todos los elementos
Valores: normal, pre, nowrap, pre-wrap, pre-line
![Page 19: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/19.jpg)
![Page 20: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/20.jpg)
![Page 21: Texto en CSS](https://reader033.vdocuments.net/reader033/viewer/2022061112/545721a0af7959db738b8b65/html5/thumbnails/21.jpg)
Seudo elementos
En CSS existen dos seudo elementos:
First-line
First-letter
Permiten plicar estilos a ciertas partes de un texto. En concreto, CSS permite definir estilos especiales a la primera frase de un texto y a la primera letra de un texto.