Comment écrire en style CSS-Questions et réponses frontales-php.cn

Comment écrire en style CSS

WBOY

Libérer： 2023-05-27 11:02:37

original

805 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

p {
  color: blue;
}

Copier après la connexion

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

Copier après la connexion

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

#myId {
  color: blue;
}

Copier après la connexion

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

.myClass {
  color: green;
}

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

font-size : taille de la police.

p {
  font-size: 14px;
}

Copier après la connexion

font-family : Type de police.

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

Copier après la connexion

background-color : couleur de fond.

p {
  background-color: yellow;
}

Copier après la connexion

border : frontière.

p {
  border: 1px solid black;
}

Copier après la connexion

marge : marge extérieure.

p {
  margin: 10px;
}

Copier après la connexion

rembourrage : rembourrage.

p {
  padding: 5px;
}

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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!