欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

伯樂在線   發(fā)布時(shí)間：2015-08-21 18:05:34   作者：佚名   我要評論
這篇文章主要介紹了CSS中行高line-height屬性的一些使用技巧,包括為每行文本指定不同顏色和文本中間添加線時(shí)用到的一些操作方法,需要的朋友可以參考下

先來回顧一下line-height的基礎(chǔ)知識：

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

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

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

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

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

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

CSS

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

Sass

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

兩個(gè)技巧結(jié)合之后：

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

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

Sass

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

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

Sass

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

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

Sass

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

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

文字間的線

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

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

Sass

CSS Code復(fù)制內(nèi)容到剪貼板
  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是為了讓漸變會準(zhǔn)確的以已知的line-height來重復(fù)，并留出最后1px作為線。由于我們讓body的font-size為1em，也就是16px，所以line-height的單位被設(shè)置為em，你可以通過除去1em來移除單位，然后乘以16px再減1來得到我們需要的數(shù)值。

Position images one-per-line

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

Sass

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .text   
  2.   background-image: url(image.svg);   
  3.   background-size: $lh $lh;   
  4.   background-repeat: repeat-y;   
  5.   padding-left: $lh*2;   
  6. }  

相關(guān)文章

  • CSS中的line-height行高屬性學(xué)習(xí)教程

    line-height對于頁面中字體的行距等排版方面的效果至關(guān)重要,這里為大家整理了CSS中的line-height行高屬性學(xué)習(xí)教程,包括line-height的各種取值設(shè)定等方面,需要的朋友可以參
    2016-06-06

  • 深入理解CSS height屬性設(shè)置元素的高度

    下面小編就為大家?guī)硪黄钊肜斫釩SS height屬性設(shè)置元素的高度。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-13

  • CSS中的line-height行高屬性的使用技巧小結(jié)

    這篇文章主要介紹了CSS中的line-height屬性的使用技巧,文中同時(shí)給出了line-height使用中經(jīng)常出現(xiàn)的文字重疊問題的解決方法,需要的朋友可以參考下
    2016-02-02

  • css line-height屬性的使用技巧

    本文介紹下，css中的line-height屬性的用法，通過實(shí)例學(xué)習(xí)css line-height屬性的具體用法，感興趣的朋友參考下
    2014-08-02

  • css屬性行高line-height的用法詳解

    本文介紹下css中的line-height屬性的用法，通過實(shí)例學(xué)習(xí)css line-height屬性的具體用法，感興趣的朋友參考下
    2014-08-02

  • css height屬性中的calc方法詳解

    大家都知道Calc方法有個(gè)很大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度，本文通過一個(gè)例子給大家詳細(xì)介紹，需要的朋友參考下吧
    2021-06-03

最新評論