一篇文章帶你了解CSS 文本樣式

家好，我是IT共享者，人稱皮皮。這篇文章我們來講講CSS的文本樣式。

一、文本顏色Color

顏色屬性被用來設置文字的顏色。

顏色是通過CSS最經常的指定：

十六進制值 - 如"＃FF0000"。
一個RGB值 - "RGB（255,0,0）"。
顏色的名稱 - 如"紅"。

一個網頁的文本顏色是指在主體內的選擇：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：對于W3C標準的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

二、屬性

1. text-align 文本的對齊方式

文本排列屬性是用來設置文本的水平對齊方式。

文本可居中或對齊到左或右,兩端對齊。

當text-align設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 號</p>
        <p class="main">　從前有個書生，和未婚妻約好在某年某月某日結婚。到那一天，未婚妻卻嫁給了別人。書生受此打擊， 一病不起。　　這時，路過一游方僧人，從懷里摸出一面鏡子叫書生看。書生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過一人， 看一眼，搖搖頭，走了。又路過一人，將衣服脫下，給女尸蓋上，走了。再路過一人，過去，挖個坑，小心翼翼把尸體掩埋了。　　僧人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個路過的人，曾給過他一件衣服。她今生和你相戀，只為還你一個情。但是她最終要報答一生一世的人，是最后那個把她掩埋的人，那人就是他現在的丈夫。書生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修飾

text-decoration 屬性用來設置或刪除文本的裝飾。

從設計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原來的樣子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下劃線</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以這樣裝飾文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建議強調指出不是鏈接的文本，因為這常常混淆用戶。

3. text-transform文本轉換

text-transform文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。

uppercase:轉換為全部大寫。
lowercase：轉換為全部小寫。
capitalize ：每個單詞的首字母大寫。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本縮進

text-indent文本縮進屬性是用來指定文本的第一行的縮進。

p {text-indent:50px;}

5. letter-spacing 設置字符間距

增加或減少字符之間的空間。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height設置行高

指定在一個段落中行之間的空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 設置字間距

增加一個段落中的單詞之間的空白空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 設置元垂直居中

設置文本的垂直對齊圖像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 設置文本陰影

設置文本陰影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、總結

本文主要介紹了CSS文本樣式實際應用中應該如何去操作，通過講解文本中對應的屬性去改變文本的表現形式。使用豐富的效果圖的展示，能夠更直觀的看到運行的效果，能夠更好的理解。使用Html語言，代碼結構更佳的清晰，能夠幫助你更好的學習。

SS樣式被稱為“層疊樣式表”，是一種網頁制作不可或缺的技術，是用于修飾網頁樣式，達到設計效果的一種樣式語言。

而由于樣式效果非常多，在工作中并非所有的樣式都會用到，因此經常可能遇到某些特定樣式會突然想不起來的情況，更何況對于初學者來說遇到這種情況。

接下來就跟著小凡一起整理一下這些常用而易忘的css樣式。

css樣式的效果

01、文字超出部分顯示省略號

單行文本的超出部分顯示省略號。（一定要給元素本身設置寬度）

.title {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

CSS樣式效果圖

多行文本的超出部分顯示省略號

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

CSS樣式效果圖

PS：建議加上word-break:break-all 否則遇到長單詞會出現很神奇的布局情況。

圖一

圖二

圖一未添加，圖二添加后的不同效果

02、中英文(長單詞)自動換行

word-break:break-all; 只對英文起作用，以字母作為換行依據

word-wrap:break-word; 只對英文起作用，以單詞作為換行依據

white-space:pre-wrap; 只對中文起作用，強制換行

white-space:nowrap;都起作用，強制不換行

PS:網頁中英文單詞通過“_”(下劃線)和 “-”（中劃線）連接的英文單詞在編譯處理是方式是截然不同的。

下劃線是程序命名方法下劃線命名法的規范,其他命名規范還有駝峰式命名。屬于程序專用的命名規范。可以連接想連的部分為一個變量名，不是單詞。

下劃線連接單詞效果

中劃線是英語復合詞有連接2個單詞的意思，但前后是2個獨立單詞。

中劃線連接單詞效果

03、設置表單輸入框placeholder的樣式

input::-webkit-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color:skyblue;
  text-align: center;
}

CSS樣式效果圖

04、不固定高度的元素文字垂直居中

兼容IE8：偽元素和inline-block/vertical-align

.box::before {
  content:"";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
}

CSS樣式效果圖

不兼容IE8以下: flex布局

.box {
  background: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS樣式效果圖

05、文字兩端對齊

.wrap {
  margin: 0 auto;
  width: 800px;
  text-align: justify;
  text-justify: distribute-all-lines;
  /* 兼容IE6-8 */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

CSS樣式效果圖

06、iOS頁面中滑動卡頓

body,html {
  -webkit-overflow-scrolling:touch
}

07、設置滾動條樣式

 .wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}


.wrap::-webkit-scrollbar {
  /* 整體大小樣式 */
  width: 10px;
  height: 10px;
  }


.wrap::-webkit-scrollbar-thumb {
  /* 滾動條里的滑塊 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255,255,255,0.2) 55%,
  rgba(255,255,255,0.2) 75%,
  transparent 75%,
  transparent);
}


.test::-webkit-scrollbar-track {
/* 滾動條的軌道 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 10px;
}

CSS樣式效果圖

08、隱藏滾動條但又可以滾動

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.wrap::-webkit-scrollbar {
/* 整體大小樣式 */
  display: none;
}

CSS樣式效果圖

09、css繪制三角

無邊框三角

div {
  width:0;
  height:0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.3);
}

CSS樣式效果圖

帶邊框三角

