整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
一個網頁的文本顏色是指在主體內的選擇：
<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：如果你定義了顏色屬性，你還必須定義背景色屬性。
文本排列屬性是用來設置文本的水平對齊方式。
文本可居中或對齊到左或右,兩端對齊。
當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>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>注：不建議強調指出不是鏈接的文本，因為這常常混淆用戶。
text-transform文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。
<!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>text-indent文本縮進屬性是用來指定文本的第一行的縮進。
p {text-indent:50px;}增加或減少字符之間的空間。
<style>
h1 {
letter-spacing:2px;
}
h2 {
letter-spacing:-3px;
}
</style>指定在一個段落中行之間的空間。
<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>增加一個段落中的單詞之間的空白空間。
<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>設置文本的垂直對齊圖像。
<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>設置文本陰影。
<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語言，代碼結構更佳的清晰，能夠幫助你更好的學習。
ont 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫，或將元素的字體設置為系統字體。
font-family寫法示例：
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級啟嘉班</p>
</body>效果：
標
之前介紹過文字樣式，但文字樣式只是針對一個字而已。現實往往更多處理的是大段的文字，也叫做段落。段落更注重的是排版效果。一個排版好看的文章，更吸引人去看。
之前是使用標簽來設置標線，但更推薦的是使用css來設置標線，因為樣式與結構分離才是最好的選擇。
語法：text-decoration:屬性值
屬性值
各種標線，下劃線和刪除線用得較多，常用在文章的重點語句，或者是電商網站里的原價
標線樣式
小技巧，還可以用這個屬性去除a標簽的默認下劃線。text-decoration:none
這個屬性是針對英文，它可以很方便轉換大小寫，這個對于經常跟英文打交道的，是個神器！
語法：text-transform:屬性值;
屬性值
真正一鍵轉換全大寫。
原文
轉大寫
在書寫習慣上，一般習慣每個段落都會縮進兩個字大小，這個叫首行縮進。我們都知道段落p標簽的首行是不會縮進的，在此之前都是手動打幾個空格，這樣很容易導致空格失效，因為編輯器很容易把空格忽略掉。所有要使用css來控制。
語法：text-indent:像素值;
像素值可以使用px，但一般開發用得更多的是rem，2rem代表2個字的大小。
首行縮進
在CSS中，使用text-align屬性控制文本的水平方向的對齊方式：左對齊、居中對齊、右對齊。常見的文章標題，就是用這個來水平居中。
語法：text-align:屬性值;
屬性值
三種不同的水平對齊方式
水平對齊方式
在CSS中，使用line-height屬性來控制文本的行高。這個有點像行間距，但嚴謹的說，并不是！這里的行高真的是指一行的高度，大多數人會認為是word文檔里的行間距，行間距指的是"兩行文本之間的距離"，是不是不一樣。
語法：line-height:像素值;
不同行高的區別如下
不同行高
這里有個小技巧，行高line-height和高height設置為同一值，就可以實現垂直居中！
垂直居中
編寫word文檔的時候，常常是根據板式來調整字的間距，以免頁面過于擁堵。那調整字與字間距就有兩種情況。
首先是字間距，語法：letter-spacing:像素值;
說明：letter-spacing控制的是字間距，每一個中文文字作為一個"字"，而每一個英文字母也作為一個"字"。
原文
修改后
還有一個就是詞間距，語法：word-spacing:像素值;
說明：以空格為基準進行調節，如果多個單詞被連在一起，則被word-spacing視為一個單詞；如果漢字被空格分隔，則分隔的多個漢字就被視為不同的單詞，word-spacing屬性此時有效。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
