Maison > Article > interface Web > Comment écrire en style CSS

Comment écrire en style CSS

WBOYoriginal: 2023-05-27 11:02:37886parcourir

CSS (Cascading Style Sheets) est un langage utilisé pour décrire le style des pages Web. CSS fournit une multitude d'attributs de style qui nous permettent de contrôler de manière plus flexible le style des pages Web. Dans cet article, je partagerai quelques méthodes d'écriture de style CSS pour vous aider à mieux maîtriser le contrôle du style.

1. Style en ligne

Le style en ligne consiste à définir l'attribut style dans l'attribut style de la balise HTML, comme indiqué ci-dessous :

<p style="color: red;">这是一段红色的文字。</p>

Cette façon d'écrire est très intuitive, mais il n'est pas recommandé de l'utiliser fréquemment car cela rendra le changement de code HTML trop long et difficile à maintenir.

2. Style intégré

Le style intégré utilise des balises de style en tête du fichier HTML et y écrit du code CSS. Comme indiqué ci-dessous :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>嵌入式样式</title>
  <style type="text/css">
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>
</html>

Cette façon d'écrire est meilleure que le style en ligne car elle peut mettre tout le code de style dans l'en-tête et réduire la quantité de code dans la page. Toutefois, si plusieurs fichiers HTML doivent utiliser le même style, le code de style doit être copié à nouveau, ce qui entraîne une augmentation des coûts de maintenance.

3. Style externe

Le style externe consiste à placer le code de style dans un fichier CSS séparé, puis à l'introduire dans le fichier HTML. Comme indiqué ci-dessous :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部样式</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>这是一段蓝色的文字。</p>
</body>
</html>

Le code de style est placé dans le fichier de style style.css, comme indiqué ci-dessous :

p {
  color: blue;
}

Cette façon d'écrire est la meilleure, car elle sépare le code de style et le code HTML, réduit la redondance du HTML code, et rend la mise en page entière plus claire. Parallèlement, si plusieurs fichiers HTML doivent utiliser ce style, il vous suffit de modifier le fichier de style et toutes les pages faisant référence à ce style seront automatiquement mises à jour.

De plus, il existe certaines méthodes d'écriture de style CSS qui sont également très courantes dans le développement réel :

4 Sélecteur

Selector est utilisé pour spécifier l'élément HTML auquel le style est appliqué. CSS prend en charge une variété de sélecteurs, les plus courants sont :

Sélecteur d'élément : sélectionne les éléments HTML d'un type spécifié.

p {
  color: red;
}

Sélecteur d'ID : utilisé pour sélectionner des éléments HTML avec un identifiant spécifique.

#myId {
  color: blue;
}

Sélecteur de classe : utilisé pour sélectionner des éléments HTML avec des noms de classe spécifiques.

.myClass {
  color: green;
}

Sélecteur d'attribut : sélectionnez des éléments HTML avec des attributs spécifiques.

input[type="text"] {
  border: 1px solid red;
}

5. Attributs de style

Les attributs de style sont utilisés pour décrire le style des éléments. CSS prend en charge de nombreux attributs de style, en voici quelques-uns courants :

color : couleur du texte.

p {
  color: red;
}

font-size : taille de la police.

p {
  font-size: 14px;
}

font-family : Type de police.

p {
  font-family: Arial, sans-serif;
}

background-color : couleur de fond.

p {
  background-color: yellow;
}

border : frontière.

p {
  border: 1px solid black;
}

marge : marge extérieure.

p {
  margin: 10px;
}

rembourrage : rembourrage.

p {
  padding: 5px;
}

6. Pseudo-classes et pseudo-éléments

Les pseudo-classes et pseudo-éléments sont utilisés pour ajouter des styles à des états ou des parties d'éléments spécifiques.

Pseudo classe : utilisée pour décrire un état particulier d'un élément.

a:hover {
  color: red;
}

Pseudo-élément : utilisé pour décrire une partie particulière d'un élément.

p::first-line {
  font-weight: bold;
}

Ce qui précède est la manière courante d'écrire des styles CSS. Bien sûr, dans le développement réel, dans de nombreux cas, différents styles doivent être écrits dans différentes feuilles de style (comme les styles d'impression, les styles mobiles, etc.), et il faut également prêter attention à la relation entre ces feuilles de style. Dans le même temps, les problèmes de performances des styles CSS doivent également être pris en compte pour éviter une imbrication excessive et des sélecteurs trop complexes. J'espère que cet article vous sera utile.

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 选择器样式表外边距内边距 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：CSS masquer l'élémentArticle suivant：CSS masquer l'élément

Articles Liés

Voir plus