Maison >interface Web >tutoriel CSS >Partagez quatre façons d'importer des styles CSS dans HTML
Partagez quatre façons d'importer des styles CSS dans HTML
- yuliaoriginal
- 2018-09-17 10:46:165319parcourir
Lors de la mise en page d'une page, CSS et HTML seront inévitablement utilisés, car HTML est le contenu principal de la page, CSS est la performance de la page et, en termes simples, CSS est utilisé pour décorer le HTML. Alors comment implémenter les styles CSS en HTML ? À ce stade, vous devez introduire les fichiers CSS dans HTML Aujourd'hui, je vais vous parler de comment importer du CSS dans HTML Vous pouvez vous y référer si vous en avez besoin.
Il existe quatre façons d'importer du CSS dans HTML, à savoir les styles en ligne, intégrés et externes. Les styles externes sont divisés en style d’importation et style de lien.
1. Inline , c'est-à-dire ajoutez le style CSS directement à la balise HTML et utilisez le style pour l'ajouter.
Par exemple : définissez la police dans le div sur 40px et la couleur sur rouge. Le code est le suivant :
<div style="font-size: 40px;color: red;">今天星期一</div>
Rendu :
2. Embedded , c'est-à-dire que le style CSS est écrit dans le , puis placez le style entre
.Par exemple : écrivez le style dans
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{font-size: 40px;color: orange;}
</style>
</head>
<body>
<div>今天星期二</div>
</body>
</html>Rendu :
3. Styles externes (les styles externes sont divisés en styles d'importation. , type de lien de lien)
Le style externe consiste à écrire le code de style CSS dans un fichier externe séparé a une extension ".css", puis à l'introduire dans le code HTML requis. Les méthodes d'introduction d'importation et de lien sont différentes, et elles seront présentées une par une ensuite.
1. Importez , c'est-à-dire utilisez l'URL @import dans .
Par exemple : utilisez import pour définir la police du div sur 40px et la couleur sur jaune. Le code est le suivant :
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/import.css");
</style>
</head>
<body>
<div>今天星期三</div>
</body>Rendu :
2. Type de lien , c'est-à-dire dans
Ajoutez pour appeler des fichiers CSS externes pour obtenir des effets de style.Par exemple : utilisez un lien de style externe pour définir la couleur du div sur vert et la police sur 40 px. Le code est le suivant :
<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div>今天星期三</div> </body> </html>
Rendu :
Résumé :
1. Le style en ligne est fastidieux, peu pratique à rechercher et ne reflète pas les avantages du CSS, il n'est donc pas recommandé.
2. Embedded n'est pas recommandé pour les grandes pages, mais peut être utilisé pour les petites pages Web avec peu de styles.
3. C'est aussi un style externe Quelle est la différence entre le style d'importation et le style de lien ? En utilisant le type de lien, le fichier de style CSS sera chargé avant le chargement du contenu principal de la page, de sorte que la page Web que l'utilisateur voit aura un effet de style dès le début. Si vous utilisez le type d'importation, le fichier de style CSS sera chargé une fois la page entière chargée, donc parfois aucun style ne sera affiché et l'effet après avoir défini le style apparaîtra après un flash. Par conséquent, du point de vue de l'expérience utilisateur, il est recommandé d'utiliser le style de lien pour introduire les styles CSS.
Ce qui précède présente 4 façons d'importer du CSS dans HTML. La méthode spécifique à utiliser dépend de la situation, mais la méthode la plus couramment utilisée est la méthode des liens. Les amis qui apprennent peuvent s'entraîner davantage et essayer. ça t'aide !
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!