Aprenda os padrões da web e siga os padrões da web para desenvolvimento e produção. 52CSS.com tem discutido com você muitas questões relacionadas ao layout, e o conteúdo principal apresentado na página são imagens e texto. Hoje discutiremos com você as questões relacionadas ao layout de texto no layout de página da web CSS.
Como definir fonte, cor, tamanho, espaço de parágrafo, capitulação e recuo da primeira linha. Por fim, falaremos sobre alguns layouts chineses comumente usados em páginas da web, como truncamento de caracteres chineses, quebra automática de palavras com largura fixa (quebra de palavras e quebra de palavras), etc. Como estou apenas escrevendo algumas experiências com aplicativos, se você precisar de uma introdução completa às propriedades CSS e de um estudo mais aprofundado, consulte mais tutoriais em 52CSS.com.
1. Defina a fonte, cor, tamanho do texto, etc.
font-style define itálico, como font-style: italic;
font-weight define a espessura do texto, como font-weight: negrito;
font-size define o tamanho do texto, como font-size: 12px (ou 9pt, consulte o manual CSS para problemas de exibição em diferentes unidades)
line-height define o espaçamento entre linhas, como line-height: 150%;
color define a cor do texto (observe que não é a cor da fonte), como color: red;
font-family define a fonte, como font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif (este é um método de escrita comum);
2. Layout do parágrafo: use margem, preenchimento e alinhamento de texto.
Os parágrafos chineses usam a tag <p> (ou outros contêineres). Margem ou preenchimento podem ser usados para a esquerda e para a direita (equivalente ao recuo) e o espaço em branco antes e depois do parágrafo. por exemplo:
Exemplo de código-fonte [www.downcodes.com]
p{
margem: 18px 6px 6px 18px;
/*Eles estão para cima, para a direita, para baixo, para a esquerda, no sentido horário começando às doze horas*/
}
Use text-align para alinhamento de texto, por exemplo:
Exemplo de código-fonte [www.downcodes.com]
p{
alinhamento de texto: centro; /*alinhamento central*/
}
Os métodos de alinhamento incluem esquerda, direita e justificar (justificar ambas as extremidades)
Existem muitos novatos que não estão muito familiarizados com margem e preenchimento. Veja a imagem abaixo para ver a representação.
3. Texto vertical: use o modo de escrita.
O atributo modo de escrita tem dois valores, lr-tb e tb-rl. O primeiro é o padrão esquerda-direita, superior-inferior, e o último é superior-inferior, direita-esquerda.
por exemplo:
Exemplo de código-fonte [www.downcodes.com]
p{
modo de escrita: tb-rl;
}
Pode ser combinado com composição tipográfica de direção.
4. Problema com marcadores: usando estilo de lista
Os símbolos de marcador em CSS incluem disco (ponto sólido), círculo (círculo aberto), quadrado (quadrado sólido), decimal (algarismos arábicos), romano minúsculo (algarismos romanos minúsculos), romano superior (algarismos romanos maiúsculos), alfa inferior (letras inglesas minúsculas), alfa maiúsculo (letras inglesas maiúsculas), nenhum (nenhuma). Por exemplo, defina os marcadores de uma lista (ul ou ol) como quadrados, como:
Exemplo de código-fonte [www.downcodes.com]
li{
estilo de lista: quadrado;
}
Além disso, o estilo de lista também possui alguns valores. Por exemplo, você pode usar algumas imagens pequenas como marcadores e apenas escrever o URL ("endereço da imagem") diretamente no estilo de lista. Mas 52CSS.com desencoraja fortemente esta abordagem. É recomendado que você defina a imagem como plano de fundo de li.
5. Efeito capitular
Pseudo objeto: a primeira letra pode ser usada com font-size e float para criar um efeito de capitulação.
por exemplo:
Exemplo de código-fonte [www.downcodes.com]
p:primeira letra{
preenchimento: 6px;
tamanho da fonte: 32pt;
flutuar: esquerda;
}
6. Recuo de texto: use recuo de texto
text-indent pode recuar a primeira linha no contêiner em uma determinada unidade. Por exemplo, os parágrafos chineses geralmente têm dois caracteres chineses antes de cada parágrafo. Pode ser escrito assim:
Exemplo de código-fonte [www.downcodes.com]
p{
text-indent: 2em; /*em é uma unidade relativa, 2em é o dobro do tamanho de uma palavra*/
}
Se o tamanho da fonte for 12px, então text-indent: 2em será recuado em 24px.
7. Truncamento de caracteres chineses de largura fixa: use overflow de texto (efeito de reticências de exibição)
O idioma de fundo pode ser usado para truncar o conteúdo do campo no banco de dados, por exemplo, 12 caracteres chineses (usando reticências posteriormente). Mas as vezes é necessário filtrar tags html, etc, mas usar CSS para controlar não tem esse problema. Por exemplo, aplique o seguinte estilo a uma lista:
Exemplo de código-fonte [www.downcodes.com]
li{
estouro: oculto;
estouro de texto: reticências;
espaço em branco:nowrap;
}
8. Quebra de linha de caracteres chineses (palavra) de largura fixa: use quebra de palavra
Por exemplo, se você quiser exibir muitos nomes de lugares (supostamente separados por espaços) em um contêiner de largura fixa, para evitar que os nomes dos lugares sejam quebrados no meio (ou seja, uma palavra está no topo e outra palavra é quebrado para a próxima linha). Então você pode usar a quebra de palavras. por exemplo:
Exemplo de código-fonte [www.downcodes.com]
<div style="largura:210px;altura: 200px;fundo: #ccc;quebra de palavra:keep-all">
Nanjing Xangai Xangai Nanjing Xangai Nanjing Xangai Xangai Nanjing Xangai Xangai Nanjing Xangai Xangai Nanjing Xangai Nanjing Xangai Nanjing Xangai Nanjing Xangai Nanjing Xangai Nanjing Xangai Nanjing Xangai Xangai Nanjing Xangai Xangai
</div>
Vale ressaltar que os espaços internos não podem ser substituídos (deve haver pelo menos um soft space). .
9. Notação fonética chinesa: usando tags Ruby e atributos Ruby-align
Por exemplo, para <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby>, você pode usar ruby-align para definir o alinhamento. Isso é visto no manual CSS. Você pode verificar o item ruby-align para obter detalhes.