Apprenez les normes Web et suivez les normes Web pour le développement et la production. 52CSS.com a discuté avec vous de nombreux problèmes liés à la mise en page, et le contenu principal présenté sur la page est constitué d'images et de texte. Aujourd'hui, nous discuterons avec vous des problèmes liés à la mise en page du texte dans la mise en page Web CSS.
Comment définir la police, la couleur, la taille, l'espace de paragraphe, la lettrine et le retrait de la première ligne. Enfin, nous parlerons de certaines mises en page chinoises couramment utilisées sur les pages Web, telles que la troncature des caractères chinois, le retour à la ligne à la largeur fixe (retour à la ligne et saut de mot), etc. Parce que j'écris juste une expérience d'application, si vous avez besoin d'une introduction complète aux propriétés CSS et d'une étude plus approfondie, vous êtes invités à vous référer à d'autres didacticiels sur 52CSS.com.
1. Définissez la police, la couleur, la taille, etc. du texte à l'aide de la police, etc.
font-style définit l'italique, tel que font-style: italic;
font-weight définit l'épaisseur du texte, par exemple font-weight: bold;
font-size définit la taille du texte, par exemple font-size: 12px (ou 9pt, veuillez vous référer au manuel CSS pour les problèmes d'affichage dans différentes unités)
line-height définit l'espacement des lignes, tel que line-height : 150 % ;
color définit la couleur du texte (notez la couleur de la police), telle que color: red;
font-family définit la police, telle que font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif (il s'agit d'une méthode d'écriture courante) ;
2. Disposition des paragraphes : utilisez la marge, le remplissage et l'alignement du texte.
Les paragraphes chinois utilisent la balise
(ou d'autres conteneurs peuvent être utilisés pour la gauche et la droite (équivalent à l'indentation) et l'espace blanc avant et après le paragraphe. Par exemple:
Exemple de code source [www.downcodes.com]
p{
marge : 18px 6px 6px 18px ;
/*Ils sont en haut, à droite, en bas, à gauche, dans le sens des aiguilles d'une montre à partir de midi*/
}
Utilisez text-align pour l'alignement du texte, par exemple :
Exemple de code source [www.downcodes.com]
p{
text-align: center; /*alignement au centre*/
}
Les méthodes d'alignement incluent gauche, droite et justifier (justifier les deux extrémités)
De nombreux novices ne sont pas très familiers avec la marge et le remplissage. Voir l'image ci-dessous pour la représentation.
3. Texte vertical : utilisez le mode écriture.
L'attribut writing-mode a deux valeurs, lr-tb et tb-rl, la première est gauche-droite, haut-bas par défaut, et la seconde est haut-bas, droite-gauche.
Par exemple:
Exemple de code source [www.downcodes.com]
p{
mode d'écriture : tb-rl ;
}
Peut être combiné avec la composition de direction.
4. Problème de puce : utilisation du style liste
Les symboles de puce en CSS incluent le disque (point plein), le cercle (cercle ouvert), le carré (carré plein), le décimal (chiffres arabes), le romain inférieur (chiffres romains minuscules), le romain supérieur (chiffres romains majuscules), l'alpha inférieur. (lettres anglaises minuscules), alpha-majuscule (lettres anglaises majuscules), aucun (aucun). Par exemple, définissez les puces d'une liste (ul ou ol) sur des carrés, comme :
Exemple de code source [www.downcodes.com]
li{
style de liste : carré ;
}
De plus, le style de liste a également certaines valeurs. Par exemple, vous pouvez utiliser de petites images comme puces et écrire simplement l'URL ("adresse de l'image") directement sous le style de liste. Mais 52CSS.com déconseille fortement cette approche. Il est recommandé de définir l'image comme arrière-plan de li.
5. Effet lettrine
Pseudo-objet : la première lettre peut être utilisée avec font-size et float pour créer un effet de lettrine.
Par exemple:
Exemple de code source [www.downcodes.com]
p:première lettre{
remplissage : 6 px ;
taille de police : 32 pts ;
flotteur : gauche ;
}
6. Indentation du texte : utilisez text-indent
text-indent peut indenter la première ligne du conteneur d'une certaine unité. Par exemple, les paragraphes chinois comportent généralement deux caractères chinois avant chaque paragraphe. Cela peut s'écrire ainsi :
Exemple de code source [www.downcodes.com]
p{
text-indent : 2em ; /*em est une unité relative, 2em est deux fois la taille d'un mot*/
}
Si la taille de la police est de 12 px, alors text-indent: 2em sera indenté de 24 px.
7. Troncature de caractères chinois à largeur fixe : utilisez le débordement de texte (affichage de l'effet de points de suspension)
La langue d'arrière-plan peut être utilisée pour tronquer le contenu des champs dans la base de données, par exemple 12 caractères chinois (en utilisant ensuite des points de suspension). Mais parfois, il est nécessaire de filtrer les balises html, etc., mais utiliser CSS pour contrôler ne pose pas ce problème. Par exemple, appliquez le style suivant à une liste :
Exemple de code source [www.downcodes.com]
li{
débordement : caché ;
débordement de texte : points de suspension ;
espace blanc:nowrap;
}
8. Saut de ligne de caractère chinois (mot) à largeur fixe : utilisez le saut de mot
Par exemple, si vous souhaitez afficher plusieurs noms de lieux (supposés séparés par des espaces) dans un conteneur de largeur fixe, afin d'éviter que les noms de lieux ne soient cassés au milieu (c'est-à-dire qu'un mot est en haut et un autre mot est interrompu à la ligne suivante). Ensuite, vous pouvez utiliser le saut de mot. Par exemple:
Exemple de code source [www.downcodes.com]
9. Notation phonétique chinoise : utilisation de balises ruby et d'attributs ruby-align
Par exemple, pour Zhuyin, vous pouvez utiliser ruby-align pour définir l'alignement. Ceci est visible dans le manuel CSS. Vous pouvez vérifier l'élément Ruby-align pour plus de détails.