Comment ajouter du CSS au HTML-tutoriel HTML-php.cn

Comment ajouter du CSS au HTML

(*-*)浩

Libérer： 2019-06-05 14:33:02

original

8946 Les gens l'ont consulté

Il existe quatre manières principales d'ajouter du CSS en HTML : elles sont en ligne, intégrées, liées et importées.

1. Inline

Inline consiste à définir le style CSS dans l'attribut style de la balise. . Cette méthode ne reflète pas les avantages du CSS et n'est pas recommandée.

<div style = "width:100px;height:100px;>我是行内样式</div>

Copier après la connexion

2. Embedded

Embedded consiste à écrire des styles CSS dans la paire de balises Le format est le suivant :

  <head>
        <style type="text/css">
           ...此处写CSS样式
       </style>
  </head>

Copier après la connexion

L'inconvénient est que pour un site Web qui contient de nombreuses pages Web, il est très gênant d'utiliser l'intégration dans chaque page Web et de modifier le style. Les pages Web uniques peuvent envisager d’utiliser des intégrations.

3. Le type d'importation

introduit un fichier .css indépendant dans le fichier HTML. Le type d'importation utilise des règles CSS pour introduire des fichiers CSS externes,

<style type="text/css">
    @import"mystyle.css"; //此处要注意.css文件的路径
</style>

Copier après la connexion

L'importation chargera le fichier CSS une fois la page Web entière chargée, cela entraîne donc un problème si la page Web est relativement volumineuse, une page sans style apparaîtra en premier, puis après un flash, le style du Web. apparaîtra. Il s’agit d’un défaut inhérent aux importations.

4. Le type de lien

introduit également un fichier .css dans le fichier HTML, mais il est différent du type d'importation dans le sens où le type de lien utilise des règles HTML. pour introduire un fichier CSS externe, qui utilise des balises dans la paire de balises de la page Web pour introduire des fichiers de feuille de style externes. La syntaxe est la suivante :

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

Copier après la connexion

Lors de l'utilisation du type de lien, il est différent du type d'importation. en ce sens qu'il chargera le fichier CSS avant de charger le corps principal du fichier de la page Web, de sorte que la page Web affichée ait un effet de style dès le début, elle n'affichera pas d'abord la page Web sans style, puis affichera la page Web stylisée comme. le type d'importation C'est l'avantage du type de lien.

Résumé : De manière générale, lors de la création d'un site Web, les styles sont principalement écrits dans plusieurs fichiers de feuilles de style, nous utilisons donc d'abord un lien pour introduire un fichier CSS général, puis dans ce CSS Les importations sont utilisées dans le fichier pour introduire d'autres fichiers CSS. Mais si vous introduisez dynamiquement des fichiers CSS via JavaScript, vous ne pouvez utiliser que des liens.

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!