整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          零基礎教你學前端-61、CSS文本顏色和大小寫轉化

          SS有很多用于格式化文本的屬性。比如,文本的顏色、大小寫轉化、對齊方式、文本間距、文本裝飾等等。(此時會同時演示幾個案例)

          首先,我們來介紹 CSS 如何為文本添加顏色。

          通過聲明 color 屬性 來設置文本的顏色,值可以是顏色名稱、十六進制顏色值、RGB顏色值。(此處用代碼來演示)

          這幾個顏色值是不是感覺很熟悉?沒錯,我們在前面給HTML元素定義過color屬性,值就是這三個。你還記得在哪一節講過嗎?可以彈幕告訴大家!

          我們來做個例子。

          打開編輯器,創建一個 005-css-text 文件夾,在文件夾里創建一個 text.html 文件,創建基礎代碼,添加 h1 元素,填入一些文本。再添加一個 p 標簽,填入一些文本。

          再創建一個 mystyle-1.css 文件,定義 body 元素選擇器,聲明樣式 color: blue。在頁面里引用它,路徑為當前目錄下的 mystyle-1.css 文。./mystyle-1.css)。

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>CSS Text</title>

          <link rel="stylesheet" href="./mystyle-1.css">

          </head>

          <body>

          <h1>浠浠呀老師,學前端的大專生就業難嗎?</h1>

          <p>

          不難,只要你能力過關、項目經驗過關、人品過關,企業就會錄用你。你可以在面試的時候,著重介紹一下你的開發能力、技術能力以及你對技術理解,讓別人挑不出毛病,那學歷這塊是可以自動忽略的。我在面試別人的時候也是這樣,如果這個人的技術能力和過往經驗真的征服了我,我不是很在他乎他的學歷。

          </p>

          </body>

          </html>

          這里說明一下:一個頁面的默認文本顏色是在 body 選擇器中定義的。

          body {

          /* 一個頁面的默認文本顏色是在body選擇器中定義的。 */

          color: blue;

          }

          細心的小伙伴發現了,這里添加的是注釋嗎?沒錯,和 html 注釋一樣,它是用來解釋CSS 代碼的,瀏覽器會忽略注釋。CSS注釋以 /* (讀作:斜杠 星號) 開始,以 */ (讀作:星號 斜杠)結束,里面編寫注釋內容。注釋一般放到一組樣式定義的前面,或者放在單個樣式聲明的后面,中間可以換行。

          在瀏覽器里查看頁面效果,文本全部為藍色。

          在 mystyle-1.css 里再定義一個 h1 選擇器,聲明樣式 color: green。

          再來看效果,標題變為了綠色,段落還是藍色。

          接下來,我們介紹 CSS 如何強制轉換文本中,單詞和字母的大寫和小寫。

          使用 text-transform 屬性來實現這個功能,它的值有三個:

          uppercase:文本被轉換為大寫。

          lower case:文本被轉換為小寫。

          capitalize [?k?p?t?la?z]:每個單詞的首字母被轉換為大寫。

          這個屬性主要用來設置英文的文本,對中文無效。

          回到編輯器,我們再創建一個段落,填入答案的英文版。

          <body>

          <h1>浠浠呀老師,學前端的大專生就業難嗎?</h1>

          <p>

          不難,只要你能力過關、項目經驗過關、人品過關,企業就會錄用你。你可以在面試的時候,著重介紹一下你的開發能力、技術能力以及你對技術理解,讓別人挑不出毛病,那學歷這塊是可以自動忽略的。我在面試別人的時候也是這樣,如果這個人的技術能力和過往經驗真的征服了我,我不是很在他乎他的學歷。

          </p>

          <p>

          It's not difficult, as long as you are competent, have project experience and are a good person, companies will hire you. You can focus on your development skills, technical skills and your understanding of technology during the interview so that no one can pick a fault, then the education piece can be automatically ignored. I do the same thing when interviewing people, if the person's technical skills and past experience really conquered me, I am not very in him about his education.

          </p>

          </body>

          給這個段落定義 class 屬性,值為 transform。

          在樣式中,定義 p.transform 選擇器,聲明樣式屬性text-transform ,值為 uppercase。

          返回瀏覽器,全部的英文為大寫字母。

          修改 text-transform 的屬性值為 lowercase。全部的英文為小寫字母。

          修改 text-transform 的屬性值為 capitalize。全部單詞的首字母大寫。

          有關 CSS 如何給文本添加顏色,以及轉換文本的大小寫,就介紹完了。

          文章配套視頻鏈接:https://www.bilibili.com/video/BV1oU4y1278g?p=61

          CSS強大的令人難以置信。

          這次我們來用 CSS 實現這樣一個功能:有多個寬度不同的標簽水平排列,當外層寬度不足時,會提示超出的數量,演示效果如下

          如果讓我用 JavaScript來實現估計都有點折騰,畢竟寬度都是動態的,要監聽各部分的尺寸變化,包括標簽的位置和外層的寬度,總之不是一兩行代碼就能搞定的。

          現如今,純CSS也能完美的實現這樣的效果,而且比 JS 實現更加簡單,一起來看看吧

          一、CSS 實現思路

          很多時候,CSS并沒有直接的實現方式,需要“繞”點彎路,將需求拆分成很多小點,然后逐一突破。

          回到本文這里,其實有幾個問題需要考慮:

          1. CSS 如何動態累計數字?
          2. CSS 如何知道哪些元素在容器之外?
          3. CSS 如何區分是否溢出(顯示數量)

          關于第3點,其實在之前這篇文章中有詳細介紹,有興趣可以回顧一下,非常有意思

          純 CSS 檢測文本是否溢出

          那么第一點,CSS有沒有什么方式可以統計數量呢?

          沒錯,相信很多小伙伴已經猜到了,就是利用 CSS計數器,示意如下

          counter-reset: num var(--num);
          counter-increment: num;
          ::after{
          	content: "+"counter(num);
          }
          

          關于計數器,我之前也在很多文章中有用到

          你可能不需要 JS!CSS實現一個計時器

          如何讓CSS計數器支持小數的動態變化?

          還在使用定時器嗎?CSS 也能實現電子時鐘

          動畫合成小技巧!CSS 實現動感的倒計時效果

          自定義計數器小技巧!CSS 實現長按點贊累積動畫

          然后是第二點,CSS有什么方式可以知道元素是出去了還是在視野之內呢?

          如果是用 JS來判斷的話,最穩妥的方式應該Intersection Observer(交叉觀察者),相信很多同學都用過,這個在圖片懶加載非常有用

          交叉觀察器 API - Web API 接口參考 | MDN (mozilla.org)[1]

          那么,CSS中有什么類似的呢?沒錯,還是之前提到過的CSS滾動驅動動畫。

          不過這里用到的是視圖進度,也就是關注的是元素自身位置,元素進入到容器范圍之內就會觸發動畫,非常類似 JS中的Intersection Observer

          tag{
            animation: appear;
            animation-timeline: view(inline);
            animation-range: contain;
          }
          @keyframes appear{
            to {
              background-color: #9747FF;
            }
          }
          

          這里就不詳細介紹了,有興趣回顧之前這篇文章

          CSS 滾動驅動動畫終于正式支持了~

          好了,關鍵原理就這些了,我們需要做的就是想辦法將「計數器」「元素進出容器范圍」關聯起來就行了,接著往下看

          二、CSS 計數器

          利用 CSS 計數器,我們可以很輕松的統計元素的數量。

          先簡單布局一下文章開頭的例子,HTML如下所示

          <div class="con">
            <a class="tag">HTML</a>
            <a class="tag">CSS</a>
            <a class="tag">JavaScript</a>
            <a class="tag">Flutter</a>
            <a class="tag">Vue</a>
            <a class="tag">React</a>
            <a class="tag">Svelte</a>
          </div>
          <span class="num"></span><!--用來計數的標簽-->
          

          然后美化一下

          .con{
            display: flex;
            gap: 5px;
            padding: 5px;
            overflow: hidden;
          }
          .tag{
            padding: .2em .5em;
            background-color: #c49ef5;
            color: #fff;
            border-radius: 4px;
            animation: appear;
          }
          .num::after{
            content: "+0";
            padding: .2em .5em;
            background-color: #FFE8A3;
            color: #191919;
            border-radius: 4px;
          }
          

          這樣就得到了水平排列的 tag 布局(超出隱藏),后面跟一個數字

          現在我們定義一個計數器,然后通過每個tag進行累計,有多個tag相當于多少次累加,最后在::after中顯示出來

          .con{
            counter-reset: num;  /*計數器初始值,默認為0*/
          }
          .tag{
            counter-increment: num; /*計數器增量值,默認為1*/
          }
          .num::after{
            content: "+"counter(num); 
          }
          

          默認計數器的起始值是 0,每次累計是1,所以這里最后得到了7,這樣就能實時統計元素的數量了

          當然,我們也可以自定義這些默認值,比如

          .con{
            counter-reset: num 10;
          }
          .tag{
            counter-increment: num -1;
          }
          
          

          這種情況下,起始值是10,增量值是-1,所以最后得到了3,如下

          那么,該如何統計容器之外的標簽數量呢?

          三、CSS 滾動驅動動畫

          這里我們要利用CSS 視圖進度時間軸,也就是觀察元素自身的位置,在進入到容器范圍之內執行動畫。

          拿上面這個例子,我們給標簽添加一個動畫,讓標簽在進入到容器之內時變個顏色,實現如下

          .tag{
            animation: appear;
            animation-timeline: view(inline);
          }
          @keyframes appear{
            to {
              background-color: #4d47ff;
            }
          }
          

          由于是水平方向,所以這里需要設置view(inline) ,效果如下

          好像不是很明顯?這是因為動畫是在整個視區內過渡的,我們可以改變動畫時間線的區間animation-range,讓這個動畫在進出的一瞬間就變化

          .tag{
            animation: appear;
            animation-timeline: view(inline);
            animation-range: contain;
          }
          @keyframes appear{
            from,to {
              background-color: #4d47ff;
            }
          }
          

          效果如下

          那么,這個效果和前面的計數器有什么關聯呢?

          從效果上來看,在視區內會執行一個動畫,如果在這個動畫中加入計數器的累加會怎么樣呢?先去除原先的累加器

          .tag{
            /* counter-increment: num; */
          }
          @keyframes appear{
            from,to {
              background-color: #4d47ff;
              counter-increment: num;
            }
          }
          

          效果如下

          可以看到計數器已經生效了,不過現在統計的在「可視區內」標簽的數量。而我們要統計的是「可視區外」的數量,好像反過來了,如何實現呢?

          這里有兩種思路。

          第一種,用總數減去可視區內的數量,不就行了嗎?由于現在動畫是針對可視區內的,我們可以給計數器設置一個初始值,就是總量,然后動畫中給累加值設置為-1,就相當于減去當前數量了,實現如下

          .con{
          	counter-reset: num 7;
          }
          @keyframes appear{
            from,to {
              background-color: #4d47ff;
              counter-increment: num -1;
            }
          }
          

          這樣就完美統計出了可視區外的數量了

          還有一種方式,我覺得更加巧妙,需要反向思考。原理是重置當前的累加值,比如默認情況下,正常累加,進入可視范圍,把累加值設置為0,不就相當于可視區外的正常累加了嗎?

          .tag{
            counter-increment: num;
          }
          @keyframes appear{
            from,to {
              background-color: #4d47ff;
              counter-increment: num 0;
            }
          }
          

          同樣能達到相同的效果

          現在基本已經達到我們需要的效果了

          四、其他細節修正

          首先是,在超出范圍時,需要在邊緣出添加一個半透明蒙層,這樣體驗效果會更好。

          半透明蒙層很好實現,只需要添加一個水平漸變的mask遮罩就行了

          .con{
            -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
          }
          

          效果如下

          那么,如何在沒有超出時,不出現這個遮罩呢?

          這個其實在之前的文章中有詳細介紹了,建議回顧一下

          純 CSS 檢測文本是否溢出

          利用CSS滾動驅動動畫,可以檢測容器是否可滾動,也就是是否超出。所以我們只需要將遮罩放在滾動驅動動畫里就行了,關鍵實現如下

          .con{
            animation: check;
            animation-timeline: scroll(x self);
          }
          @keyframes check{
            from,to {
              -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
            }
          }
          

          效果如下

          還有一個問題,希望在沒有超出的時候不顯示后面的數量。

          關于這個,我本來是打算用樣式查詢來實現,但是遇到了一個問題,由于樣式查詢只能匹配到子元素,所以不得不將顯示數量的標簽放到.con容器內。但是這樣一來,mask遮罩就會出現問題,就像這樣

          遮罩層連同數量標簽一起被裁剪了!

          于是又想出了另一種方案,這個在以前的布局中其實用到的更多,那就是負margin

          實現很簡單,給標簽容器一個的負margin-right,這樣,右邊的數量就會被左邊的標簽蓋住,比如

          .con{
            margin-right: -20px;
          }
          

          效果如下

          是不是已經被蓋住一部分了?我們繼續向左偏移

          .con{
            margin-right: -50px;
          }
          

          這樣就完全看不到右邊的數量了

          那么,如何在超出時顯示數量呢?這里就體現出負margin的好處了,可以借助前一個元素來隱藏后一個元素,在這里,我們直接在前面的動畫中還原margin就行了

          .con{
            animation: check;
            animation-timeline: scroll(x self);
          }
          @keyframes check{
            from,to {
              -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
              margin-right: 0;
            }
          }
          

          這樣就完美實現了文章開頭所示效果了

          你也可以訪問以下鏈接來體驗真實效果(Chrome115+)

          • CSS auto tag num (juejin.cn)[2]
          • CSS auto tag num (codepen.io)[3]

          五、總結一下

          以上就是本文的全部內容了,不知道你學會了嗎?下面總結一下實現重點:

          1. 很多時候,CSS并沒有直接的實現方式,需要“繞”點彎路
          2. CSS計數器可以實現數字累加
          3. CSS滾動驅動動畫可以檢測元素是否在可視范圍之內
          4. CSS滾動驅動動畫還能檢測元素是否內容超出
          5. 計數累加器可以放在滾動驅動動畫中,這樣在動畫觸發時也就相當于計數器生效了,這樣就能統計可視區的標簽數量了
          6. 樣式查詢只能匹配到子元素,但是用子元素會受到mask遮罩的影響
          7. margin可以借助前一個元素來隱藏后一個元素

          [1]交叉觀察器 API - Web API 接口參考 | MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

          [2]CSS auto tag num (juejin.cn): https://code.juejin.cn/pen/7352565668073439241

          [3]CSS auto tag num (codepen.io): https://codepen.io/xboxyan/pen/rNbYpZV



          作者:XboxYan

          來源-微信公眾號:前端偵探

          出處:https://mp.weixin.qq.com/s/_m5UxLQQtDU1GxbLRnCUhQ

          font-size:設置字體大小:

          該屬性值的單位可以使用相對單位和絕對單位,推薦使用px。(瀏覽器能夠識別的最小像素是12px)

              p{
                font-size:20px;
              }

          常見尺寸單位:



          font-family:設置字體:

          如果需要設置多個字體樣式,則屬性值可以寫多個中間用逗號隔開即可,需要知道的是瀏覽器會從第一個字體屬性值找,直到找到自己設備有的字體顯示,自己設備沒有的字體,按設備默認字體顯示,推薦系統默認字體。

          
              p{
                font-family:"微軟雅黑",Arial;
              }



          font-weight:設置字體粗細:

          其屬性值有:normal正常不加粗、bold加粗、bolder更粗、lighter更細、number(整百的數字)、inherit繼承父級元素字體粗細

          p {
            font-weight:700;
          }

          font-style:設置字體風格:

          如設置斜體、傾斜或正常字體,其屬性值:normal默認值,標準字體、italic斜體、oblique傾斜

          font:綜合設置字體樣式(字體樣式連寫):

          字體樣式連寫是有順序的,必須是嚴格遵循順序,其中不需要設置的屬性可以省略,font-size和font-family屬性值必須寫,否則字體連寫失效。

          
              p{
                /*font:font-style font-weight font-size/line-height font-family;*/
                font:italic bolder 20px/10px Arial;
              }

          提示:本文圖片等素材來源于網絡,若有侵權,請發郵件至郵箱:810665436@qq.com聯系筆者 刪除。

          筆者:苦海123

          其它問題可通過以下方式聯系本人咨詢:

          QQ:810665436

          微信:ConstancyMan


          主站蜘蛛池模板: 日本精品高清一区二区2021| 国产福利一区二区三区在线视频 | 国产精品无圣光一区二区| 亚洲一区二区三区高清不卡| 国产午夜毛片一区二区三区| 波多野结衣在线观看一区| 亚洲日韩中文字幕一区| 久久se精品动漫一区二区三区| 伊人精品视频一区二区三区| 日本高清无卡码一区二区久久| 色一乱一伦一区一直爽| 激情爆乳一区二区三区| 日韩精品国产一区| 日本精品一区二区三本中文| 成人精品视频一区二区三区尤物 | 在线视频精品一区| 色窝窝免费一区二区三区 | 中文字幕无线码一区| 久久se精品一区二区影院| 香蕉久久AⅤ一区二区三区| 无码人妻AⅤ一区二区三区水密桃 无码欧精品亚洲日韩一区夜夜嗨 无码毛片一区二区三区中文字幕 无码毛片一区二区三区视频免费播放 | 中文字幕精品一区二区2021年| 色噜噜狠狠一区二区三区| 少妇人妻精品一区二区三区| 性无码免费一区二区三区在线 | 国产福利电影一区二区三区,日韩伦理电影在线福 | 久久免费视频一区| 亚洲乱码国产一区三区| 亚洲AV综合色一区二区三区| 无码一区二区三区视频| 精品人伦一区二区三区潘金莲| 日韩最新视频一区二区三| 波多野结衣AV一区二区三区中文 | 日本一区午夜艳熟免费| 97av麻豆蜜桃一区二区| 国产精品电影一区二区三区| www一区二区三区| 一区二区在线电影| 国产主播福利精品一区二区| 岛国精品一区免费视频在线观看| 精品国产亚洲一区二区三区|