CSS中行高line-height屬性的使用技巧有哪些-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)CSS中行高line-height屬性的使用技巧有哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

成都創(chuàng)新互聯(lián)：從2013年成立為各行業(yè)開(kāi)拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為成百上千家公司企業(yè)提供了專業(yè)的成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 定制網(wǎng)站開(kāi)發(fā)由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺(jué)效果，策劃師分析客戶的同行競(jìng)爭(zhēng)對(duì)手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

先來(lái)回顧一下line-height的基礎(chǔ)知識(shí)：

語(yǔ)法： line-height : normal | <實(shí)數(shù)> | <長(zhǎng)度> | <百分比> | inherit
說(shuō)明： 設(shè)置元素中行的高度。
值： normal：默認(rèn)行高，一般為1到1.2； 實(shí)數(shù)：實(shí)數(shù)值，縮放因子； 長(zhǎng)度：合法的長(zhǎng)度值，可為負(fù)數(shù)； 百分比：百分比取值基于元素的字體尺寸。
初始值： normal
繼承性： 繼承
適用于： 所有元素
媒體： 視覺(jué)
計(jì)算值： 長(zhǎng)度和百分比值為絕對(duì)值；其他同指定值。

CSS中的line-height屬性控制著兩行文本之間的空白多少，通常是會(huì)設(shè)置成一個(gè)無(wú)單位數(shù)值（比如line-height:1.4），表明其與font-size屬性所構(gòu)成的比例。line-height在排版上是非常重要的一個(gè)屬性，太低的話，文字的行與行之間會(huì)尷尬地?cái)D在一起，太高的話它們又會(huì)尷尬地分的太開(kāi)，無(wú)論哪一種都對(duì)閱讀不利。不過(guò)你也許早就知道這一點(diǎn)了。

這篇文章中我們會(huì)著重介紹一些技巧，如果你知道（或者能搞清楚）line-height的確切值，你可以做得更有趣 。

為每一行文本指定不同顏色

不幸的是，我們并沒(méi)有::nth-line這個(gè)選擇器。我們也不能指望<span>會(huì)靠得住，數(shù)不清的原因可能導(dǎo)致文本在某處被斷開(kāi)。

有一個(gè)辦法，雖然不標(biāo)準(zhǔn)，就是利用元素的背景來(lái)充當(dāng)文字的背景。

CSS

也有另一個(gè)技巧，你可以用linear-gradient()加上色彩點(diǎn)來(lái)控制顏色之間不會(huì)互相漸變，讓一個(gè)顏色結(jié)束之后突然開(kāi)始另一個(gè)顏色。我們假設(shè)line-height的值為22px，那我們就可以讓漸變每逢22px斷開(kāi)一次。

Sass

  1. .text {

  2.   background-image: linear-gradient(

  3.     to bottombottom,

  4.     #9588DD,

  5.     #9588DD 22px,

  6.     #DD88C8 22px,

  7.     #DD88C8 44px,

  8.     #D3DD88 44px,

  9.     #D3DD88 66px,

  10.     #88B0DD 66px,

  11.     #88B0DD)

  12. }

CSS中行高line-height屬性的使用技巧有哪些

兩個(gè)技巧結(jié)合之后：
CSS中行高line-height屬性的使用技巧有哪些

如果你的瀏覽器不支持text的background-clip，比如Firefox，那你就會(huì)看到位于文字背后的色彩長(zhǎng)條，可能你會(huì)覺(jué)得這樣看起來(lái)很酷甚至?xí)芟矚g，但或許你寧可回到設(shè)置文字顏色的老路上來(lái)。如果是后者的話，你可以用@support來(lái)設(shè)置成：如果瀏覽器支持，css才生效。

另外，既然你反復(fù)的在利用line-height的值，說(shuō)不定把他變成變量比較好。在這里我用SCSS，不過(guò)哪天可以使用真正的CSS變量那就真的太棒了，這樣在頁(yè)面渲染完還可以繼續(xù)修改，并且看著它生效。

