Aprenda los estándares web y siga los estándares web para el desarrollo y la producción. 52CSS.com ha estado discutiendo con usted muchos temas relacionados con el diseño, y el contenido principal presentado en la página son imágenes y texto. Hoy discutiremos con usted los problemas relacionados con el diseño de texto en el diseño de páginas web CSS.
Cómo configurar la fuente, el color, el tamaño, el espacio del párrafo, la letra capitular y la sangría de primera línea. Finalmente, hablaremos sobre algunos diseños chinos de uso común en páginas web, como el truncamiento de caracteres chinos, el ajuste de palabras de ancho fijo (ajuste de palabras y saltos de palabras), etc. Debido a que solo estoy escribiendo algunas experiencias de aplicaciones, si necesita una introducción completa a las propiedades de CSS y un estudio más profundo, puede consultar más tutoriales en 52CSS.com.
1. Configure la fuente, el color, el tamaño, etc. del texto usando la fuente, etc.
estilo de fuente establece cursiva, como estilo de fuente: cursiva;
peso de fuente establece el grosor del texto, como peso de fuente: negrita;
tamaño de fuente establece el tamaño del texto, como tamaño de fuente: 12 px (o 9 puntos, consulte el manual de CSS para problemas de visualización en diferentes unidades)
altura de línea establece el espaciado de línea, como altura de línea: 150%;
color establece el color del texto (nota, no el color de fuente), como color: rojo;
font-family establece la fuente, como font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif (este es un método de escritura común)
2. Diseño de párrafo: use margen, relleno y alineación de texto.
Los párrafos chinos usan la etiqueta <p> (u otros contenedores). Se puede usar margen o relleno para la izquierda y la derecha (equivalente a sangría) y el espacio en blanco antes y después del párrafo. Por ejemplo:
Código fuente de ejemplo [www.downcodes.com]
pags{
margen: 18px 6px 6px 18px;
/*Están arriba, derecha, abajo, izquierda, en el sentido de las agujas del reloj a partir de las doce*/
}
Utilice text-align para alinear el texto, por ejemplo:
Código fuente de ejemplo [www.downcodes.com]
pags{
alineación de texto: centro; /*alineación central*/
}
Los métodos de alineación incluyen izquierda, derecha y justificar (justificar ambos extremos)
Hay muchos principiantes que no están muy familiarizados con los márgenes y el relleno. Consulte la imagen a continuación para ver la representación.
3. Texto vertical: utilice el modo escritura.
El atributo del modo de escritura tiene dos valores, lr-tb y tb-rl. El primero es el predeterminado de izquierda a derecha, de arriba a abajo, y el segundo es de arriba a abajo, de derecha a izquierda.
Por ejemplo:
Código fuente de ejemplo [www.downcodes.com]
pags{
modo de escritura: tb-rl;
}
Se puede combinar con la composición tipográfica direccional.
4. Problema con viñetas: usar estilo de lista
Los símbolos de viñeta en CSS incluyen disco (punto sólido), círculo (círculo abierto), cuadrado (cuadrado sólido), decimal (números arábigos), romano inferior (números romanos en minúscula), romano superior (números romanos en mayúscula), alfa inferior. (letras minúsculas en inglés), alfa superior (letras en inglés mayúsculas), none (ninguno). Por ejemplo, establezca las viñetas de una lista (ul u ol) en cuadrados, como por ejemplo:
Código fuente de ejemplo [www.downcodes.com]
li{
estilo de lista: cuadrado;
}
Además, el estilo de lista también tiene algunos valores. Por ejemplo, puede usar algunas imágenes pequeñas como viñetas y simplemente escribir la URL ("dirección de la imagen") directamente debajo del estilo de lista. Pero 52CSS.com desaconseja firmemente este enfoque. Se recomienda configurar la imagen como fondo de li.
5. Efecto mayúscula
Pseudoobjeto: la primera letra se puede usar con tamaño de fuente y flotante para crear un efecto de letra capitular.
Por ejemplo:
Código fuente de ejemplo [www.downcodes.com]
p:primera letra{
relleno: 6px;
tamaño de fuente: 32 puntos;
flotador: izquierda;
}
6. Sangría de texto: utilice sangría de texto
sangría de texto puede sangrar la primera línea del contenedor en una determinada unidad. Por ejemplo, los párrafos chinos suelen tener dos caracteres chinos antes de cada párrafo. Se puede escribir así:
Código fuente de ejemplo [www.downcodes.com]
pags{
sangría de texto: 2em; /*em es una unidad relativa, 2em es el doble del tamaño de una palabra*/
}
Si el tamaño de fuente es 12 px, entonces text-indent: 2em tendrá una sangría de 24 px.
7. Truncamiento de caracteres chinos de ancho fijo: utilice desbordamiento de texto (muestra efecto de elipsis)
El idioma de fondo se puede utilizar para truncar el contenido del campo en la base de datos, por ejemplo, 12 caracteres chinos (usando puntos suspensivos después). Pero a veces es necesario filtrar etiquetas html, etc., pero usar CSS para controlar no tiene este problema. Por ejemplo, aplique el siguiente estilo a una lista:
Código fuente de ejemplo [www.downcodes.com]
li{
desbordamiento: oculto;
desbordamiento de texto: puntos suspensivos;
espacio en blanco:nowrap;
}
8. Salto de línea de caracteres chinos (palabras) de ancho fijo: utilice saltos de palabras
Por ejemplo, si desea mostrar muchos nombres de lugares (se supone que están separados por espacios) en un contenedor de ancho fijo, para evitar que los nombres de lugares se dividan en el medio (es decir, una palabra está arriba y otra palabra se divide en la siguiente línea). Entonces puedes usar saltos de palabras. Por ejemplo:
Código fuente de ejemplo [www.downcodes.com]
<div style="ancho:210px;alto: 200px;fondo: #ccc;word-break:keep-all">
Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai
</div>
Vale la pena señalar que los espacios interiores no se pueden reemplazar (debe haber al menos un espacio blando). .
9. Notación fonética china: uso de etiquetas Ruby y atributos Ruby-align
Por ejemplo, para <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby>, puedes usar ruby-align para establecer la alineación. Esto se ve en el manual de CSS. Puede consultar el elemento Ruby-align para obtener más detalles.