[Notes CSS 5] Formatage et composition CSS

1. Disposition du texte : police
Nous pouvons utiliser des styles CSS pour définir la police, la taille de la police, la couleur et d'autres attributs de style pour le texte de la page Web. Jetons un coup d'œil à un exemple. Le code suivant implémente : définir la police du texte de la page Web sur Song Dynasty.

body{font-family:"宋体";}

Veillez à ne pas définir de polices inhabituelles ici, car si les polices que vous définissez ne sont pas installées sur l'ordinateur local de l'utilisateur, les polices par défaut du navigateur seront affichées. (Car le fait que l'utilisateur puisse voir le style de police que vous définissez dépend du fait que la police que vous définissez est installée ou non sur l'ordinateur local de l'utilisateur.)
De nos jours, la plupart des pages Web aiment définir « Microsoft Yahei », comme indiqué dans le code suivant. :

body{font-family:"Microsoft Yahei";}

ou

body{font-family:"微软雅黑";}

Remarque : La première méthode est plus compatible que la seconde méthode.

Parce que cette police est belle et peut être affichée en toute sécurité sur le client (elle est généralement installée par défaut localement).

2. Disposition du texte : taille de la police, couleur
Vous pouvez utiliser le code suivant pour définir la taille de la police du texte de la page Web sur 12 pixels et définir la couleur de la police sur #666 (gris ):

body{font-size:12px;color:#666}

3. Mise en page du texte : gras
Nous pouvons également utiliser des styles CSS pour modifier le style du texte : gras, italique, souligné, barré. Vous pouvez utiliser le code suivant pour définir le texte. à afficher en style gras.

p span{font-weight:bold;}

Si vous souhaitez définir une police grasse pour le texte, il existe un style CSS distinct pour y parvenir. Vous n'avez plus besoin d'utiliser h1-h6 ou des balises fortes pour obtenir un style de police gras.

4. Formatage du texte : italique
Le code suivant peut afficher le texte en italique dans le navigateur :

p a{font-style:italic;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

5. Formatage du texte : souligné
Dans certains. Dans certains cas, vous souhaitez définir le style de soulignement du texte, ce qui peut souligner visuellement le texte. Vous pouvez utiliser le code suivant pour y parvenir :

p a{text-decoration:underline;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

6. Disposition du texte : Barré
. Barré Cela peut être réalisé en utilisant le code suivant :

.oldPrice{text-decoration:line-through;}

7. Disposition des paragraphes : indentation
Dans le texte chinois, il est d'usage de laisser deux espaces avant un paragraphe. peut être utilisé comme suit Code à implémenter :

p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。
那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

Remarque : 2em signifie deux fois la taille du texte.

8. Composition des paragraphes : espacement des lignes (hauteur de la ligne)
L'attribut d'espacement des lignes (hauteur de la ligne) (line-height) joue un rôle important dans la composition du paragraphe. lignes L'espacement est de 1,5 fois.

p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，
其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

9. Composition des paragraphes : espacement des caractères chinois et espacement des lettres
Si vous souhaitez définir l'espacement du texte ou l'espacement des lettres dans la mise en page d'une page Web, vous pouvez utiliser l'espacement des lettres pour y parvenir, comme indiqué. dans le code suivant :

h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1>

Remarque : Lorsque ce style est utilisé dans des mots anglais, il définit l'espacement entre les lettres.

Paramètre d'espacement des mots :

Et si je souhaite définir l'espacement entre les mots anglais ? Ceci peut être réalisé en utilisant l'espacement des mots. Le code suivant :

h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1>

10. Disposition des paragraphes : alignement
Vous souhaitez définir un style de centrage pour le texte et les images dans les éléments de bloc ? Vous pouvez utiliser un code de style d'alignement du texte. Le code suivant permet d'obtenir un affichage centré du texte.

h1{ text-align:center; } <h1>了不起的盖茨比</h1>

peut également être réglé à gauche :

h1{ text-align:left; } <h1>了不起的盖茨比</h1>

peut également être réglé à droite :

h1{ text-align:right; } <h1>了不起的盖茨比</h1>

Ce qui précède est [ CSS Notes 5] Contenu de formatage et de composition CSS Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !