Maison > Article > interface Web > Formatage du code CSS
Formatage du code CSS
- 巴扎黑original
- 2017-08-09 15:48:371567parcourir
Mise en page 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 sur Song Dynasty pour le texte de la page Web.
body{font-family:"宋体";}1Veillez à 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";}1ou
body{font-family:"微软雅黑";}1Remarque : 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).
Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋体";}</style></head><body> <h1>三年级</h1> <p>三年级<span id="stress">三年级</span>三年级</p> <p>三年级</p></body></html>1234567891011121314151617181920Mise en page du texte - - taille de la police, couleur
Vous pouvez utiliser le code suivant pour définir le texte dans la page Web Définissez la taille de la police sur 12 pixels et définissez la couleur de la police sur #666 (gris) :
body{font-size:12px;color:#666}1Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字号、颜色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>三年级</h1> <p>三年级<span class="stress">三年级</span>三年级</p> <p>三年级<span>三年级</span>三年级</p></body></html>12345678910111213141516Mise en page du texte – – Police en 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. affiché en style gras.
p span{font-weight:bold;}1Ici, vous pouvez voir que si vous souhaitez définir du texte en gras 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 gras. .
Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗体签</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>三年级时</h1> <p>三年级时<span class="stress">三年级时</span>三年级时<a href="http://www.imooc.com">三年级时</a>三年级时</p> <p>三年级时</p></body></html>12345678910111213141516Mise en page du texte – – italique
Le code suivant peut implémenter du texte en italique dans le navigateur Affiché dans :
p a{font-style:italic;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜体样式</title><style type="text/css">p{ font-style:italic;
}a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年级<a>三年级</a>三年级</p> </body></html>1234567891011121314151617181920Mise en page du texte – – Souligné
Dans certains cas, vous souhaitez Le texte est défini pour souligner le style, 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>12Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下划线样式</title><style type="text/css">a { text-decoration:underline;
}span { text-decoration:underline;}</style></head><body><p><span>三年级</span><a> 四年级 </a> 五年级 </p></body></html>123456789101112131415161718. Mise en page du texte – – Barré
Et si vous souhaitez définir un barré sur la page Web ? Ce style est souvent vu sur les sites de commerce électronique : 
Photo ci-dessus Le barré sur le prix d'origine peut être réalisé en utilisant le code suivant :
.oldPrice{text-decoration:line-through;}1Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body></html>12345678910111213Disposition des paragraphes – – Indentation
Dans le texte chinois, il est d'usage de laisser deux espaces avant un paragraphe. Ce style spécial peut être implémenté avec le code suivant :
p{text-indent:2em;}<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>12<.>Remarque : 2em signifie 2 fois la taille du texte.
Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>缩进样式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1>尼克?卡拉威</h1> <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>123456789101112131415Mise en page des paragraphes – – Interligne (hauteur de la ligne)
Apprenons dans cette section regardez un autre attribut d'espacement des lignes (hauteur de ligne) (hauteur de ligne) qui joue un rôle important dans la disposition des paragraphes. Le code suivant définit l'espacement des lignes du paragraphe à 1,5 fois.
p{line-height:1.5em;}<p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p>12Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行间距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p></body></html>12345678910111213Mise en page des paragraphes – – Espacement des mots chinois, espacement des lettres
Espacement des caractères chinois , paramètres d'espacement des lettres :
Si vous souhaitez définirespacement du texte ou espacement des lettres dans la mise en page Web, vous pouvez l'utiliser L'espacement des lettres est implémenté, comme indiqué dans le code suivant :
h1{
letter-spacing:50px;
}...<h1>了不起的乔布斯</h1>12345Remarque : lorsque ce style est utilisé dans des mots anglais, il définit l'espacement entre les lettres.
Paramètres 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 iOS!</h1>12345Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字间距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>123456789101112131415Remarque Lorsque l'élément de réglage est anglais, l'espacement des lettres le paramètre n'est pas les espaces entre les mots anglais, mais les espaces entre les lettres.
Mise en page 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/left/right;
}<h1>了不起的乔布斯</h1>1234Exemple
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对齐</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" alt="Formatage du code CSS" ></div></body></html>123456789101112131415
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!