如何在 React 中運(yùn)用 CSS
3 回答
烙印99
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超13個(gè)贊
CSS和網(wǎng)頁(yè)分離的好處是顯而易見的？那要看在什么時(shí)代。
從傳統(tǒng) HTML 的觀點(diǎn)來看，“內(nèi)容”（HTML）和其渲染方式 (CSS)是可以分離的，例如同樣的文章可以被CSS渲染到不同的設(shè)備上，例如PC、手機(jī)甚至是給視覺障礙的人用的聲音設(shè)備?；趦?nèi)容傳播，這樣分隔就是合理的。
而
今天，Web已經(jīng)從相互連接的HTML變成了相互連接的 Web App。用戶看到的已經(jīng)不再是整個(gè)
HTML，而是由一個(gè)一個(gè)Web組件組成的應(yīng)用程序窗口。此時(shí)，CSS的全局性帶來的就不是方便，而可能是污染了。為了解決這個(gè)問題，Web
Component 不得不帶來了 Shadow DOM 的新概念。
React Component是適應(yīng) Web App
化的，因此很自然，inline style 的作用自然就會(huì)被加強(qiáng)。在需要全局 CSS 的時(shí)候，你仍然可以通過為 React Component
設(shè)置 className 屬性，來制定對(duì)應(yīng)的 CSS Class。
Inline style也有一些限制，只能通過 CSS 聲明（className）來實(shí)現(xiàn)，例如聲明偽類屬性 (a:visited)。
慕尼黑5688855
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊
<html>
<head>
<meta charset="utf-8">
<title>exp</title>
<style>
p{
background-image:url(寫你的圖片url);
}
</style>
</head>
<body>
<p id="p"></p>
<a href="javascript:void(0);" onclick="hideImg()">點(diǎn)擊我隱藏</a>
<a href="javascript:void(0);" onclick="showImg()">點(diǎn)擊我顯示</a>
<a href=" 任意一個(gè)網(wǎng)站">網(wǎng)站名</a>
</body>
</html>
<script>
function hideImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "";
}
function showImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "url(寫你的圖片url)";
}
</script>
添加回答
舉報(bào)
0/150
提交
取消