Texto en CSS
Descargar como PPT, PDF0 recomendaciones510 vistas
CSS permite modificar diversas propiedades del texto en las páginas web, como el color, tipo y tamaño de fuente, anchura, estilo, alineación, interlineado, decoraciones, transformaciones, tabulación y espaciado. Algunas propiedades clave incluyen font, text-align, line-height y text-decoration. CSS también incluye seudoelementos como first-line y first-letter para aplicar estilos específicos a la primera línea y letra de un texto.
Texto en CSS
- 1. 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
- 2. 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.
- 3. 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
- 4. 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;
- 5. 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.
- 6. 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)
- 7. 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
- 8. 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
- 9. 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.
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 16. 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
- 17. 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
- 18. 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
- 21. 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.