Comment introduire CSS dans HTML-tutoriel HTML-php.cn

Comment introduire CSS dans HTML

墨辰丷

Libérer： 2018-05-16 11:26:59

original

2474 Les gens l'ont consulté

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

1. Style en ligne
Le style en ligne 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.
2. Embedded
Embedded consiste à écrire des styles CSS ensemble dans la paire de balises de la page Web. 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. Importer
Introduire un fichier .css indépendant dans le fichier HTML. L'import utilise des règles CSS pour introduire les fichiers CSS externes. . La syntaxe utilisée est la suivante :

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

Copier après la connexion

Le type d'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, sans style. La page sera affichée en premier, après avoir clignoté pendant un moment, le style de la page Web ré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 la mesure où le type de lien utilise des règles HTML pour introduire des fichiers CSS externes, qui sont dans le dans la paire de balises ; pour introduire les fichiers de feuille de style externes. La syntaxe est la suivante : Le fichier CSS est chargé avant le chargement du corps principal, Ainsi, la page Web affichée a un effet de style dès le début. Elle n'affichera pas d'abord une page Web sans style, puis affichera une page Web stylisée comme le type d'importation.

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

Copier après la connexion

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 feuille de style, nous utilisons donc d'abord un lien pour introduire un fichier CSS général, puis utilisons la méthode d'importation dans ce fichier CSS pour introduire d'autres fichiers CSS. Mais si vous introduisez dynamiquement des fichiers CSS via JavaScript, vous ne pouvez utiliser que des liens.

Recommandations associées :

Introduction aux quatre façons d'introduire CSS dans HTML

Une brève analyse du chrome CSS ( 1) HTMLCss par défaut La logique de formation (chromium39)_html/css_WEB-ITnose

balise de note htmlcss valeur par défaut style réinitialiser css réinitialiser(2)_html/css_WEB-ITnose

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!