CSS ialah bahasa helaian gaya yang digunakan untuk mencantikkan halaman HTML. Walau bagaimanapun, sebelum kita boleh menggunakan CSS pada halaman web, kita perlu memberitahu halaman web di mana untuk mencari helaian gaya yang sepadan. Mari kita bincangkan di mana CSS harus diletakkan paling sesuai.
- Letakkan CSS dalam fail berasingan
Cara terbaik ialah meletakkan kod CSS dalam fail berasingan. Terdapat banyak faedah untuk melakukan ini, termasuk kebolehselenggaraan yang lebih baik, pemuatan halaman yang lebih pantas dan kebolehskalaan yang lebih baik. Dengan mengasingkan fail CSS daripada fail HTML, kami boleh membuat pemprosesan CSS lebih pantas dan memastikan bahawa helaian gaya ini boleh digunakan pada beberapa halaman web yang berbeza tanpa perlu menghabiskan banyak masa untuk menulis semula kod helaian gaya.
- CSS hendaklah diletakkan di dalam
Adalah amalan yang baik untuk meletakkan CSS di dalam elemen
Apabila penyemak imbas menemui dokumen HTML, ia akan menghuraikan bahagian kepala dokumen terlebih dahulu, yang merangkumi elemen seperti dan
. Proses ini biasanya berlaku sebelum halaman dipaparkan. </p>
<ol start="3"><li>Anda boleh meletakkan CSS di hujung <body> </li></ol>
<p>Meletakkan fail CSS di hujung teg <body> Pendekatan ini memastikan bahawa kandungan HTML dipaparkan sebelum fail CSS dimuatkan. Memandangkan fail CSS ialah fail terakhir yang dimuatkan dalam kes ini, pendekatan ini boleh mengurangkan masa memuatkan halaman. </p>
<ol start="4"><li>Pautan ke fail CSS luaran </li></ol>
<p>Faedah lain meletakkan fail CSS di luar fail HTML ialah ia boleh dikongsi dengan halaman web lain. Kami boleh menggunakan tag pautan untuk memautkan fail CSS luaran ke dalam dokumen HTML, membenarkan halaman HTML menggunakan semula lembaran gaya yang sama. </p>
<ol start="5"><li>Meletakkan kod CSS dalam teg <style> Pendekatan ini sesuai untuk tapak web kecil atau aplikasi satu halaman. Teg <style> hendaklah diletakkan di dalam <head> supaya gaya dimuatkan seawal mungkin. </li></ol>Ringkasnya, kita boleh meletakkan CSS dalam fail berasingan dan memautkannya ke halaman HTML melalui teg pautan. Pada masa yang sama, kita boleh meletakkan CSS dalam teg <head> di kepala HTML, atau di bahagian bawah teg <body> Jika anda membuat tapak web kecil atau aplikasi satu halaman, membenamkan kod CSS dalam teg <style> Mana-mana kaedah yang anda pilih, anda harus memastikan kod anda jelas, mudah difahami dan mudah diselenggara. <p></p><p>Atas ialah kandungan terperinci Di mana untuk meletakkan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="css3 tidak dibuka" href="https://m.php.cn/ms/faq/552334.html">css3 tidak dibuka</a></span><span>Artikel seterusnya：<a class="dBlack" title="css3 tidak dibuka" href="https://m.php.cn/ms/faq/552336.html">css3 tidak dibuka</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/528419.html" title="Adakah jed nodejs halaman statik?" class="aBlack">Adakah jed nodejs halaman statik?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/529015.html" title="Apakah yang perlu saya lakukan jika Vue tidak dapat memaparkan latar belakang imej?" class="aBlack">Apakah yang perlu saya lakukan jika Vue tidak dapat memaparkan latar belakang imej?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/532016.html" title="Cara pelayar menghuraikan javascript" class="aBlack">Cara pelayar menghuraikan javascript</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/533468.html" title="nodejs menghantar pengepala permintaan https" class="aBlack">nodejs menghantar pengepala permintaan https</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/536310.html" title="Bagaimana untuk memanggil nodejs di hujung hadapan" class="aBlack">Bagaimana untuk memanggil nodejs di hujung hadapan</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><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><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