Sass

  1. $lh: 1.4em;

  2.  

  3. body {

  4.   font-size: 1em;

  5.   line-height: $lh;

  6. }

  7.  

  8. @supports (-webkit-background-clip: text) {

  9.   p {

  10.     -webkit-background-clip: text;

  11.     -webkit-text-fill-color: transparent;

  12.     background-image: linear-gradient(

  13.       to bottombottom,

  14.       #9588DD,

  15.       #9588DD $lh,

  16.       #DD88C8 $lh,

  17.       #DD88C8 $lh*2,

  18.       #D3DD88 $lh*2,

  19.       #D3DD88 $lh*3,

  20.       #88B0DD $lh*3,

  21.       #88B0DD);

  22.   }

  23. }

最簡(jiǎn)單的辦法是在最上層的元素中應(yīng)用這些屬性，這里有個(gè)樣例，它的最初幾行是重點(diǎn)。

Sass

  1. .text {

  2.   -webkit-background-clip: text;

  3.   -webkit-text-fill-color: transparent;

  4.   background-image: linear-gradient(

  5.     to bottombottom,

  6.     rgba(white, 0.8),

  7.     rgba(white, 0.8) $lh,

  8.     rgba(white, 0.6) $lh,

  9.     rgba(white, 0.6) $lh*2,

  10.     rgba(white, 0.4) $lh*2,

  11.     rgba(white, 0.4) $lh*3,

  12.     rgba(white, 0.2) $lh*3,

  13.     rgba(white, 0.2));

  14. }

CSS中行高line-height屬性的使用技巧有哪些

如果我們要操控到最末任意行，這將會(huì)更難。這樣的話，我們就需要色帶從頭開(kāi)始一路往下，直到倒數(shù)的幾行，幸運(yùn)的是我們可以用calc()來(lái)實(shí)現(xiàn)。

Sass

  1. .text {

  2.   -webkit-background-clip: text;

  3.   -webkit-text-fill-color: transparent;

  4.   background-image: linear-gradient(

  5.     to bottombottom,

  6.     rgba(white, 0.8),

  7.     rgba(white, 0.8) calc(100% - 66px),

  8.     rgba(white, 0.6) calc(100% - 66px),

  9.     rgba(white, 0.6) calc(100% - 44px),

  10.     rgba(white, 0.4) calc(100% - 44px),

  11.     rgba(white, 0.4) calc(100% - 22px),

  12.     rgba(white, 0.2) calc(100% - 22px),

  13.     rgba(white, 0.2));

  14.   background-position: bottombottom center;

  15. }

CSS中行高line-height屬性的使用技巧有哪些

也有其他辦法可以實(shí)現(xiàn)這種效果，比如疊加一層偽元素漸變，并設(shè)置pointer-events:none，以免形成干擾。

文字間的線

我們上面介紹了如何控制漸變色彩點(diǎn)，如果用相似的辦法，我們可以創(chuàng)建以1px為單位的漸變，并重復(fù)直到達(dá)到line-height。最簡(jiǎn)單的辦法是使用

repeating-linear-gradient來(lái)實(shí)現(xiàn)，同時(shí)也要保證其他元素乖乖就位（比如padding也是基于line-height）。

Sass

  1. .parent {

  2.   padding: $lh*2;

  3.   background: #082838;

  4.   background-image: repeating-linear-gradient(

  5.     to bottombottom,

  6.     rgba(white, 0)   0,

  7.     rgba(white, 0)   $lh/1em*16px-1,

  8.     rgba(white, 0.1) $lh/1em*16px-1,

  9.     rgba(white, 0.1) $lh/1em*16px

  10.   );

  11. }

為了創(chuàng)造1px的線，我們需要知道line-height以像素為單位的值，然后減1。減1是為了讓漸變會(huì)準(zhǔn)確的以已知的line-height來(lái)重復(fù)，并留出最后1px作為線。由于我們讓body的font-size為1em，也就是16px，所以line-height的單位被設(shè)置為em，你可以通過(guò)除去1em來(lái)移除單位，然后乘以16px再減1來(lái)得到我們需要的數(shù)值。
CSS中行高line-height屬性的使用技巧有哪些

Position images one-per-line

還有一件知道line-height你可以做的事就是，讓bakcground-size與其匹配，至少在垂直方向上要匹配。然后你就可以讓背景垂直重復(fù)，最終效果就是：一行一個(gè)圖片。

Sass

  1. .text

  2.   background-image: url(image.svg);

  3.   background-size: $lh $lh;

  4.   background-repeat: repeat-y;

  5.   padding-left: $lh*2;

  6. }

CSS中行高line-height屬性的使用技巧有哪些

關(guān)于CSS中行高line-height屬性的使用技巧有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：CSS中行高line-height屬性的使用技巧有哪些-創(chuàng)新互聯(lián)
本文URL：http://muchs.cn/article32/djjesc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、網(wǎng)站營(yíng)銷、定制開(kāi)發(fā)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)