简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Questions et réponses frontales > le corps du texte

Comment utiliser les CSS

WBOY
Libérer： 2023-05-29 09:42:37
original
711 Les gens l'ont consulté

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour les documents HTML (Hypertext Markup Language). CSS peut rendre l'apparence des pages Web plus belle et plus claire, et améliorer la lisibilité et la maintenabilité des pages Web.

Les feuilles de style CSS comprennent généralement trois parties : les sélecteurs, les attributs et les valeurs. Le sélecteur spécifie l'élément HTML auquel le style doit être appliqué, l'attribut définit le style à appliquer à l'élément et la valeur spécifie la valeur spécifique de l'attribut.

Apprenons-en davantage sur l'utilisation du CSS.

  1. Créer une feuille de style CSS

Tout d'abord, nous devons créer une feuille de style CSS pour le document HTML. Habituellement, nous stockons la feuille de style CSS dans un fichier .css séparé et l'introduisons via la balise dans la balise

Par exemple : 

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
Copier après la connexion
  1. Selector

Un sélecteur est un identifiant qui précise l'élément HTML auquel le La règle CSS s'applique. Les sélecteurs courants incluent :

  • Sélecteur de nom de balise : utilisez le nom de balise de l'élément HTML pour spécifier l'élément. Par exemple : p, h1, div, etc.
  • Sélecteur de classe : Commencez par "." suivi du nom de la classe. Par exemple : .class1, .class2.
  • Sélecteur d'ID : commencez par "#", suivi du nom de l'ID. Par exemple : #id1, #id2.
  • Sélecteur d'attribut : spécifiez des éléments en fonction des attributs des éléments HTML. Par exemple : [attribut], [attribut=valeur], etc.
  • Sélecteur de pseudo-classe : utilisé pour spécifier certains états d'éléments spéciaux. Par exemple : hover, :focus, etc.

Exemple : 

/* 标签名选择器 */
p {
  color: blue;
}

/* 类选择器 */
.red {
  color: red;
}

/* ID选择器 */
#green {
  color: green;
}

/* 属性选择器 */
[class="yellow"] {
  color: yellow;
}

/* 伪类选择器 */
a:hover {
  color: purple;
}
Copier après la connexion
  1. Attributs

Les attributs spécifient les éléments HTML auxquels s'appliquent les règles CSS . style. Les attributs courants incluent :

  • color : couleur du texte.
  • background-color : couleur de fond.
  • font-size : Taille de la police.
  • font-family : Type de police.
  • font-weight : Épaisseur de la police.
  • text-align : Alignement du texte.
  • marge : Marge.
  • padding : Rembourrage.
  • border : frontière.

Exemple : 

/* 文本颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}
Copier après la connexion
  1. Value

La valeur est la valeur spécifique de l'attribut. La plage de valeurs possibles pour une propriété dépend du type de propriété. Par exemple, les couleurs peuvent utiliser des noms de couleurs prédéfinis (comme "rouge", "bleu", etc.) ou utiliser des valeurs hexadécimales ou RVB (comme "#ff0000", "rgb(255,0,0)", etc. ).

Exemple : 

/* 颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}
Copier après la connexion
  1. Inheritance

Les styles en CSS peuvent être hérités. Par exemple, nous pouvons définir un attribut de police pour tous les paragraphes d'un document HTML, et les valeurs de ces attributs peuvent être automatiquement héritées par le texte contenu dans chaque paragraphe.

Exemple : 

/* 字体 */
body {
  font-family: Arial, sans-serif;
}
Copier après la connexion
  1. Cascading

Lorsque plusieurs règles CSS sont appliquées au même élément HTML, elles sont appliquées en cascade se produit. Cela signifie que certaines règles ont une priorité plus élevée et prévalent sur d’autres règles. Le principe de cascade utilisé en CSS est :

  • Spécificité du style : En termes simples, c'est la complexité du sélecteur.
  • Ordre des fichiers : les règles ultérieures remplacent les règles antérieures.

Exemple : 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 优先级为1，文件顺序为1 */
    p {
      color: red;
    }
  </style>
  <style>
    /* 优先级为10，文件顺序为2 */
    .green {
      color: green;
    }
  </style>
  <style>
    /* 优先级为100，文件顺序为3 */
    #blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p class="green" id="blue">This text is blue.</p>
</body>
</html>
Copier après la connexion
  1. Feuille de style externe

Utilisez la feuille de style CSS avec < link> La balise ; est généralement considérée comme une bonne pratique lors de la création de liens vers des documents HTML. Cela présente les avantages suivants :

  • Cacheable : le navigateur peut mettre en cache la feuille de style CSS afin qu'elle puisse être chargée la prochaine fois.
  • Maintenabilité : les styles peuvent être modifiés et conservés dans des fichiers séparés.
  • Compatible avec plusieurs navigateurs : en utilisant des feuilles de style externes, vous pouvez garantir la cohérence du style entre les différents navigateurs.
  • Applicabilité : Le même style peut être appliqué à plusieurs pages pour garantir la cohérence.

Exemple : 



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

  
This text is red.

  
This text is blue.

  
This text is green.
Copier après la connexion
/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}
Copier après la connexion
  1. Feuille de style interne

Parfois, enregistrez la feuille de style CSS dans des documents HTML peut améliorer la vitesse de chargement des pages. Si la feuille de style s'applique uniquement à la page actuelle, vous pouvez la placer dans une balise