Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Esta es la sección séptima del tutorial CSS Introducción ; da más ejemplos de estilos de texto.Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.
Los estilos de texto: Información
CSS tiene varias propiedades de estilo de texto .
Hay una propiedad abreviada conveniente, la fuente , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:
- Negrita, cursiva, y small-caps (versalita)
- El tamaño
- La altura de la línea
- El tipo de letra
p { fuente : cursiva 75% / 125% "Comic Sans MS" , cursive ; }Esta regla establece varias propiedades de la fuente, poniendo todos los párrafos en italic.
El tamaño de fuente se establece en tres cuartas partes del tamaño en cada párrafo del elemento padre, y el interlíneado se establece en 125% (un poco más separados de lo normal).
El tipo de letra se establece en Comic Sans MS, pero si este tipo de letra no está disponible, el navegador utilizará por defecto tipografía cursiva (hand-written).
La regla tiene el efecto colateral de desactivar las versalitas y negritas (estableciendo su valor en normal):
Tipos de fuentes
No se puede predecir qué tipografías tienen los lectores de nuestro documento . Así que cuando se especifica llos tipos de fuentes de las letras, es buena idea darle una lista alternativa en orden de preferencia.
Finalice la lista con uno de los las tipografías por defecto: serif, sans-serif, cursive, fantasy or monospace.
Si el tipo de letra no es compatible con alguna de los caracteres del documento, el navegador puede sustituirlos por una tipografía diferente. Por ejemplo, el documento puede contener caracteres especiales que el tipo de letra no admite. Si el navegador puede encontrar otro tipografía que tiene esos caracteres, entonces usará otro tipo de fuente
Para especificar un tipo de letra por sí misma, utilizar el font-family propiedad.
Los tamaños de la fuente
Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.
Puede utilizar algunos valores incorporados para tamaños de fuentes, like small, medium and large (pequeñas, medianas y grandes) . También puede utilizar valores relativos al tamaño de fuente del elemento padre, like: smaller, larger, 150% or 1.5em. ( más pequeño, más grande, 150% o 1.5em.). Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); así 1.5em es una vez y media el tamaño de la fuente del elemento padre.
Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora. Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.
Para especificar un tamaño de fuente por su cuenta, utilice el font-size propiedad.
Altura de línea
El interlíneado especifica el espacio entre líneas. Si el documento tiene párrafos largos con muchas líneas, una separación más grande de lo normal, hace que sea más fácil de leer, especialmente si el tamaño de la letra es pequeña.
Para especificar una altura de línea por su cuenta, utilice la propiedad line-height .
Decoración
La propiedad independiente text-decoration puede especificar otros estilos, como el subrayado o tachado. Usted puede establecerlo en ninguno ( none ) para eliminar expresamente cualquier decoración.
Otras propiedades
Para especificar cursiva por su cuenta, use font-style : italic;
Para especificar audaz por su cuenta, use font-weight : bold;
Para especificar los pequeños capitales en su propio, el uso font-variant : small-caps;
Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como normal o inherit.
Puede especificar estilos de texto de diversas maneras.
Por ejemplo, algunas de las propiedades mencionadas aquí tienen otros valores que se pueden utilizar.
En una hoja de estilo compleja, evite utilizar la propiedad font shorthand, debido a sus efectos secundarios (resetean otras propiedades individuales).
Para obtener mas detalles de las propiedades que se relacionan con las fuentes, ver las especificaciónes CSS , Fonts,. Si desea más detalles sobre la decoración de texto, ver Text .
Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar @ font-face para especificar una fuente en línea. Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.
Acción: Especificaciónes de las fuentes
Para un simple documento, puede establecer la fuente del elemento <body> y el resto del documento hereda la configuración.
- Edite su archivo CSS.
- Agregue la siguiente regla para cambiar el tipo de letra en todo el documento. La parte superior del archivo CSS es el lugar lógico para esto, pero no tiene los mismos efectos donde usted lo ponga:
body {font: 16px "Comic Sans MS", cursive;} - Añada un comentario que explique la regla, y agregue un espacio en blanco para que coincida con su diseño preferido.
- Guarde el archivo y actualice el explorador para ver el efecto. Si su sistema tiene Comic Sans MS, u otra fuente cursiva que no soporta italic, su navegador eligira un tipo de letra diferente para la primera línea del texto en italic:
Cascading Style Sheets Cascading Style Sheets - Desde la barra de menú de su navegador, elija Ver> Tamaño del texto> Aumentar (o Ver> Zoom> Acercar ). A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.
Sin modificar nada más, hacer las seis letras iniciales dos veces el tamaño de letra serif por defecto del navegador:
| Cascading Style Sheets |
| Cascading Style Sheets |
Add the following style declaration to the strong rule:
font: 200% serif;If you use separate declarations for
font-size and font-family, then the font-style setting on the first paragraph is not overridden.
Hide solution
¿Y ahora qué?
El documento muestra ya utiliza varios colores con nombre. La siguiente sección enumera los nombres de los colores estándar y se explica cómo se puede especificar otros .