零基礎(chǔ)教你學(xué)前端-61、CSS文本顏色和大小寫(xiě)轉(zhuǎn)化

SS有很多用于格式化文本的屬性。比如，文本的顏色、大小寫(xiě)轉(zhuǎn)化、對(duì)齊方式、文本間距、文本裝飾等等。（此時(shí)會(huì)同時(shí)演示幾個(gè)案例）

首先，我們來(lái)介紹 CSS 如何為文本添加顏色。

通過(guò)聲明 color 屬性來(lái)設(shè)置文本的顏色，值可以是顏色名稱、十六進(jìn)制顏色值、RGB顏色值。（此處用代碼來(lái)演示）

這幾個(gè)顏色值是不是感覺(jué)很熟悉？沒(méi)錯(cuò)，我們?cè)谇懊娼oHTML元素定義過(guò)color屬性，值就是這三個(gè)。你還記得在哪一節(jié)講過(guò)嗎？可以彈幕告訴大家！

我們來(lái)做個(gè)例子。

打開(kāi)編輯器，創(chuàng)建一個(gè) 005-css-text 文件夾，在文件夾里創(chuàng)建一個(gè) text.html 文件，創(chuàng)建基礎(chǔ)代碼，添加 h1 元素，填入一些文本。再添加一個(gè) p 標(biāo)簽，填入一些文本。

再創(chuàng)建一個(gè) mystyle-1.css 文件，定義 body 元素選擇器，聲明樣式 color: blue。在頁(yè)面里引用它，路徑為當(dāng)前目錄下的 mystyle-1.css 文。./mystyle-1.css）。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>浠浠呀老師，學(xué)前端的大專生就業(yè)難嗎？</h1>

<p>

不難，只要你能力過(guò)關(guān)、項(xiàng)目經(jīng)驗(yàn)過(guò)關(guān)、人品過(guò)關(guān)，企業(yè)就會(huì)錄用你。你可以在面試的時(shí)候，著重介紹一下你的開(kāi)發(fā)能力、技術(shù)能力以及你對(duì)技術(shù)理解，讓別人挑不出毛病，那學(xué)歷這塊是可以自動(dòng)忽略的。我在面試別人的時(shí)候也是這樣，如果這個(gè)人的技術(shù)能力和過(guò)往經(jīng)驗(yàn)真的征服了我，我不是很在他乎他的學(xué)歷。

</p>

</body>

</html>

這里說(shuō)明一下：一個(gè)頁(yè)面的默認(rèn)文本顏色是在 body 選擇器中定義的。

body {

/* 一個(gè)頁(yè)面的默認(rèn)文本顏色是在body選擇器中定義的。 */

color: blue;

}

細(xì)心的小伙伴發(fā)現(xiàn)了，這里添加的是注釋嗎？沒(méi)錯(cuò)，和 html 注釋一樣，它是用來(lái)解釋CSS 代碼的，瀏覽器會(huì)忽略注釋。CSS注釋以 /* (讀作：斜杠星號(hào)) 開(kāi)始，以 */ （讀作：星號(hào) 斜杠）結(jié)束，里面編寫(xiě)注釋內(nèi)容。注釋一般放到一組樣式定義的前面，或者放在單個(gè)樣式聲明的后面，中間可以換行。

在瀏覽器里查看頁(yè)面效果，文本全部為藍(lán)色。

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

再來(lái)看效果，標(biāo)題變?yōu)榱司G色，段落還是藍(lán)色。

接下來(lái)，我們介紹 CSS 如何強(qiáng)制轉(zhuǎn)換文本中，單詞和字母的大寫(xiě)和小寫(xiě)。

使用 text-transform 屬性來(lái)實(shí)現(xiàn)這個(gè)功能，它的值有三個(gè)：

uppercase：文本被轉(zhuǎn)換為大寫(xiě)。

lower case：文本被轉(zhuǎn)換為小寫(xiě)。

capitalize [?k?p?t?la?z]：每個(gè)單詞的首字母被轉(zhuǎn)換為大寫(xiě)。

這個(gè)屬性主要用來(lái)設(shè)置英文的文本，對(duì)中文無(wú)效。

回到編輯器，我們?cè)賱?chuàng)建一個(gè)段落，填入答案的英文版。

<body>

<h1>浠浠呀老師，學(xué)前端的大專生就業(yè)難嗎？</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>

給這個(gè)段落定義 class 屬性，值為 transform。

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

返回瀏覽器，全部的英文為大寫(xiě)字母。

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

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

有關(guān) CSS 如何給文本添加顏色，以及轉(zhuǎn)換文本的大小寫(xiě)，就介紹完了。

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

代CSS強(qiáng)大的令人難以置信。

這次我們來(lái)用 CSS 實(shí)現(xiàn)這樣一個(gè)功能：有多個(gè)寬度不同的標(biāo)簽水平排列，當(dāng)外層寬度不足時(shí)，會(huì)提示超出的數(shù)量，演示效果如下

如果讓我用 JavaScript來(lái)實(shí)現(xiàn)估計(jì)都有點(diǎn)折騰，畢竟寬度都是動(dòng)態(tài)的，要監(jiān)聽(tīng)各部分的尺寸變化，包括標(biāo)簽的位置和外層的寬度，總之不是一兩行代碼就能搞定的。

現(xiàn)如今，純CSS也能完美的實(shí)現(xiàn)這樣的效果，而且比 JS 實(shí)現(xiàn)更加簡(jiǎn)單，一起來(lái)看看吧

一、CSS 實(shí)現(xiàn)思路

很多時(shí)候，CSS并沒(méi)有直接的實(shí)現(xiàn)方式，需要“繞”點(diǎn)彎路，將需求拆分成很多小點(diǎn)，然后逐一突破。

回到本文這里，其實(shí)有幾個(gè)問(wèn)題需要考慮：

CSS 如何動(dòng)態(tài)累計(jì)數(shù)字？
CSS 如何知道哪些元素在容器之外？
CSS 如何區(qū)分是否溢出（顯示數(shù)量）

關(guān)于第3點(diǎn)，其實(shí)在之前這篇文章中有詳細(xì)介紹，有興趣可以回顧一下，非常有意思

純 CSS 檢測(cè)文本是否溢出

那么第一點(diǎn)，CSS有沒(méi)有什么方式可以統(tǒng)計(jì)數(shù)量呢？

沒(méi)錯(cuò)，相信很多小伙伴已經(jīng)猜到了，就是利用 CSS計(jì)數(shù)器，示意如下

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

關(guān)于計(jì)數(shù)器，我之前也在很多文章中有用到

你可能不需要 JS！CSS實(shí)現(xiàn)一個(gè)計(jì)時(shí)器
如何讓CSS計(jì)數(shù)器支持小數(shù)的動(dòng)態(tài)變化？
還在使用定時(shí)器嗎？CSS 也能實(shí)現(xiàn)電子時(shí)鐘
動(dòng)畫(huà)合成小技巧！CSS 實(shí)現(xiàn)動(dòng)感的倒計(jì)時(shí)效果
自定義計(jì)數(shù)器小技巧！CSS 實(shí)現(xiàn)長(zhǎng)按點(diǎn)贊累積動(dòng)畫(huà)

然后是第二點(diǎn)，CSS有什么方式可以知道元素是出去了還是在視野之內(nèi)呢？

如果是用 JS來(lái)判斷的話，最穩(wěn)妥的方式應(yīng)該Intersection Observer（交叉觀察者），相信很多同學(xué)都用過(guò)，這個(gè)在圖片懶加載非常有用

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

那么，CSS中有什么類似的呢？沒(méi)錯(cuò)，還是之前提到過(guò)的CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)。

不過(guò)這里用到的是視圖進(jìn)度，也就是關(guān)注的是元素自身位置，元素進(jìn)入到容器范圍之內(nèi)就會(huì)觸發(fā)動(dòng)畫(huà)，非常類似 JS中的Intersection Observer

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

這里就不詳細(xì)介紹了，有興趣回顧之前這篇文章

CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)終于正式支持了~

好了，關(guān)鍵原理就這些了，我們需要做的就是想辦法將「計(jì)數(shù)器」和「元素進(jìn)出容器范圍」關(guān)聯(lián)起來(lái)就行了，接著往下看

二、CSS 計(jì)數(shù)器

利用 CSS 計(jì)數(shù)器，我們可以很輕松的統(tǒng)計(jì)元素的數(shù)量。

先簡(jiǎn)單布局一下文章開(kāi)頭的例子，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><!--用來(lái)計(jì)數(shù)的標(biāo)簽-->

然后美化一下

.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 布局（超出隱藏），后面跟一個(gè)數(shù)字

現(xiàn)在我們定義一個(gè)計(jì)數(shù)器，然后通過(guò)每個(gè)tag進(jìn)行累計(jì)，有多個(gè)tag相當(dāng)于多少次累加，最后在::after中顯示出來(lái)

.con{
  counter-reset: num;  /*計(jì)數(shù)器初始值，默認(rèn)為0*/
}
.tag{
  counter-increment: num; /*計(jì)數(shù)器增量值，默認(rèn)為1*/
}
.num::after{
  content: "+"counter(num); 
}

