Texto en CSS

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

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.

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

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;

Tamaño de letra

Se modifica el tamaño con la propiedad: Font-size:<tamaño> | inherit

Valor inical: medium


Valores: tamaño absoluto, relativo, por medida y porcentaje.

Anchura de letra

Propiedad que modifica el grosor de la letra

Font-weight: <anchura> | inherit

Valor inicial: normal


Valores: palabra clave, valor numerico (100 - 900)

Estilo de letra

Propiedad utilizada para variar el estilo de las letras

Font-style: <estilo> | inherit



Valores: normal, italic, oblique

Estilo alternativo

Permite mostrar el texto con letra versal (mayusculas pequeñas)

Font-variant: <normal> | <small-caps> | inherit



Shorthand: font

Permite indicar de forma directa las propiedades de tipografia de un texto

Font: <style> | <variant> | <weight> ? <size> |<line height> ? <tipo de letra>


Valores: los posibles para cada parametro, tipo de letra mediante palabras clave: icon, menu,caption, etc.

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

Interlineado

Controla la altura ocupada por cada linea de texto.

Line-height: <medida> | inherit



Valores: valor numerico, porcentaje, medida

Decoraciones

Existe una propieda que permite decorar el texto (subrayar, parpadear, etc.)

Text-decoration: none | <decoracion> | inherit

Valor inicial: none


Valores: underline, overline, line-through, blink

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


Valores: capitalize, uppercase, lowercase

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

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

Separaciones

Existen dos tipos de separaciones: entre letras y entre palabras.

Letter-spacing | Word-spacing: <tamaño> | inherit



Valores: normal o medida

Espacios en blanco

La forma en que CSS controla el tratamiento de los espacios en blanco

White-space: <tratamiento> | inherit



Valores: normal, pre, nowrap, pre-wrap, pre-line

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.

Texto en CSS

Education

Transcript of Texto en CSS