Formatage du code CSS
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 id="三年级">三年级</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 id="三年级">三年级</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 id="三年级时">三年级时</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>123456789101112131415161718Mise 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 id="尼克-卡拉威">尼克?卡拉威</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 id="了不起的乔布斯">了不起的乔布斯</h1>12345Paramè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 id="welcome-nbsp-to-nbsp-iOS">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 id="hello-nbsp-world-你好">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 id="了不起的乔布斯">了不起的乔布斯</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="/static/imghw/default1.png" data-src="http://img.com/2000200.jpg" class="lazy" alt="Formatage du code CSS" ></div></body></html>123456789101112131415Ce 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
