Haga clic aquí para volver a la columna del tutorial Wulin.com HTML. Si desea explorar el tutorial CSS, haga clic aquí.
Arriba: Diseño de marcado Idioma-CSS . Capítulo 13 Especifique un estilo para el texto
Creo que es una buena idea discutir la práctica de usar CSS para establecer estilos de texto en un capítulo. En términos generales, el procesamiento de contenido de texto es probablemente el lugar donde se usa más CSS, incluso para sitios web que no cumplen completamente con los estándares. Eliminar las etiquetas recurrentes en las páginas web fue una vez (y ahora) muy atractivas para los diseñadores, y no es difícil ver la gran ventaja de usar CSS para controlar la impresión de texto, es decir, separar aún más los métodos de contenido y visualización.
De muchos ejemplos anteriores, sabemos que CSS puede manejar muchas situaciones, y establecer estilos de texto es la forma más fácil de agregar elementos de diseño para las páginas web más básicas. Al mismo tiempo, agregar CSS al texto también puede evitar que agregemos imágenes innecesarias en la página.
En este capítulo, veremos cómo CSS lleva una pieza aburrida y ordinaria a otra altura (en nuevos colores, tamaños y fuentes). ¿Cómo hacer que el hipertexto se vea más genial?
Especificar los estilos de texto es uno de los mejores trabajos en los que CSS es bueno, incluso cuando se enfrentan a los navegadores que son ligeramente antiguos y admiten las funciones avanzadas de CSS incompletamente. En el pasado, los diseñadores y desarrolladores pueden querer crear páginas web que sean insoportables y difíciles de usar según los estándares actuales al diseñar textos para lograr el tamaño y los efectos audaces (¿alguna vez has visto páginas web donde los textos están representados principalmente por imágenes? Pero estás usando navegadores de texto ...)
Para proporcionarle algunas alternativas al uso de imágenes y responder a la pregunta anterior, en este capítulo, comenzará con un párrafo de texto que aún no se ha diseñado, y gradualmente le agregará varias reglas CSS, lo que lo convierte en un diseño convincente. Los tiempos siempre cambiantes
Comience mirando un texto que se procesará en la fuente preestablecida del navegador. En mi caso, la fuente preestablecida es de 16 píxeles. Use el navegador Safari en Mac OS X. Debido a esto, el texto que ve se representará de manera anti-alias. Si usa Windows XP e inicia ClearType, puede ver un efecto similar.
Los tiempos (o tiempos de variantes New Roman) son fuentes preestablecidas para muchos navegadores, sin embargo, esto es cambiado fácilmente por los usuarios a sus propias fuentes favoritas, por lo que ciertamente no puede confiar en este valor preestablecido.
La Figura 1301 muestra el contenido de texto que utilizamos en este capítulo que no se ha agregado con estilo: un título simple marcado con <h1>, y aquí hay tres consejos para la decoración del hogar.
Figura 13-1 El navegador muestra el título, y el efecto preestablecido del texto cambia la altura de la línea
Uno de los efectos de estilo de texto más simples y efectivos es el atributo de altura de línea. Agregar algo de espacio adicional entre cada línea de texto puede hacer que los párrafos de texto sean más fáciles de leer, más atractivos y también traer efectos maravillosos a su página.
Puede completar esta técnica agregando las siguientes reglas CSS a la etiqueta <cody>. Por supuesto, también puede agregar esta regla a otras etiquetas, como solo querer cambiar la altura de la línea de <p>.
cuerpo {
Línea de altura: 1.5em;
}
El significado de este código es: la altura de línea del texto en la página debe ser 1.5 veces la altura del texto. Me gusta usar unidades EM al especificar la altura de la línea, porque cambiarán con el tamaño de la fuente.
La figura 13-2 muestra el efecto después de agregar algodón de línea.
Figura 13-2 Efecto después del texto preestablecido más la altura de la línea
Se ve genial, y los resultados que puede lograr una pequeña altura de línea son sorprendentes.
Página anterior1 2 3 4 5 Página siguiente Lea el texto completo