Quelles sont les manières de référencer CSS en HTML ?-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

Quelles sont les manières de référencer CSS en HTML ?

php中世界最好的语言

Feb 11, 2018 am 10:51 AM

csshtml

Cette fois, je vais vous présenter quelles façons de référencer CSS en HTML, et quelles sont les précautions sur la façon de référencer CSS en HTML. Ce qui suit est un cas pratique. jetez un oeil.

En HTML, les principales méthodes d'introduction du CSS sont en ligne, intégrées, importées et liées.
Inline : c'est-à-dire définir le style CSS dans l'attribut style de la marque This This. ne reflète pas les avantages du CSS, il n'est donc pas recommandé d'utiliser
Exemple :

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
      </head>
      <body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
      </body>
      </html>

Embedded : Embedded se concentrera sur l'écriture des paramètres de divers éléments de la page.

et , cette méthode est très pratique pour une seule page Web. Mais pour un site Web contenant de nombreuses pages, si chaque page définit son propre style en ligne, elle perdra les énormes avantages apportés par CSS. Par conséquent, un site Web écrit généralement un fichier de feuille de style CSS indépendant, en utilisant les deux méthodes suivantes. introduit dans le document HTML.
Exemple :

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
      color:white;
      background-color:boue;
      }
</style>
      </head>
      <body>
<h1 id="This-nbsp-is-nbsp-a-nbsp-line-nbsp-of-nbsp-Text">This is a line of Text.</h1>
<h1 id="This-nbsp-is-nbsp-another-nbsp-line-nbsp-of-nbsp-Text">This is another line of Text.</h1>
      </body>
      </html>

Type d'importation et type de lien : le but du type d'importation et du type de lien est d'introduire un fichier CSS indépendant dans un fichier HTML, et il existe des différences correspondantes entre les deux.
En fait, la plus grande différence entre les deux est que le type de lien utilise des balises HTML pour introduire des fichiers CSS externes, tandis que le type d'importation utilise des règles CSS pour introduire des fichiers CSS externes. Leur syntaxe est donc également différente.
Si vous utilisez le style de lien, vous devez utiliser l'instruction suivante pour introduire des fichiers CSS externes.

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

Si vous utilisez l'importation, vous devez utiliser l'instruction suivante.

<style type="text/css">
       @import"mystyle.css";
</style>

De plus, les effets d'affichage de ces deux méthodes sont également légèrement différents. Lors de l'utilisation de la méthode de lien, le fichier CSS sera chargé avant la partie principale de la page d'installation, de sorte que la page Web affichée ait un effet de style dès le début. Lors de l'utilisation de la méthode d'importation, le fichier CSS sera chargé après. la page entière est chargée. Pour certains navigateurs, dans certains cas, si la taille du fichier de la page Web est relativement grande, une page sans style sera affichée en premier, puis l'effet de style apparaîtra après un flash. Du point de vue du spectateur, il s’agit d’un inconvénient de l’utilisation de l’importation. Pour certains sites Web relativement volumineux, afin de faciliter la maintenance, vous souhaiterez peut-être placer tous les styles CSS dans plusieurs fichiers CSS. De cette façon, si vous utilisez l'importation de liens, vous aurez besoin de plusieurs instructions pour importer les fichiers CSS séparément. Si vous souhaitez ajuster la classification des fichiers CSS, vous devez ajuster les fichiers HTML en même temps. C'est un inconvénient pour les travaux de maintenance. Si vous utilisez la méthode d'importation, vous ne pouvez importer qu'un fichier CSS général, puis importer d'autres fichiers CSS indépendants dans ce fichier ; la méthode de lien n'a pas cette fonctionnalité ;

Donc, une suggestion ici est que si vous devez introduire un fichier CSS, utilisez la méthode link ; si vous devez introduire plusieurs fichiers CSS, utilisez d'abord la méthode link pour introduire un fichier CSS "répertoire", ceci Fichier CSS "Répertoire", puis utilisez l'importation pour introduire d'autres fichiers CSS.
Si vous souhaitez décider dynamiquement quel fichier CSS importer via JavaScript, vous devez utiliser la méthode link pour y parvenir.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Quelles sont les opérations de débordure et d'iframes sans bordure

Comment utiliser les pages Web HTML Anchor

Comment utiliser js pour obtenir l'heure du système local en HTML

Après l'événement de clic du lien hypertexte HTML un saut à l'adresse indiquée par href

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 connexe

L'avenir de HTML: évolution et tendances de la conception WebApr 17, 2025 am 12:12 AM

L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.

HTML vs CSS vs JavaScript: un aperçu comparatifApr 16, 2025 am 12:04 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: HTML est responsable de la structure du contenu, CSS est responsable du style et JavaScript est responsable du comportement dynamique. 1. HTML définit la structure et le contenu de la page Web via des balises pour assurer la sémantique. 2. CSS contrôle le style de page Web via des sélecteurs et des attributs pour le rendre beau et facile à lire. 3. JavaScript contrôle le comportement de la page Web via les scripts pour atteindre des fonctions dynamiques et interactives.

HTML: Est-ce un langage de programmation ou autre chose?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingNanguage; itisamarkupLanguage.1) htmlstructuresAndFormaSwebContentUsingTags.2) itworkswithcssforStylingandjavaScriptForIterActivity, EnhancingWebDevelopment.

HTML: construire la structure des pages WebApr 14, 2025 am 12:14 AM

HTML est la pierre angulaire de la construction de la structure des pages Web. 1. HTML définit la structure et la sémantique du contenu et les utilisations, etc. Tags. 2. Fournir des marqueurs sémantiques, tels que, etc., pour améliorer l'effet SEO. 3. Pour réaliser l'interaction de l'utilisateur via des balises, faites attention à la vérification de la forme. 4. Utilisez des éléments avancés tels que, combinés avec JavaScript pour obtenir des effets dynamiques. 5. Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non déposées et des outils de vérification sont nécessaires. 6. Les stratégies d'optimisation comprennent la réduction des demandes HTTP, la compression du HTML, l'utilisation de balises sémantiques, etc.

Du texte aux sites Web: la puissance de HTMLApr 13, 2025 am 12:07 AM

HTML est un langage utilisé pour créer des pages Web, définissant la structure des pages Web et le contenu via des balises et des attributs. 1) HTML organise la structure des documents via des balises, telles que. 2) Le navigateur analyse HTML pour construire le DOM et rend la page Web. 3) De nouvelles caractéristiques de HTML5, telles que, améliorez les fonctions multimédias. 4) Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non attribuées. 5) Les suggestions d'optimisation incluent l'utilisation de balises sémantiques et la réduction de la taille du fichier.

Comprendre HTML, CSS et JavaScript: un guide pour débutantApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Le rôle de HTML: Structurer le contenu WebApr 11, 2025 am 12:12 AM

Le rôle de HTML est de définir la structure et le contenu d'une page Web via des balises et des attributs. 1. HTML organise le contenu via des balises telles que, ce qui le rend facile à lire et à comprendre. 2. Utilisez des balises sémantiques telles que, etc. pour améliorer l'accessibilité et le référencement. 3. Optimisation du code HTML peut améliorer la vitesse de chargement des pages Web et l'expérience utilisateur.

HTML et code: un examen plus approfondi de la terminologieApr 10, 2025 am 09:28 AM

Htmlisaspecificypeofcodefocusedonconstructringwebcontent, tandis que "code" en général incluse les langues liés à lajavaScriptandpythonforfonctionnality.1) htmldefineswebpagestructureusingtags.2) "Code" enclueSawidererRangeFlanguageForgicandInteract "

See all articles