初識CSS-文本屬性和引用方式

SS文本屬性

CSS text（文本）屬性就是設置文本的外觀，比如字體顏色、對齊方式、縮進、行間距等。

文本顏色

屬性名：color。

屬性值：

顏色英文單詞：color：red;

16進制顏色值：color：#000000;

RGB代碼：color: rgb(255,255,255)或rgb(100%,0%,0%)

一般在開發中常用的是十六進制寫法。

代碼示例：

<head>
  <style>
  		/* 文本顏色屬性 */
        .red {
            color: red;
        }
        .colorNum {
            color: #f00;
        }
        .colorRgb{
            color: rgb(255, 0, 0);
        }
  </style>  
</head>
<body>
     <!-- 文本顏色屬性 -->
    <p class="red">我是文本屬性的單詞顏色設置</p>
    <p class="colorNum">我是文本屬性的16進制顏色設置</p>
    <p class="colorRgb">我說文本屬性的rgb顏色設置</p>
</body>

代碼運行界面

文本對齊方式

屬性名：text-align。

屬性值：

“text-align: left”：默認值，文本左對齊。

“text-align：center”：文本居中對齊。

“text-align：right”：文本右對齊。

代碼示例：

<head>
  <style>
  		/* 文本對齊方式 */
        .l {
            text-align: left;
        }
        .cen {
            text-align: center;
        }
        .ri {
            text-align: right;
        }
  </style>  
</head>
<body>
    <!-- 文本對齊方式 -->
    <p class="l">文本左對齊</p>
    <p class="cen">文本居中對齊</p>
    <p class="ri">文本右對齊</p>
</body>

運行界面：

文本裝飾

屬性：text-decoration。

屬性值：

“text-decoration：none”：默認值，沒有裝飾線。

“text-decoration：underline”：給文本添加下劃線。

注意：a標簽中自帶下劃線，可以使用默認值屬性去除a標簽的下劃線。

“text-decoration：overline”：給文本添加上劃線。

“text-decoration：line-through”：給文本添加刪除線。

代碼示例：

<head>
  <style>
  		/* 文本裝飾線 */
        .nor {
            text-decoration: none;
        }
        .underl {
            text-decoration: underline;
        }
        .upl {
            text-decoration: overline;
        }
        .lineTh {
            text-decoration: line-through;
        }
  </style>  
</head>
<body>
    <!-- 文本裝飾 -->
    <p class="nor">文本裝飾線：默認狀態</p>
    <p class="underl">文本裝飾線：文本添加下劃線</p>
    <p class="lineTh">文本裝飾線：文本添加刪除線</p>
    <p class="upl">文本裝飾線：文本添加上劃線</p>
    <a href="#">我是超鏈接標簽，文本自帶下劃線</a><br>
    <a href="#" class="nor">我是超鏈接標簽，文本自帶下劃線。使用默認值屬性，可去除文本下劃線</a>
</body>

運行界面：

文本縮進

屬性名：text-indent。通常指段落首行縮進。

屬性值：px或em。

em是一個相對單位，

如果當前元素已經設置文字大小，就按照當前元素1個文字的大小顯示縮進。

如果當前元素中沒有設置，則按照父元素的1個文字大小，即1個em=16px顯示縮進。

代碼示例：

<head>
  <style>
  		/* 文本縮進 */
        .indEm {
            text-indent: 2em;
            /* em是一個相對單位，
            在沒有設置文字大小時，按照默認字體大小，即16px顯示。
            設置了文字大小，則按照設置的文字大小，幾個em就是幾個文字大小進行顯示。
            */
        }
        .indPx {
            /* 像素是絕對單位，設置幾就是幾 */
            text-indent: 32px;
        }
  </style>  
</head>
<body>
    <!-- 文本縮進 -->
    <p class="indPx">我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
    </p>
    <p class="indEm">我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
    </p>
</body>

運行界面：

行間距

屬性名：ling-height。用于設置文本的行高。即行與行之間的距離。

行間距=文本高度+上間距+下間距。（上間距=下間距）

行間距調整就是設置的上下間距的高

屬性值：px或em。

代碼示例：

<head>
  <style>
  		/* 行間距 */
        .lH {
            line-height: 3em;
        }
  </style>  
