css中text-emphasis屬性有什么用

這篇文章主要為大家展示了“css中text-emphasis屬性有什么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中text-emphasis屬性有什么用”這篇文章吧。

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、儋州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為儋州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

就一般而言，我們所做的頁面并非對(duì)于文學(xué)類用戶，因此也不太可能會(huì)接觸到“著重號(hào)”這個(gè)符號(hào)。如果對(duì)于 word 不陌生的朋友應(yīng)該會(huì)知道在 word 中有一個(gè)文本設(shè)置，就是設(shè)置“著重號(hào)”的。

電腦中沒有 word，就從百度上搜了一張，反正呢，大概就是這個(gè)效果了。

那么本文要說的 CSS 屬性也就是這個(gè)“著重號(hào)”的屬性，我們可以通過 text-emphasis 屬性設(shè)置文本“著重號(hào)”樣式。這是 text-emphasis-color 和 text-emphasis-style 這兩個(gè)屬性的簡(jiǎn)寫方式，也就是說，我們可以通過 text-emphasis 同時(shí)設(shè)定“著重號(hào)”字符樣式以及顏色，比如：

p {
    -webkit-text-emphasis: dot red;
    text-emphasis: dot red;
}

至于在 word 中看到的是不是這樣的效果，這個(gè)我也不知道了，反正呢，在 web 頁面中，我們所看到的著重號(hào)不僅可以修改字符樣式以及顏色，還可以修改大小和位置。

• text-emphasis-style 有好幾個(gè)屬性值，并且也可以輸入任意字符；

• text-emphasis-color 則可以使用常規(guī)的 web 中使用的顏色值，rgba()、rgb()什么的都可以；

而如果想要調(diào)整位置的話，那么就是要額外一個(gè)屬性 text-emphasis-position，雖然看著這個(gè)屬性跟 style 和 color 很相近，但并不是 text-emphasis 簡(jiǎn)寫中的一個(gè)。那么對(duì)于 text-emphasis-position 在常規(guī)的情況下，我們能控制的位置是上以及下這兩個(gè)方向，也就是：

• text-emphasis-position: over;

• text-emphasis-position: under;

如想要了解更多的話，可以翻閱一下 MDN 中的具體介紹，這里不贅述。那么按照上面說的，我們把 CSS 部分修改一下，就像這樣：

p {
    -webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
}

看著是不是很像文本的下劃線 text-decoration: underline; 的效果呢？那我們?cè)僭黾右粭l這個(gè)屬性看看效果。

p {
    -webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
    text-decoration: underline;
}

這兩個(gè)是不同的屬性，差異必定也是有的。具體就不細(xì)化，主要的差異通過文檔也是可以看到。這里需要提一下的是，text-decoration 屬性值如果父級(jí)設(shè)定了 underline 樣式，那么子級(jí)設(shè)定 overline，兩個(gè)線條樣式是會(huì)存在，就算是更換了 text-decoration-style 值也是如此。

而 text-emphasis 當(dāng)我們改變了其中的屬性值之后，結(jié)果也就不同。同時(shí)，如果我們未設(shè)定顏色值的話，“著重號(hào)”的顏色將會(huì)繼承元素自身的文本顏色。因?yàn)榭梢栽O(shè)定顏色值，所以我們同樣可以使用 transparent 直接設(shè)置元素為透明。

提到繼承，這里需要注意一個(gè)點(diǎn)，“著重號(hào)”的文本大小差不多是正常文本的一半左右。

回顧一下前面提到的幾個(gè)點(diǎn)：

• 可以輸入任意字符；

• 如未設(shè)定顏色將繼承元素自身的 color 值，也可以設(shè)置為透明；

• “著重號(hào)”的大小是正常文本的一半左右；

結(jié)合這幾個(gè)點(diǎn)，我們可以這樣玩一下。

這里有一些地方是沒有“著重號(hào)”，有一些是空白的或者特殊字符，部分是隨便輸入，部分是故意而為之。主要是想看看在一些特殊字符情況下，“著重號(hào)”的顯示情況。

• 只會(huì)顯示一個(gè)字符，無論該字符是全角還是半角字符，甚至是 emoji 特殊字符；

• 只在可見文本字符上展示“著重號(hào)”；

那么這個(gè)效果的代碼就是：

<p>文本內(nèi)容，<span>一個(gè) span 元素</span><em>是　em&nbsp;&yen;&#67;元素哦</em>，啊啊啊……</p>

那么這篇內(nèi)容就到這？不，還有一個(gè)東西我想說一下。從上面的效果圖中可以看到，“著重號(hào)”是在文本下面或者上面的，那么對(duì)于一個(gè)正常的文本來說，行高（line-height）相信大家不會(huì)陌生。那么在有“著重號(hào)”的部分，加上 line-height 后會(huì)是怎么樣的效果呢？

line-height: 20px; 加到 p 中之后，并未看到任何變化；而如果把 20px 換成 60px，有變化了，高度撐開了一丟丟；那再加大點(diǎn)，撐開了，“著重號(hào)”緊隨著文本隔開了上下行內(nèi)容。

突發(fā)奇想，當(dāng) line-height 的值比較小的時(shí)候，并未看到效果，正常情況下，沒有 text-emphasis 時(shí)，比較小的 line-height 會(huì)讓多行內(nèi)容重疊，就像這樣：

可現(xiàn)在有了 text-emphasis 后，并不會(huì)重疊了，看來是直接影響了 line-height 最小值的情況，必須保證多行之間的高度值在某個(gè)特定值，看著似乎是 1em 左右的大小，以便于放得下比文字正常 font-size 小一半的，且要與文本內(nèi)容保持一定間距的“著重號(hào)”。

回到「冷門的 text-emphasis有什么用呢？」這個(gè)話題上。是啊，有什么用呢，除了正常表示某部分的文字內(nèi)容是著重標(biāo)記的以外，似乎也感受不到有什么用了。除非就是我們重復(fù)利用這個(gè)“著重號(hào)”的特性來玩，尤其是會(huì)撐開 line-height，以保證最少有 1em 左右的空間存在于多行之間。那么如果我們使用一個(gè)透明顏色的“著重號(hào)”，是不是代表著這部分文字的永遠(yuǎn)都不會(huì)疊加呢？

然后再結(jié)合 emoji 或者上下錯(cuò)亂的組合，會(huì)不會(huì)玩出不一樣的天空呢？

回頭想想啊，一個(gè)好好的“著重號(hào)”，還是讓它做自己的事情，用來標(biāo)注文本著重說明吧，還是不玩了。

以上是“css中text-emphasis屬性有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：css中text-emphasis屬性有什么用
路徑分享：http://muchs.cn/article22/igeejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、App開發(fā)、品牌網(wǎng)站制作、企業(yè)建站、App設(shè)計(jì)、虛擬主機(jī)

廣告

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