recherche

Maison >interface Web >Questions et réponses frontales >Comment connecter CSS

Comment connecter CSS

王林
王林original
2023-05-21 10:47:361572parcourir

Dans la conception de sites Web, les CSS (Cascading Style Sheets) sont largement utilisées. CSS peut ajouter des fonctionnalités telles que le style, le formatage et la mise en page aux pages Web, les rendant plus belles et plus faciles à lire. Par conséquent, savoir comment connecter des fichiers CSS est une étape importante dans l’apprentissage de la conception Web. Ensuite, cet article détaillera comment connecter CSS.

1. Inline CSS

Inline CSS est une méthode d'intégration de code CSS directement dans des fichiers HTML. Pour utiliser le CSS en ligne, vous devez ajouter une balise de style à la balise d'en-tête HTML et y écrire du code CSS. Voici un exemple : 

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
}
p {
  color: red;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Dans cet exemple, nous utilisons la balise c9ccee2e6ea535a969eb3f532ad9fe89 pour intégrer le code CSS dans le fichier HTML. Le code CSS définit les styles des balises h1 et p, rendant le texte de la balise h1 bleu et le texte de la balise p rouge, et augmentant la taille de la police. c9ccee2e6ea535a969eb3f532ad9fe89标签将CSS代码嵌入到HTML文件中。CSS代码定义了h1和p标签的样式，使h1标签的文本变为蓝色，p标签的文本变为红色，并增加了字体大小。

尽管内嵌CSS非常方便，但在实践中很少使用。这是因为内嵌CSS会使HTML文件变得混乱，难以维护。当网站规模逐渐扩大时，使用外部CSS文件是更好的方法。

二、外部CSS文件

外部CSS文件是将CSS代码存储在单独的文件中，然后在HTML文件中引用该文件的一种方法。

首先，您需要创建一个CSS文件并将所有CSS代码存储在该文件中。命名您的文件时，请使用.css

Bien que le CSS en ligne soit très pratique, il est rarement utilisé dans la pratique. En effet, le CSS en ligne peut rendre les fichiers HTML encombrés et difficiles à maintenir. À mesure que la taille de votre site Web augmente, l’utilisation de fichiers CSS externes constitue une meilleure approche.

2. Fichiers CSS externes

Les fichiers CSS externes sont un moyen de stocker le code CSS dans un fichier séparé, puis de référencer le fichier dans le fichier HTML.

Tout d'abord, vous devez créer un fichier CSS et stocker tout le code CSS dans ce fichier. Lorsque vous nommez votre fichier, utilisez .css comme extension de fichier. Lors de la création de fichiers CSS, vous devez vous assurer que le code que vous écrivez est bien structuré. Voici un exemple : 

/* styles.css */
h1 {
  color: blue;
}
p {
  color: red;
  font-size: 20px;
}

Ensuite, liez le fichier CSS au fichier HTML dans le fichier HTML. Ajoutez une balise de lien à l'intérieur de la balise head, l'attribut rel de la balise doit être une feuille de style et l'attribut href doit pointer vers votre fichier CSS. Voici un exemple : 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Dans cet exemple, nous utilisons la balise link pour associer le fichier HTML au fichier CSS. Dans la balise head, nous avons ajouté une balise de lien et défini l'attribut rel sur "stylesheet" et l'attribut href sur le chemin de notre fichier CSS. Cela appliquera le style CSS à tous les éléments pertinents du fichier HTML.

3. Inline CSS

Inline CSS est une méthode permettant d'appliquer du code CSS directement aux éléments HTML. Pour utiliser le CSS en ligne, vous devez écrire le code CSS dans l'attribut style de l'élément HTML. Voici un exemple : 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;font-size:20px;">This is a paragraph.</p>

</body>
</html>

Dans cet exemple, nous utilisons l'attribut style pour appliquer du CSS en ligne directement aux éléments h1 et p. Comme le CSS en ligne, le CSS en ligne est moins couramment utilisé, mais il peut être utilisé pour ajouter rapidement des styles.

4. Utilisez @import

@import est une autre façon de connecter des fichiers CSS. Cela fonctionne en important un fichier CSS dans un autre fichier CSS. Voici un exemple : 

/* styles.css */
@import url("small-styles.css") screen and (max-width: 600px);

h1 {
  color: blue;
}
p {
  color: red;
}

/* small-styles.css */
p {
  font-size: 20px;
}

Dans cet exemple, nous créons un fichier CSS principal et un fichier CSS plus petit et les importons en utilisant @import.

Lorsque les navigateurs chargent des fichiers CSS, ils chargent d'abord le fichier principal, puis les fichiers plus petits. Les petits fichiers n'appliquent des styles qu'aux navigateurs dotés d'écrans de moins de 600 pixels de large.

L'avantage d'utiliser @import est que cela peut aider à organiser le code et à réduire la taille du fichier. Cependant, en pratique, les navigateurs modernes peuvent gérer des fichiers CSS contenant de nombreux fichiers, donc @import n'est pas nécessaire. #🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜# La connexion CSS est une étape cruciale dans la création d'un beau site Web. Dans le CSS en ligne, l'intégration du code CSS directement dans le fichier HTML peut rendre le style plus simple et plus clair. L'utilisation de fichiers CSS externes peut faciliter la maintenance des fichiers HTML et séparer les parties du code de style du document HTML. Bien que les méthodes CSS et @import en ligne soient rarement utilisées, elles peuvent néanmoins être utiles dans certaines situations. #🎜🎜##🎜🎜#Quoi qu'il en soit, apprendre à connecter CSS est la base de la conception Web. J'espère que cet article vous a aidé à mieux comprendre les différentes manières de connecter 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!

css html href 样式表
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：CSS pour implémenter le masquageArticle suivant：CSS pour implémenter le masquage

Articles Liés

Voir plus