CSS est un langage de feuille de style utilisé pour embellir les pages HTML. Cependant, avant de pouvoir appliquer CSS à une page Web, nous devons indiquer à la page Web où trouver la feuille de style correspondante. Discutons de l'endroit où CSS devrait être placé le plus correctement.
- Mettez le CSS dans un fichier séparé
La meilleure façon est de mettre le code CSS dans un fichier séparé. Cela présente de nombreux avantages, notamment une meilleure maintenabilité, des chargements de pages plus rapides et une meilleure évolutivité. En séparant les fichiers CSS des fichiers HTML, nous pouvons accélérer le traitement CSS et garantir que ces feuilles de style peuvent être utilisées sur un certain nombre de pages Web différentes sans avoir à passer beaucoup de temps à réécrire le code des feuilles de style.
- Le CSS doit être placé dans l'élément
C'est une bonne pratique de placer le CSS dans l'élément
Lorsqu'un navigateur rencontre un document HTML, il analyse d'abord la partie d'en-tête du document, qui comprend des éléments tels que et
. Ce processus se produit généralement avant l'affichage de la page. </p>
<ol start="3"><li>Vous pouvez mettre du CSS à la fin de la balise <body> </li></ol>
<p>Il est également courant de placer les fichiers CSS à la fin de la balise <body> Cette approche garantit que le contenu HTML est affiché avant le chargement du fichier CSS. Puisque le fichier CSS est le dernier fichier chargé dans ce cas, cette approche peut réduire le temps de chargement des pages. </p>
<ol start="4"><li>Lien vers des fichiers CSS externes</li></ol>
<p>Un autre avantage de placer le fichier CSS en dehors du fichier HTML est qu'il peut être partagé avec d'autres pages Web. Nous pouvons utiliser des balises de lien pour lier des fichiers CSS externes dans des documents HTML, permettant ainsi aux pages HTML de réutiliser la même feuille de style. </p>
<ol start="5"><li>Placer le code CSS dans les balises <style></li></ol>
<p> L'intégration du code CSS dans les balises <style> Cette approche est idéale pour les petits sites Web ou les applications d'une seule page. La balise <style> doit être placée dans la balise <head> afin que les styles soient chargés le plus tôt possible. </p>
<p>Pour résumer, on peut mettre le CSS dans un fichier séparé et le lier à la page HTML via la balise link. En parallèle, on peut placer le CSS dans la balise <head> en tête du HTML, ou en bas de la balise <body> Si vous créez un petit site Web ou une application d'une seule page, l'intégration de code CSS dans la balise <style> Quelle que soit la méthode que vous choisissez, vous devez vous assurer que votre code est clair, compréhensible et facile à maintenir. </p><p>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!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="CSS3 ne s'ouvre pas" href="http://m.php.cn/fr/faq/552334.html">CSS3 ne s'ouvre pas</a></span><span>Article suivant：<a class="dBlack" title="CSS3 ne s'ouvre pas" href="http://m.php.cn/fr/faq/552336.html">CSS3 ne s'ouvre pas</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/402895.html" title="Problème de transmission de la valeur du composant parent aux graphiques du composant enfant dans Vue" class="aBlack">Problème de transmission de la valeur du composant parent aux graphiques du composant enfant dans Vue</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/402896.html" title="Quelques réflexions sur React cette liaison" class="aBlack">Quelques réflexions sur React cette liaison</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/402897.html" title="Django utilise la requête pour obtenir les paramètres envoyés par le navigateur" class="aBlack">Django utilise la requête pour obtenir les paramètres envoyés par le navigateur</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/402898.html" title="Opération DOM dans JQuery - wrap" class="aBlack">Opération DOM dans JQuery - wrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/402899.html" title="Explication du contenu associé du prototype et de la chaîne de prototypes" class="aBlack">Explication du contenu associé du prototype et de la chaîne de prototypes</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>