默認(rèn)計(jì)數(shù)器的起始值是 0，每次累計(jì)是1，所以這里最后得到了7，這樣就能實(shí)時(shí)統(tǒng)計(jì)元素的數(shù)量了

當(dāng)然，我們也可以自定義這些默認(rèn)值，比如

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

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

那么，該如何統(tǒng)計(jì)容器之外的標(biāo)簽數(shù)量呢？

三、CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)

這里我們要利用CSS 視圖進(jìn)度時(shí)間軸，也就是觀察元素自身的位置，在進(jìn)入到容器范圍之內(nèi)執(zhí)行動(dòng)畫(huà)。

拿上面這個(gè)例子，我們給標(biāo)簽添加一個(gè)動(dòng)畫(huà)，讓標(biāo)簽在進(jìn)入到容器之內(nèi)時(shí)變個(gè)顏色，實(shí)現(xiàn)如下

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

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

好像不是很明顯？這是因?yàn)閯?dòng)畫(huà)是在整個(gè)視區(qū)內(nèi)過(guò)渡的，我們可以改變動(dòng)畫(huà)時(shí)間線的區(qū)間animation-range，讓這個(gè)動(dòng)畫(huà)在進(jìn)出的一瞬間就變化

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

效果如下

那么，這個(gè)效果和前面的計(jì)數(shù)器有什么關(guān)聯(lián)呢？

從效果上來(lái)看，在視區(qū)內(nèi)會(huì)執(zhí)行一個(gè)動(dòng)畫(huà)，如果在這個(gè)動(dòng)畫(huà)中加入計(jì)數(shù)器的累加會(huì)怎么樣呢？先去除原先的累加器

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

效果如下

可以看到計(jì)數(shù)器已經(jīng)生效了，不過(guò)現(xiàn)在統(tǒng)計(jì)的在「可視區(qū)內(nèi)」標(biāo)簽的數(shù)量。而我們要統(tǒng)計(jì)的是「可視區(qū)外」的數(shù)量，好像反過(guò)來(lái)了，如何實(shí)現(xiàn)呢？

這里有兩種思路。

第一種，用總數(shù)減去可視區(qū)內(nèi)的數(shù)量，不就行了嗎？由于現(xiàn)在動(dòng)畫(huà)是針對(duì)可視區(qū)內(nèi)的，我們可以給計(jì)數(shù)器設(shè)置一個(gè)初始值，就是總量，然后動(dòng)畫(huà)中給累加值設(shè)置為-1，就相當(dāng)于減去當(dāng)前數(shù)量了，實(shí)現(xiàn)如下

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

這樣就完美統(tǒng)計(jì)出了可視區(qū)外的數(shù)量了

還有一種方式，我覺(jué)得更加巧妙，需要反向思考。原理是重置當(dāng)前的累加值，比如默認(rèn)情況下，正常累加，進(jìn)入可視范圍，把累加值設(shè)置為0，不就相當(dāng)于可視區(qū)外的正常累加了嗎？

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

同樣能達(dá)到相同的效果

現(xiàn)在基本已經(jīng)達(dá)到我們需要的效果了

四、其他細(xì)節(jié)修正

首先是，在超出范圍時(shí)，需要在邊緣出添加一個(gè)半透明蒙層，這樣體驗(yàn)效果會(huì)更好。

半透明蒙層很好實(shí)現(xiàn)，只需要添加一個(gè)水平漸變的mask遮罩就行了

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

效果如下

那么，如何在沒(méi)有超出時(shí)，不出現(xiàn)這個(gè)遮罩呢？

這個(gè)其實(shí)在之前的文章中有詳細(xì)介紹了，建議回顧一下

純 CSS 檢測(cè)文本是否溢出

利用CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)，可以檢測(cè)容器是否可滾動(dòng)，也就是是否超出。所以我們只需要將遮罩放在滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)里就行了，關(guān)鍵實(shí)現(xiàn)如下

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

效果如下

還有一個(gè)問(wèn)題，希望在沒(méi)有超出的時(shí)候不顯示后面的數(shù)量。

關(guān)于這個(gè)，我本來(lái)是打算用樣式查詢來(lái)實(shí)現(xiàn)，但是遇到了一個(gè)問(wèn)題，由于樣式查詢只能匹配到子元素，所以不得不將顯示數(shù)量的標(biāo)簽放到.con容器內(nèi)。但是這樣一來(lái)，mask遮罩就會(huì)出現(xiàn)問(wèn)題，就像這樣

