Explication détaillée des propriétés liées à la mise en page du texte couramment utilisées dans la mise en page CSS

Cet article vous apporte une explication détaillée des attributs liés à la mise en page du texte couramment utilisés dans la mise en page CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Explication détaillée des attributs liés à la mise en page du texte couramment utilisés dans la mise en page CSS

1 Utilisez la police, etc. pour définir la police, la couleur, la taille du texte, etc.

font-style définit l'italique, tel que font-style: italic;

font-weight définit l'épaisseur du texte, telle que font-weight: bold;

font-size Définissez la taille du texte, par exemple font-size : 12px ; (ou 9pt, reportez-vous au manuel CSS pour les différents problèmes d'affichage des unités)

line-height Définissez l'espacement des lignes, par exemple, line-height : 150 % ;

color définit la couleur du texte (notez que font-color), telle que color: red;

font-family définit la police, telle que font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, style Song, sans empattement (c'est la méthode d'écriture courante)

2. Formatage 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 sur les côtés gauche et droit (équivalent à l'indentation) et l'espace blanc avant et après le paragraphe. Par exemple :

Exemple de code

p{
margin: 18px 6px 6px 18px;
/*分别是上、右、下、左，十二点开始的顺时针方向*/
}

L'alignement du texte est text-align, par exemple :

Exemple de code

p{
text-align: center; /*居中对齐*/
}

L'alignement est Il y a aussi gauche, droite et justifier (justifiez les deux extrémités)

3. Texte vertical : utilisez le mode écriture.

L'attribut writing-mode a deux valeurs : lr-tb et tb-rl. Le premier est gauche-droite, haut-bas par défaut, et le second est haut-bas, droite-gauche.

Par exemple :

Un exemple de code

p{
writing-mode: tb-rl;
}

peut être combiné avec la composition de direction.

4. Problèmes avec les puces : utilisez le style de liste

En CSS, les puces incluent un disque (point plein), un cercle (cercle vide), un carré (carré plein), un décimal (chiffres arabes) , romain inférieur (chiffres romains minuscules), romain supérieur (chiffres romains majuscules), alphabétique inférieur (lettres anglaises minuscules), alphabétique supérieure (lettres anglaises majuscules), aucun (aucun). Par exemple, définissez les puces d'une liste (ul ou ol) sur des carrés, tels que :

Exemple de code

li{
list-style: square;
}

De plus, list-style a également certaines valeurs, par exemple , vous pouvez utiliser quelques petites images. Comme puce, écrivez simplement l'url ("adresse de l'image") directement sous le style de liste. Mais Mb5u.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 combinée avec la taille de la police et le flotteur peut créer un effet de lettrine.

Par exemple :

Exemple de code

p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}

6. Retrait du texte : utilisez text-indent

text-indent peut créer la première ligne dans le conteneur indente d'une certaine unité. Par exemple, les paragraphes chinois comportent généralement deux caractères chinois avant chaque paragraphe. Vous pouvez l'écrire comme ceci :

Exemple de code

p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}

Si la taille de la police est de 12 px, alors l'indentation du texte : 2em sera indenté de 24 px.

7. Troncation des caractères chinois à largeur fixe : utilisez le débordement de texte (effet de points de suspension d'affichage)

Utilisez la langue d'arrière-plan pour tronquer le contenu du champ dans la base de données, par exemple 12 caractères chinois ( suivi de 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 à la liste :

Exemple de code

li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

8. Saut de ligne de caractère chinois (mot) à largeur fixe : utilisez un saut de mot

Par exemple, comme On dit que de nombreux noms de lieux doivent être affichés dans un conteneur de largeur fixe (en supposant qu'ils soient séparés par des espaces), afin d'éviter que les noms de lieux ne soient cassés au milieu (c'est-à-dire un mot est en haut et un autre mot est interrompu à la ligne suivante). Ensuite, vous pouvez utiliser le saut de mots. Par exemple :

Exemple de code

<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>

Il est à noter que les espaces à l'intérieur ne peuvent pas être remplacés par (au moins il doit y avoir un espace souple).

9. Notation phonétique chinoise : utilisez les balises ruby ​​​​et les attributs ruby-align

Par exemple, taille : 11px ; ">zhu yin, 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.

Ce qui précède est une introduction détaillée aux attributs liés à la mise en page du texte couramment utilisés dans la mise en page CSS. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!