recherche

Maison >interface Web >Questions et réponses frontales >Comment appeler le style CSS

Comment appeler le style CSS

PHPz
PHPzoriginal
2023-04-21 11:26:131201parcourir

Avec le développement continu d'Internet, la conception et le développement de sites Web deviennent de plus en plus importants. CSS (cascading style sheet) est un langage utilisé pour contrôler le style des pages web, et c'est aussi une technologie qu'il faut maîtriser en développement web. Mais certains débutants ne savent peut-être pas comment appeler les styles CSS. Cet article vous présentera en détail la méthode d'appel des styles CSS.

1. Feuille de style intégrée

Utilisez la balise de style dans le fichier HTML pour définir une feuille de style intégrée. Les styles définis dans la feuille de style ne sont valables que pour la page actuelle, tels que : 

<!DOCTYPE html>
<html>
<head>
  <title>内嵌样式表</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Dans l'exemple ci-dessus, deux styles sont définis en interne via la balise style. Un style utilisé pour définir la couleur d'arrière-plan et la couleur de la police du titre de la page Web. En exécutant le code, vous pouvez constater que la couleur d'arrière-plan de la page passe au gris et que la couleur de la police du titre passe au rouge.

2. Feuille de style externe

Utilisez la balise de lien dans le fichier HTML pour introduire une feuille de style externe. Cette feuille de style ne sera pas intégrée dans le fichier HTML, mais existe indépendamment dans un fichier CSS et peut être partagée par plusieurs HTML. Rendre la structure du fichier HTML plus concise et plus facile à maintenir, comme : 

<!DOCTYPE html>
<html>
<head>
  <title>外部样式表</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Dans l'exemple ci-dessus, un fichier CSS nommé style.css est introduit via la balise de lien. Plusieurs styles peuvent être définis dans ce fichier et. peut être lié Partagez cette feuille de style dans plusieurs fichiers HTML pour réaliser la réutilisation du style. La façon de définir les styles dans style.css est similaire à la feuille de style en ligne, par exemple : 

body {
  background-color: #f0f0f0;
}
h1 {
  color: red;
}

Dans cet exemple, le sélecteur de corps est utilisé pour définir la couleur d'arrière-plan de la page Web, et le sélecteur h1 est utilisé pour définir la couleur de la police du titre. Lorsque cette feuille de style est référencée dans plusieurs fichiers HTML, ces styles seront partagés.

3. Styles en ligne

Les feuilles de style en ligne définissent les styles dans les balises HTML. Les styles peuvent être directement appliqués à une certaine balise, par exemple : 

<!DOCTYPE html>
<html>
<head>
  <title>内联样式表</title>
</head>
<body>
  <h1 style="color:red">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

Dans l'exemple ci-dessus, une feuille de style en ligne est définie dans la balise h1 utilisée. pour définir la couleur de la police du titre sur rouge. À la différence des feuilles de style en ligne et des feuilles de style externes, les feuilles de style en ligne ne sont valables que pour le balisage actuel et ne peuvent pas être réutilisées. Lorsqu'il existe de nombreux styles, le code HTML apparaîtra désordonné, ce qui n'est pas propice à la maintenance.

Résumé :

Pour résumer, il existe trois façons d'appeler des styles CSS dans les fichiers HTML : les feuilles de style intégrées, les feuilles de style externes et les feuilles de style en ligne. Pour développer des applications Web complexes, il est recommandé d'utiliser des feuilles de style externes. car il permet à plusieurs fichiers HTML de partager des styles, ce qui facilite le développement et la maintenance. Mais pour les applications simples, les feuilles de style en ligne et les feuilles de style en ligne sont également de bons choix. Différents scénarios et besoins nécessitent différents choix technologiques. La maîtrise des méthodes d'appel de styles CSS ci-dessus peut rendre le développement Web plus efficace et plus flexible.

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 选择器 样式表
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：Comment définir le chemin de l'image d'un élément en CSS (attribut src)Article suivant：Comment définir le chemin de l'image d'un élément en CSS (attribut src)

Articles Liés

Voir plus