遮罩層連同數(shù)量標(biāo)簽一起被裁剪了！

于是又想出了另一種方案，這個(gè)在以前的布局中其實(shí)用到的更多，那就是負(fù)margin。

實(shí)現(xiàn)很簡(jiǎn)單，給標(biāo)簽容器一個(gè)的負(fù)margin-right，這樣，右邊的數(shù)量就會(huì)被左邊的標(biāo)簽蓋住，比如

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

效果如下

是不是已經(jīng)被蓋住一部分了？我們繼續(xù)向左偏移

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

這樣就完全看不到右邊的數(shù)量了

那么，如何在超出時(shí)顯示數(shù)量呢？這里就體現(xiàn)出負(fù)margin的好處了，可以借助前一個(gè)元素來(lái)隱藏后一個(gè)元素，在這里，我們直接在前面的動(dòng)畫(huà)中還原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;
  }
}

這樣就完美實(shí)現(xiàn)了文章開(kāi)頭所示效果了

你也可以訪問(wèn)以下鏈接來(lái)體驗(yàn)真實(shí)效果（Chrome115+）

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

五、總結(jié)一下

以上就是本文的全部?jī)?nèi)容了，不知道你學(xué)會(huì)了嗎？下面總結(jié)一下實(shí)現(xiàn)重點(diǎn)：

很多時(shí)候，CSS并沒(méi)有直接的實(shí)現(xiàn)方式，需要“繞”點(diǎn)彎路
CSS計(jì)數(shù)器可以實(shí)現(xiàn)數(shù)字累加
CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)可以檢測(cè)元素是否在可視范圍之內(nèi)
CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)還能檢測(cè)元素是否內(nèi)容超出
計(jì)數(shù)累加器可以放在滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)中，這樣在動(dòng)畫(huà)觸發(fā)時(shí)也就相當(dāng)于計(jì)數(shù)器生效了，這樣就能統(tǒng)計(jì)可視區(qū)的標(biāo)簽數(shù)量了
樣式查詢只能匹配到子元素，但是用子元素會(huì)受到mask遮罩的影響
負(fù)margin可以借助前一個(gè)元素來(lái)隱藏后一個(gè)元素

[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

來(lái)源-微信公眾號(hào):前端偵探

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

font-size:設(shè)置字體大小:

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

    p{
      font-size:20px;
    }

常見(jiàn)尺寸單位：

font-family:設(shè)置字體:

如果需要設(shè)置多個(gè)字體樣式，則屬性值可以寫(xiě)多個(gè)中間用逗號(hào)隔開(kāi)即可，需要知道的是瀏覽器會(huì)從第一個(gè)字體屬性值找，直到找到自己設(shè)備有的字體顯示，自己設(shè)備沒(méi)有的字體，按設(shè)備默認(rèn)字體顯示,推薦系統(tǒng)默認(rèn)字體。


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

font-weight:設(shè)置字體粗細(xì):

其屬性值有：normal正常不加粗、bold加粗、bolder更粗、lighter更細(xì)、number（整百的數(shù)字）、inherit繼承父級(jí)元素字體粗細(xì)

p {
  font-weight:700;
}

font-style:設(shè)置字體風(fēng)格:

如設(shè)置斜體、傾斜或正常字體，其屬性值：normal默認(rèn)值，標(biāo)準(zhǔn)字體、italic斜體、oblique傾斜

font:綜合設(shè)置字體樣式（字體樣式連寫(xiě)）:

字體樣式連寫(xiě)是有順序的，必須是嚴(yán)格遵循順序，其中不需要設(shè)置的屬性可以省略，font-size和font-family屬性值必須寫(xiě)，否則字體連寫(xiě)失效。


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

提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問(wèn)題可通過(guò)以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

在線咨詢

上一篇：H5的canvas繪畫(huà)的一個(gè)簡(jiǎn)單時(shí)鐘
下一篇：css實(shí)現(xiàn)的圖片列表切換輪播特效html頁(yè)面前端源碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

零基礎(chǔ)教你學(xué)前端-61、CSS文本顏色和大小寫(xiě)轉(zhuǎn)化

一、CSS 實(shí)現(xiàn)思路

二、CSS 計(jì)數(shù)器

三、CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)

四、其他細(xì)節(jié)修正

五、總結(jié)一下

您的項(xiàng)目需求

零基礎(chǔ)教你學(xué)前端-61、CSS文本顏色和大小寫(xiě)轉(zhuǎn)化

一、CSS 實(shí)現(xiàn)思路

二、CSS 計(jì)數(shù)器

四、其他細(xì)節(jié)修正