</head>
<body>
    <!-- 行間距 -->
    <p class="lH">
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
         我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
          我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
    </p>
</body>

運行界面：

CSS引入方式

分為三類：行內樣式表（行內式）、內部樣式表（內嵌式）、外部樣式表（鏈接式）

行內樣式表：

位置：直接寫在元素的開始標簽中。

特點：書寫內容少，權重級別高，只能控制一個標簽，結構樣式混亂。

語法：style=”color: red;”

注意：多個屬性之間使用空格分隔。

代碼示例：

<p style="color: red;">行內樣式表：在使用屬性的元素開始標簽中直接設置屬性。如給字體設置紅色屬性。</p>

<p style="color: red; font-size:28px;">行內樣式表：在使用屬性的元素開始標簽中直接設置屬性。如給字體設置紅色屬性和字體28px。</p>

內部樣式表（內嵌式）

位置：在head標簽下，和title標簽并列。樣式屬性均包含在style標簽中。

特點：部分結構與樣式相分離，還是在同一html文件上。

語法：

<style>
p {
color: red;
font-size: 28px;
}
</style>

代碼示例：

<head>
 	<title></title>
	<style>
        .styleP {
            color: red;
            font-size: 32px;;
        }
	</style>
</head>
<body>
	<!-- 內部樣式表 -->
    <p class="styleP">內部樣式表：樣式屬性寫在同一個html文件中的head標簽里，和title標簽并列。</p>
</body>

外部樣式表（鏈接式）

第一步：創建index.css文件，在文件中輸入樣式屬性，不用任何標簽。

第二步：在html文件的head標簽中，添加link標簽，引入css文件。

第三步：給html文件中需要添加屬性的元素添加選擇器名稱。

特點：結構和樣式全局分離，一個css文件可以控制多個html頁面。

注意：在css文件中只有樣式沒有標簽，即直接書寫標簽器和屬性，不要寫style標簽。

代碼示例：

第一步：新建index.css文件，設置樣式屬性。

* {
    margin: 0;
    padding: 0;
}
.linC {
    font-size: 32px;
    color: blue;
}

第二步：在html文件的head標簽中添加link標簽引用css文件。

<head>
  	<title>CSS樣式引入方式</title>
    <!-- 外部樣式表 -->
    <link rel="stylesheet" href="./index.css">
</head>

第三步：在標簽中調用屬性。

<body>
   	<!-- 外部樣式表 -->
    <p class="linC">
        外部樣式表：<br>
        第一步：新建一個css文件，文件中直接編輯樣式屬性，不需要添加style標簽。<br>
        第二步：使用css文件的html文檔，應該在其head標簽中添加link標簽選擇css文件的存儲位置,<br>
        第三步：調用css文件中的樣式。
    </p>
</body>

運行界面：

以上就是今天學習的內容，明天繼續學習CSS的相關內容，今天就到這里了，各位晚安！

mac 文件管理中有這樣一個小細節。

當文件名不超過一行時，完整顯示，此時鼠標放上去無任何提示
當文件名超過一行時，出現省略號，此時鼠標放上去提示顯示完整文件名

一個很微妙但非常人性化的細節（ps.都能完全看見也就不需要提示了）。其實這類效果在 web 中，通過簡單的 CSS 也能輕易實現的。下面就來看看吧~

一、CSS 實現思路

相信大家都知道 title 這個屬性，原生的提示就用這個了，可以說從上古世紀就開始支持，下面是 MDN 上關于這個屬性的介紹

title 全局屬性包含了表示咨詢信息文本，和它屬于的元素相關。這個信息通常存在，但絕不必要，作為提示信息展示給用戶

用法也非常簡單

<p  class="txt" title="這是absolute">元素會被移出正常文檔流，并不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。
</p>

這里 title 的表現樣式還有停留時間與操作系統和瀏覽器有關，也不可修改

現在問題來了，title 屬性是預先添加的，并且無法通過樣式來控制是否顯示，那么，CSS 如何做到動態處理呢？接著往下看

雖然 CSS 無法動態去改變 title 屬性，換個思路，假如有兩份相同的文本，其中一份是帶有 title 屬性的，比如

<p class="wrap">
  <span class="txt">元素會被移出正常文檔流，并不為元素預留</span>
  <span class="title" title="元素會被移出正常文檔流，并不為元素預留">元素會被移出正常文檔流，并不為元素預留</span>
