Maison > Article > interface Web > Comment introduire des fichiers CSS

Comment introduire des fichiers CSS

coldplay.xixioriginal: 2021-04-29 17:22:4813842parcourir

Comment introduire les fichiers CSS : 1. Utilisez l'attribut style pour introduire les styles CSS ; 2. Écrivez le code CSS dans la balise de style ; 3. Enregistrez le code CSS dans une feuille de style avec l'extension [.css] .

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Comment introduire les fichiers CSS :

1. Style en ligne

Utilisez l'attribut style pour introduire les styles CSS.

Exemple :

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

En fait, il n'est pas recommandé de l'utiliser lors de l'écriture de pages, mais il peut être utilisé lors des tests.

Par exemple :

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">Leaping Above The Water</h1>
     <p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

2. Feuille de style interne

Écrivez le code CSS dans la balise de style. La balise de style est écrite dans la balise head.

Exemple :

<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

Exemple :

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

3. Feuille de style externe

Le code CSS est enregistré avec l'extension .css. Le fichier HTML

dans la feuille de style fait référence à la feuille de style avec l'extension .css. Il existe deux manières : le type de lien et le type d'importation.

Syntaxe :

1. Type de lien

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2. Type d'importation

<style type="text/css">
  @import url("css文件路径");
</style>

Par exemple :

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

Connexe tutoriels Recommandé : Tutoriel vidéo CSS

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!

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 bouton pour qu'il ne soit pas cliquable en CSSArticle suivant：Comment définir le bouton pour qu'il ne soit pas cliquable en CSS

Articles Liés

Voir plus