Comment utiliser les CSS en HTML

<p>HTML et CSS sont les deux technologies de base de la conception Web moderne. HTML est utilisé pour créer le contenu des pages Web, tandis que CSS est utilisé pour le style et la mise en page. Dans cet article, nous apprendrons comment appliquer CSS aux pages HTML afin que vous puissiez commencer à ajouter une touche belle et personnalisée à votre site Web.

1. Présentation des fichiers CSS

<p>La première étape de l'utilisation de CSS dans les pages HTML consiste à introduire des fichiers CSS dans vos fichiers HTML. Ceci peut être réalisé en ajoutant un élément de lien à l'en-tête HTML. Cet élément doit pointer vers l'emplacement de votre fichier CSS, comme ceci :

<link rel="stylesheet" type="text/css" href="style.css">

2. Application du CSS aux éléments HTML

<p>Une fois votre fichier CSS correctement introduit dans votre page HTML, vous pouvez commencer à appliquer les styles CSS auxquels sont appliqués vos éléments HTML. Vous pouvez utiliser une variété de sélecteurs pour sélectionner des éléments, puis leur appliquer des attributs de style, tels que :

h1 {
  color: red;
  text-align: center;
  font-size: 36px;
}

<p> Ce sélecteur de style CSS s'applique à tous les éléments h1 de la page. Il change la couleur du texte de l'élément en rouge, centre le texte et modifie la taille de la police de l'élément.

3. Styles imbriqués

<p> Vous pouvez ajouter des styles à n'importe quel élément en imbriquant la déclaration de style d'un élément dans la déclaration de style d'un autre élément. Par exemple, vous pouvez mettre tout le texte souligné dans un paragraphe en italique et changer sa couleur en bleu :

p em {
  font-style: italic;
  color: blue;
}

<p> Désormais, tout le texte d'une balise <p>标签中的<em> apparaîtra en italique et sera bleu.

4. Sélecteur de catégorie

<p>Un sélecteur de catégorie est un sélecteur qui peut être utilisé pour styliser plusieurs éléments du même type. Avec un sélecteur de style CSS nommé classe, vous pouvez appliquer le même style à tous les éléments d'une catégorie. Voici un exemple de sélecteur de catégorie :

.blue-text {
  color: blue;
}

<p> Ce sélecteur de style définit une classe appelée "blue-text". Pour appliquer ce type de style il vous suffit d'accorder cette classe à l'élément requis :

<p class="blue-text">这段文字会变成蓝色的。</p>

<p> Remarque : En utilisant l'attribut class, dans la même page vous pouvez définir plusieurs classes différentes et les ajouter si besoin. Elles sont affectées à différents HTML éléments. Vous pouvez même combiner plusieurs classes pour définir des styles plus complexes, alors assurez-vous de bien les utiliser.

5. Autres sélecteurs

<p>CSS a de nombreux autres sélecteurs, notamment des sélecteurs d'ID, des sélecteurs descendants, des sélecteurs enfants, des sélecteurs de pseudo-classe, etc. Ces sélecteurs sont utiles lorsque vous devez styliser un élément spécifique. Ce qui suit est une introduction aux autres sélecteurs :

• Sélecteur ID : en définissant un ID, vous pouvez styliser un élément spécifique sur la page.
• Sélecteur descendant : utilisé pour sélectionner les éléments descendants de l'élément spécifié.
• Sélecteur enfant : similaire au sélecteur descendant, mais il sélectionne uniquement les éléments enfants directs.
• Sélecteur de pseudo-classe : utilisé pour sélectionner des éléments dans un état spécifique, tel que le survol, l'accès ou les états sélectionnés.

6. Modèle de boîte CSS

<p>Le modèle de boîte CSS est un concept de base pour la présentation et le positionnement des éléments d'une page Web. Ce modèle décrit le cadre autour d'un élément HTML, qui comprend différentes parties telles que la zone de contenu, le remplissage, les bordures et les marges.

<p>Vous pouvez contrôler avec précision la disposition de vos éléments HTML en définissant la taille et la position de chaque case. Voici plusieurs propriétés couramment utilisées dans le modèle de boîte CSS :

• box-sizing : définissez le modèle de boîte de l'élément.
• width : définissez la largeur de l'élément.
• hauteur : définissez la hauteur de l'élément.
• margin : définissez la marge de l'élément.
• padding : définissez le remplissage de l'élément.
• border : définissez la bordure de l'élément.

<p>Vous pouvez utiliser ces propriétés pour positionner et ajuster divers éléments sur votre page Web afin d'obtenir le style et la mise en page souhaités.

<p>Résumé

<p>Dans cet article, nous avons expliqué comment styliser les éléments HTML à l'aide de CSS. Vous pouvez utiliser CSS en créant un fichier CSS et en le liant à une page HTML. Vous pouvez ensuite utiliser des sélecteurs pour appliquer différents styles à chaque élément. Vous pouvez également utiliser le modèle de boîte CSS pour disposer et contrôler les éléments sur la page. La maîtrise de ces compétences vous permettra de créer des pages Web dont vous pourrez être fier avec un design de site Web magnifique et personnalisé.

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!