div {
  position: relative;
  width:0;
  height:0;
  border-width: 40px 0 40px  40px ;
  border-style: solid;
  border-color:  transparent  black ;
}


div::after {
  content: "";
  position: absolute;
  top:-36px;
  left:-38px;
  border-width: 36px 0 36px  36px ;
  border-style: solid;
  border-color:  transparent red ;
}

CSS樣式效果圖

10、文字間的間距

text-indent 文章段落首行縮進

letter-spacing 字與字之間的間距

.wrap {
  margin: 0 auto;
  width: 600px;
  text-indent: 2em;
  letter-spacing: 10px;
}

CSS樣式效果圖

11、禁止用戶選中元素

有些時候不想讓用戶選中內容，復制網站上文字內容。

.wrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

12、元素占滿整個屏幕

以往需要在做全屏遮罩功能的時候會設置height:100%。但是這種做法需要該遮罩層的所有父級元素都逐級設置高度才能使遮罩繼承高度屬性。所以可以使用100vh單位來實現。

.mask {
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
}

CSS樣式效果圖

以上就是為學員們整理的針對工作中對商品/新聞等標題的樣式處理，彈窗做法的一些經常遇到的css樣式實現方法。

如果覺得有用可以收藏關注，同時還可以留言說出你想知道或者是遇到的不會的樣式處理，我們還將繼續推出后續內容，繼續為大家解讀別的常用css實用技巧以及其他的前端開發新技能，讓我們期待下一期吧。

文末領資料

Web前端設計秘籍——30個工作中常用的CSS樣式

小節基本要求：

了解樣式選擇器class

要點：

padding: 10px; 內邊距是什么
margin: 0 auto；邊框居中
float: left;左浮動
float:right；右浮動
代碼不可寫成死代碼

目前樣式

目標樣式

Step1：打開body.html文件，看上次寫的代碼

Step2：將新建的body.css文件引到body.html中

首先將body.css文件引入到body.html中，body.css文件現在是空的，沒有寫任何代碼

Step3：在css文件中定義tbody與is-main樣式選擇器

從上上篇分析的網站結構可知，tbody對應的div標簽是最大的框，所以我們這樣來設置它的框。

右鍵運行一下，如圖：

可以發現什么都沒有，看我設置的代碼：

.tbody{						//最大的框①
    background-color: rgba(61,176,203,0.15);
    padding: 10px;
    overflow: hidden;  //這行可忽略,是細節
}
.tbody .is-main{	//其次框②
    width: 85%;			  	
    margin: 0 auto;    //邊框居中
}

tbody作為最大的框①，我給它設置了一件什么事？

設置了一個背景顏色
內邊距設置為10px

tbody是沒有設置寬與高的，但是沒有寬與高不應該什么都沒嗎？為什么仍然有一個很長的長方形框框呢？

因為我設置了內邊距padding，內邊距就是邊框朝里面的距離。外邊距margin已經講過了，它是邊框朝外的距離。這兩個是相對的！

內邊距設置為10px，那么邊框就會朝里空出10px的空間出來。

我為什么不給最大的框①tbody設置寬和高？

一般開發中為了方便，最大的框是不設置寬和高的，它的大小是由其內部的內容決定的。

也就是說，它里面能放多少東西，它就能變多大。

其中框②is-main也是同樣的道理，我都不給它設置寬高，因為我們會在他們身體里填東西，它們的大小由里面的內容決定。

Step4：定義is-main中的left與right邊框

右鍵運行一下，發現并沒有任何改變，如下圖：

看代碼：

.is-main .main-left{
    width: 71%;
    float: left;     向左浮動
}

.is-main .main-right{
    width: 28%;
    float: right;   向右浮動
}

我對放內容的左邊框與右邊框做了一件什么事情？

通過網站的樣式可以發現，左邊邊框較右邊邊框更寬。

瀏覽地址：https://ypt.ink/blog/index

所以，給left樣式設置寬度為71%; 給右邊right設置寬度為28%；

也就是說，現在邊框③也就是left已經規定了寬度大小，邊框④也就是right也規定了寬度大小。

也就是說，兩邊框內放的內容不管再多，都不能超過我規定好的這個寬度。

我為什么不給left框與right框規定高度？

因為沒必要，還是像上面說的，它們多高不要由它們來決定，讓它們里面的內容來決定。否則代碼就寫死了！這個很重要，不論是java還是前端代碼一旦寫成死代碼就意味著涼涼！

什么是向左向右浮動？

float:left     向左浮動的意思就是，讓left這個框③緊貼is-main邊框②的左邊邊框
float:right     就是緊貼著右邊邊框

剩下的內容放在下一篇吧，這一篇東西有點多了。

在線咨詢

上一篇：如何使用htmlq提取html文件內容
下一篇：從輸入一個網址到瀏覽器顯示頁面經歷的全過程

您的項目需求

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

整合營銷服務商

一篇文章帶你了解CSS 文本樣式

家好，我是IT共享者，人稱皮皮。這篇文章我們來講講CSS的文本樣式。

一、文本顏色Color

二、屬性

1. text-align 文本的對齊方式

2. text-decoration文本修飾

3. text-transform文本轉換

4. text-indent文本縮進

5. letter-spacing 設置字符間距

6. line-height設置行高

7. word-spacing 設置字間距

8. vertical-align 設置元垂直居中

9. text-shadow 設置文本陰影

三、總結

目前樣式

目標樣式

Step1：打開body.html文件，看上次寫的代碼

Step2：將新建的body.css文件引到body.html中

Step3：在css文件中定義tbody與is-main樣式選擇器

Step4：定義is-main中的left與right邊框

您的項目需求