零基礎教你學前端-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>

</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并沒有直接的實現方式，需要“繞”點彎路，將需求拆分成很多小點，然后逐一突破。

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

CSS 如何動態累計數字？
CSS 如何知道哪些元素在容器之外？
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]

五、總結一下

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

很多時候，CSS并沒有直接的實現方式，需要“繞”點彎路
CSS計數器可以實現數字累加
CSS滾動驅動動畫可以檢測元素是否在可視范圍之內
CSS滾動驅動動畫還能檢測元素是否內容超出
計數累加器可以放在滾動驅動動畫中，這樣在動畫觸發時也就相當于計數器生效了，這樣就能統計可視區的標簽數量了
樣式查詢只能匹配到子元素，但是用子元素會受到mask遮罩的影響
負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

在線咨詢

上一篇：H5的canvas繪畫的一個簡單時鐘
下一篇：css實現的圖片列表切換輪播特效html頁面前端源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

一、CSS 實現思路

二、CSS 計數器

三、CSS 滾動驅動動畫

四、其他細節修正

五、總結一下

您的項目需求