欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS變量var()的用法案例-創(chuàng)新互聯(lián)

小編給大家分享一下CSS變量 var()的用法案例,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供撫州網(wǎng)站建設(shè)、撫州做網(wǎng)站、撫州網(wǎng)站設(shè)計(jì)、撫州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、撫州企業(yè)網(wǎng)站模板建站服務(wù),十年撫州做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

定義和使用CSS變量

與任何其他CSS定義一樣,變量遵循相同的范圍和繼承規(guī)則。使用它們的最簡單方法是通過將聲明添加到:root偽類來使它們?nèi)挚捎茫员闼衅渌x擇器都可以繼承它。

html:

:root {
  --awesome-blue:#2196F3;
}

要訪問變量中的值,我們可以使用var(…)語法。請注意,名稱區(qū)分大小寫,因此–foo != –FOO。

.element {
background-color:var(--awesome-blue);
}

瀏覽器支持

常用的瀏覽器除了IE都完美支持,您可以在此處獲取更多詳細(xì)信息 –[我可以使用CSS變量](https://caniuse.com/#search=var())。下面是幾個(gè)例子,展示了CSS變量的典型用法。為確保它們正常工作,請嘗試在我們上面提到的其中一個(gè)瀏覽器上查看它們。

示例1 – 主題顏色

當(dāng)我們需要對多個(gè)元素一遍又一遍地應(yīng)用相同的規(guī)則時(shí),CSS中的變量是最有用的,例如主題中的重復(fù)顏色。我們不是每次想要重復(fù)使用相同顏色時(shí)進(jìn)行復(fù)制和粘貼,而是將其放在變量中并從那里訪問它。

現(xiàn)在,如果我們的客戶不喜歡我們選擇的藍(lán)色陰影,我們可以在一個(gè)地方(變量的定義)改變樣式來改變整個(gè)主題的顏色。沒有變量,我們必須手動(dòng)搜索和替換每一次出現(xiàn)。

可將代碼復(fù)制下來在你的編輯器里面測試

* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h4 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<!-- 分割線 -->:root {
--primary-color: #B1D7DC;
--accent-color: #FF3F90;
}
html {
background-color: var(--primary-color);
}
h4 {
border-bottom: 2px solid var(--primary-color);
}
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
}
<div class="container">
<h4>對話框窗口</h4>
<p>過放蕩不羈的生活,容易得像順?biāo)浦郏且Y(jié)識良朋益友,卻難如登天。</p>
<button>確認(rèn)</button>
</div>

示例2 – 屬性類名可讀性

變量的另一個(gè)重要用途是當(dāng)我們想要保存更復(fù)雜的屬性值時(shí),我們不必記住它。最好的例子就是有多個(gè)參數(shù),如CSS規(guī)則box-shadow,transform和font。

通過將屬性放在變量中,我們可以使用語義可讀的名稱來訪問它。

html{background-color: #F9F9F9;}
ul{padding: 20px;list-style: none;width: 300px;}
li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;}
<!-- 分割線 -->
:root{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
box-shadow: var(--tiny-shadow);
}
li:hover{
transform: var(--animate-right);
}
<ul>
<li>我在這里!</li>
<li>我在這里!</li>
<li>我在這里!</li>
</ul>

示例3 – 動(dòng)態(tài)更改變量

當(dāng)多次聲明自定義屬性時(shí),標(biāo)準(zhǔn)規(guī)則有助于解決沖突,樣式表中最后定義的會覆蓋上面定義的。

下面的示例演示了用戶動(dòng)態(tài)操作改變屬性是多么容易,同時(shí)仍然保持代碼清晰簡潔。

.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<!-- 分割線 -->
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
font-size: var(--main-text);
}
<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">這是個(gè)標(biāo)題</p>
<p class="content">將鼠標(biāo)懸停在不同的顏色區(qū)域上可以更改此文本和標(biāo)題的大小。</p>
</div>
</div>
</div>
[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的,CSS變量非常簡單易用,開發(fā)人員不必花費(fèi)太多時(shí)間在各處開始應(yīng)用它們。以下是擴(kuò)展內(nèi)容:
var()函數(shù)有兩個(gè)參數(shù),如果自定義屬性失敗,它可用于提供回退值:
width``: var(–custom-width, 20%``);

可以嵌套自定義屬性:

*   –base-color: #f93ce9;
*   –background-gradient: linear-gradient(to top, var(–base-color), #444);

變量可以與CSS的另一個(gè)新增功能- calc() 函數(shù)結(jié)合使用。

*   –container-width: 1000px;
*   max-width: calc(var(–container-width) / 2);

看完了這篇文章,相信你對CSS變量 var()的用法案例有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,感謝各位的閱讀!

當(dāng)前題目:CSS變量var()的用法案例-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://chinadenli.net/article2/dedgic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)Google定制網(wǎng)站電子商務(wù)企業(yè)建站網(wǎng)站導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司