</p>

為了方便演示，這里給帶有 title 屬性的文本加上背景色，然后暫且稱為 文本A 和 文本B 吧（以下適用），如下所示

現在只需要在單行文本的時候展示 文本A ，多行文本的時候展示 文本B，就可以實現我們想要的功能了。

那么，如何判斷文本是否超出一行呢？

二、多行文本判斷

首先，當文本超出一行時，高度必然會發生變化（），假設行高為 1.5，那么1行文本就是 1.5em，2行就是 3em，依次類推...

但是，如果我們限制A的最大高度為兩行，那么一行和多行不就區分開了嗎（單行高度是1.5em，多行高度是3em）

.txt{
  display: block;
  max-height: 3em;/*最大高度為2行*/
}

現在關鍵的一步來了，把文本B 往上移動2行的距離，這里用相對定位實現（margin也可以）

.title{
  position: relative;
  top: -3em; 
}

是不是有點奇怪了？其實就是往上位移了2行的距離，這樣在文本A 只有一行的時候，文本B 就剛好“出界”了；在文本A 有多行的時候，由于高度只有2行的高度，文本B 剛好“覆蓋”在上面，原理示意如下

這時，如果把父級的高度限制在一行，并且把文本B做單行截斷

.wrap{
  line-height: 1.5;
  height: 1.5em;
}
.title{
  position: relative;
  top: -3em; 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

這樣，在多行的時候，視野內看到的就是文本B了，效果如下

最后，把父級超出隱藏，還有文本B背景設置成父級相同的顏色就可以了~

到這里為止，就實現了文章開頭所示的效果，完整代碼可以查看 codepen auto title（記得鼠標放上去o~）

為了更方便直觀的演示，這里做了一個類似的列表如下

在線例子可訪問 codepen auto title list（記得鼠標放上去o~）

三、其他實用案例

下面再介紹兩個更加實用的提示效果

中間省略效果

細心的小伙伴可能已經發現，文章開頭的文本超出時，省略號是在中間的。

這種設計有什么好處呢？比如有時候很多文件的名稱是相同的，只有后綴名不同，或者很多會有個版本號，舉個栗子：

當寬度較小時，末尾出現了省略號，這就很尷尬了，由于前面都是一樣的，一眼看上去完全分不清文件名哪個跟哪個（）

如果省略號在中間就很好區分了。那么，如何實現這一效果呢？

借助上面的布局，下面所有分析只需要對 文本B 進行處理就行了。關于中間省略效果，目前還沒有專門的 CSS 樣式可以實現，不過可以模擬它，接著往下看

首先，復制一份文本，這里使用 ::before 偽類通過 content 生成

.title::before{
    content: attr(title);
}

很明顯，這個時候兩段文本是連接在一起的

然后，給 :before 設置右浮動，寬度設置成 50%

.title::before{
    content: attr(title);
    width: 50%;
    float: right;
}

接著，給 :before 設置超出截斷

.title::before{
    /**/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

最后，把 :before 換成前面省略號的效果，可以用 direction 實現，關于 direction，平時可能沒怎么接觸，其實就是改變排版方向的，默認是從左到右，省略號在右側，如果改成從右到左，那么省略號也會在左邊，所以

.title::before{
    /**/
    direction: rtl; /*從右到左*/
}

現在看看完成效果吧

有一點小問題，中間的省略號左邊的空隙有時候有點大，如下

這個是因為這個地方剛好換行了，所有空出了一小截。這里可以用文本兩端對齊簡單優化一下

.title{
    /**/
    text-align: justify;
}

這樣就能保證最右端的文字是靠右的（當然文本的間隙會略微增加一點~），效果如下

在線例子可訪問 codepen auto middle ellipsis（記得鼠標放上去o~）

超出滾動效果

有時候，title 提示可能有點弱，不夠明顯，產品需要文本超出的時候，鼠標放上去可以自動滾動起來，類似這樣的效果

如何實現的呢？其實借助上面的布局，這里實現就非常容易了，只需要對 文本B 做滾動動畫即可，關于 CSS3實現無縫滾動，這里介紹一下實現：

要做到首尾無縫滾動，首先需要復制一份相同的文本，這里使用 ::after 偽元素通過 content 生成

.title::after{
    content: attr(data-title);/*復制一份文本，下圖綠色的部分*/
}

現在需要在一行顯示，不換行

.title{
    /**/
    white-space: nowrap;
}

可以看到，雖然不換行了，但是寬度還是父級的寬度，并沒有跟隨文字內容，這時，可以設置 display: inline-block

.title{
    /**/
    display: inline-block;
    white-space: nowrap;
}

關于寬度跟隨文字內容，其實還可以用 width: max-content 實現，兼容性略差

.title{
    /*
    display: inline-block;
    white-space: nowrap;
    */
    width: max-content;
}

接著，設置 animation 動畫即可，只需要當 transform 位移到 自身一半50% 時 迅速歸位，就能達到無縫銜接的效果，如下

.title:hover{
    /**/
    animation: move 10s .3s linear infinite;
}
@keyframes move {
    to {
        transform: translateX(-50%); /*位移到 50% 時 迅速歸位*/
    }
}

這里首尾的間隙是用 padding 實現的

.title::after{
    content: attr(data-title);
    padding: 0 5em;/*無縫滾動的首位間隙*/
}

在線例子可訪問 codepen auto scroll list（記得鼠標放上去o~）

唯一的缺陷是動畫時間是固定的，如果文本很長，可能出現滾動過快的問題

四、總結和說明

本文介紹了一種全新 CSS 自動判斷多行文本的思路，并且帶來3個人性化的小交互。總的來說，其實也沒用到太多的技巧（主要還是想象力），結構還不算復雜，相信一步步看下來不會有很大的難度。

重點依舊是上面的布局部分，布局出來了，下面很多擴展效果也就迎刃而解了。由于只用到了 CSS2 相關特性（max-height、文本截斷等），兼容性也是棒棒的，實測可以兼容到 IE7+（全兼容，放心使用），后面的超出滾動效果兼容到 IE10+，現在總結一下實現重點：

轉換思路，節點復制是一個好辦法
通過 max-height 可以判斷單行和多行
靈活運用 CSS 障眼法 層級覆蓋和超出隱藏
direction：rtl 可以實現前置省略號的效果
中間省略號可以用兩段文本拼接的方式模擬
寬度跟隨文本自適應可以用 inline-block 實現
無縫滾動效果可以用位移 -50% 來實現

好了，這樣一個成本低廉，又非常人性化的小功能，趕緊用起來吧。如果大家覺得不錯的話，歡迎點贊、收藏、轉發???~

References

[1] [codepen auto title] https://codepen.io/xboxyan/pen/WNppXxx
[2] [codepen auto title list] https://codepen.io/xboxyan/pen/eYvveBe
[3] [codepen auto middle ellipsis] https://codepen.io/xboxyan/pen/VwpPNbm
[3] [codepen auto scroll list] https://codepen.io/xboxyan/pen/ZEeerBb

敬的用戶，您是否曾經因為需要給大量的HTML文本添加同樣的內容而感到苦惱？讓我們介紹一款高效的批量處理工具，為你解決這個問題！這個工具能夠快速地給html文本批量添加所需內容，讓您不再因苦于手工操作，大幅提升工作效率。

首先，在首助編輯高手的主頁面板塊欄里，選擇“文本批量處理”板塊。

第二步，進入板塊欄里，我們要點擊上方功能欄里的“添加文件”即可

第三步，在彈出來的文件夾里，將您要添加內容的HTML文件進行導入進去

第四步，然后在下方的功能欄里，選擇“添加內容”功能即可。

第五步，選擇完畢之后，我們就要在下方的內容欄里將要輸入的內容進行一一導入進行，即可

第六步，都設置完畢之后，我們就可以點擊批量添加內容，等上方的狀態欄顯示添加成功，我們就可以打開文件進行查看，發現我們的內容已經添加完畢了

在線咨詢

上一篇：登回雁峰（丙戌）近現代·傅子馀「詩話回雁峰（13
下一篇：Win10新版大手術：游戲玩家有福了

您的項目需求

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

整合營銷服務商

初識CSS-文本屬性和引用方式

SS文本屬性

CSS引入方式

一、CSS 實現思路

二、多行文本判斷

三、其他實用案例

四、總結和說明

您的項目需求