paramètres de style HTML

Le style HTML est une partie importante de la création de conceptions Web. Les styles HTML peuvent ajuster divers aspects tels que la mise en page, la couleur, la taille et le style de la police, ainsi que réaliser des effets spéciaux interactifs. Cet article présentera les connaissances de base du style HTML, de l'écriture de feuilles de style CSS à l'application de styles CSS dans les éléments HTML, aidant ainsi les lecteurs à atteindre leurs objectifs de conception Web.

1. Feuilles de style CSS

CSS fait référence aux feuilles de style en cascade, qui ont été proposées pour résoudre le problème de confusion dans les documents HTML en raison du manque de séparation entre la présentation et le contenu. Les feuilles de style CSS peuvent être utilisées pour contrôler l'apparence des éléments HTML en définissant des sélecteurs de classe, d'ID et de balise ainsi que d'autres sélecteurs pour modifier la couleur, l'arrière-plan, la taille de la police, la hauteur de ligne, la largeur, la hauteur et les marges des éléments HTML. Plusieurs opérations courantes sur les feuilles de style CSS seront présentées ci-dessous.

1. Comment les fichiers CSS sont créés

Nous enregistrons généralement le fichier de feuille de style en tant que fichier CSS, et le suffixe du fichier est .css. Voici les étapes pour créer un fichier de feuille de style :

• Créez un fichier texte en ouvrant le Bloc-notes ou un autre logiciel prenant en charge l'édition de texte.
• Ajoutez le code de la feuille de style sur la première ligne du fichier, à savoir la balise "c9ccee2e6ea535a969eb3f532ad9fe89" et la balise "/style>".
• Ajoutez du code de feuille de style CSS entre les balises, qui peuvent être des sélecteurs tels que des classes, des identifiants et des balises, ainsi que d'autres propriétés de style CSS.
• Dans le fichier CSS, il doit y avoir une accolade entre chaque sélecteur et son attribut de style correspondant pour indiquer la relation.
• Après avoir terminé la définition des styles CSS, nous devons enregistrer le fichier CSS en tant que fichier .css et le lier au document HTML.

2. Commentaires sur la feuille de style CSS

Le rôle des commentaires sur la feuille de style CSS est de faciliter aux développeurs l'explication et la description lors de la maintenance du code. Les commentaires des feuilles de style CSS commencent par / et se terminent par /. L'exemple suivant :

/*Ceci est une ligne de commentaires
Ceci est une deuxième ligne de commentaires*/

3. Opérations de base des feuilles de style CSS

L'écriture des feuilles de style CSS repose sur les opérations de base des sélecteurs et des attributs, tels que :

• Sélecteur : les feuilles de style CSS utilisent des symboles spécifiques pour sélectionner les éléments HTML à modifier, tels que les sélecteurs de classe ("".") et les sélecteurs d'ID ("#"), etc.
• Attributs : les feuilles de style CSS utilisent des attributs pour définir le style des éléments HTML, tels que des attributs tels que "font-size", "color" et "background".

Le code suivant illustre un ajustement de style de base d'un élément HTML, qui est un titre :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>CSS样式表调整标题样式的例子</title>
<style>
    h1 {
        color: red;
        font-size: 36px;
        background: yellow;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
1d6e7d87652dd104f173dbf7284e2799

<h1>这是一级标题</h1>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Le code ci-dessus modifie la taille du texte du titre à 36 pixels (taille de police : 36px;) et définit la couleur d'arrière-plan sur jaune (arrière-plan : jaune ;) , tout en définissant la couleur du texte sur rouge (color: red;). Ces propriétés peuvent être modifiées ou supprimées en fonction des besoins en matière de style, de couleur, de police, etc.

2. Feuille de style CSS appliquée aux éléments HTML

Maintenant, nous avons créé un simple fichier de feuille de style CSS et défini des valeurs pour les propriétés de style CSS. Ensuite, nous devons associer ces attributs de style aux éléments HTML pour obtenir un contrôle de style des éléments HTML.

1. Style en ligne (style en ligne)

Le style en ligne fait référence à l'application d'attributs de style à l'attribut "style" à l'intérieur de l'élément HTML. Cette méthode consiste principalement à écrire du code de style CSS directement dans le document HTML. Cette méthode est utile pour ajuster rapidement le style des éléments HTML. Le code suivant est un exemple de style en ligne :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内嵌样式CSS设置</title>

9c3bca370b5104690d9ef395f2c5f8d1
ac34df3aa32f21ab3ed190305f14dbb0

<h1 style="color: MediumBlue; font-size: 50px;">大标题</h1>
<p style="color: Black; font-size: 30px;">小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Dans le code ci-dessus, nous définissons la couleur d'arrière-plan sur gris clair (couleur d'arrière-plan : LightGray;) et la couleur du grand titre sur bleu foncé (couleur : MediumBlue ;), définissez la taille de police du titre sur 50 pixels (taille de police : 50 px ;) et définissez la couleur du sous-titre sur noir (couleur : Noir ;), définissez la taille de police du titre sur 30 pixels (taille de police : 30 px). ;).

2. Style interne (style interne)

La méthode de feuille de style interne consiste à placer le code de la feuille de style dans la balise "style" de la balise "head" du document HTML pour modifier le style utilisé par tous les documents HTML. Cette méthode est plus flexible que les styles en ligne et maintient la séparation des fichiers HTML et des feuilles de style. Le code suivant est un exemple de feuille de style interne :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内部样式表CSS设置</title>
<style>
    body {
        background-color: LightGray;
    }
    h1 {
        color: MediumBlue;
        font-size: 50px;
    }
    p {
        color: black;
        font-size: 30px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们将背景颜色设置为浅灰（body {background-color: LightGray;}），将大标题颜色设置为深蓝（h1 {color: MediumBlue;font-size: 50px;}），将标题字体大小设置为50像素（h1 {color: MediumBlue;font-size: 50px;}），并将小标题颜色设置为黑色（p {color: black;font-size: 30px;}），将标题字体大小设置为30像素（p {color: black;font-size: 30px;}）。

3. 外部样式表（external styling）

外部样式表是指在HTML文件中以CSS文件的形式链接到HTML文档的样式表，这种方式最好适用于大型网站或多个页面，对于一些共享设计风格的网站更为便捷。下面是示例代码：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表CSS设置</title>
<link rel="stylesheet" type="text/css" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们通过c29ea0143d4a2d5dc6725f7851494a02属性将外部样式表链接到HTML文档，这包含了全部HTML文档所用到的样式定义。样式表文件的代码如下：

body {

background-color: LightGray;

}
h1 {

color: MediumBlue;
font-size: 50px;

}
p {

color: black;
font-size: 30px;

}

以上就是HTML样式设置的基础知识，包括创建和使用CSS样式表的不同方法。通过这些基本操作，我们可以对网页的排版、字体、颜色和特效等方面进行控制，创造出各种个性化的网页设计。

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!