Maison > Article > interface Web > Comment utiliser les CSS

Comment utiliser les CSS

WBOYoriginal: 2023-05-29 09:42:37714parcourir

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.

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 2cdf5bf648cf2f33323966d7f58a7f3f dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e

Par exemple :

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

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;
}

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;
}

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;
}

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;
}

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>

Feuille de style externe

Utilisez la feuille de style CSS avec 18b5217edbfcc212089cc7c4a16cca8b

Exemple :

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内部样式表 */
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>
</html>

Style en ligne

Le style en ligne est une méthode permettant d'appliquer des règles CSS directement aux éléments HTML méthode. Utilisez l'attribut "style" dans les balises HTML pour saisir du CSS.

Exemple :

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Example</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">This text is red and 20px font size.</p>
</body>
</html>

CSS Box Model

Le modèle de boîte CSS est un moyen de créer et comment disposer le cadre. Une boîte est une zone rectangulaire d'un élément HTML pouvant contenir d'autres éléments HTML.

Le modèle de boîte CSS se compose des parties suivantes :

content
padding
Border# 🎜🎜#

Exemple :

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      padding: 20px;
      border: 10px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box">This is a box.</div>
</body>
</html>

Summary

Le CSS est une partie importante de la création de pages Web. Par en utilisant CSS, nous pouvons facilement contrôler le style et la disposition des éléments HTML. Nous pouvons définir des règles CSS à l'aide de sélecteurs, de propriétés, de valeurs, d'héritage, de cascade, de feuilles de style externes, de feuilles de style internes et de styles en ligne, et créer et disposer des boîtes à l'aide du modèle de boîte CSS. Maîtriser l'utilisation du CSS peut non seulement améliorer l'efficacité du développement Web, mais également créer des pages Web plus belles, plus faciles à lire et à entretenir.

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!

css html 标识符继承 Attribute 选择器样式表外边距内边距 margin padding border 伪类 background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：qu'est-ce que le CSSArticle suivant：qu'est-ce que le CSS

Articles Liés

Voir plus