（一）CSS屬性——文本屬性、段落屬性
1.color:修飾字體顏色，屬性值可以是顏色名稱（red/blue/green/gold，建議寫常見的名稱）、十六進制、rgb值、rgba值
2.font-size：修飾字體的大小，屬性值常爲數值加單位，單位px/em，
注意如果字體大小不是0，那麼單位必須加，如果是0，可以省略單位，字體默認的大小16px，常用12px
3.font-weight：修飾字體粗細，屬性值爲normal（默認，不加粗）、bold（加粗）
4.font-style：修飾字體是否傾斜，屬性值爲normal(默認，不傾斜)、oblique（傾斜）、italic（傾斜）
5.font-family：修飾字體類型，
注意事項
a.fong-family後面可以跟多個字體類型的值，中間用逗號分隔font-family:"隸書","楷體","黑體"，Arial，瀏覽器在應用字體類型時，從第一個開始尋找，如果 第一種類型即應用否則繼續往下尋找，直到最後，如果都沒有則應用默認類型"宋體"
b.如果字體類型爲中文或者是由空格，那麼需要將字體類型用雙引號抱起來
6.字體修飾的複合形式font:值1 值2 值3 值4…
注意
a.font的複合形式，後面的值是由順序要求的，順序爲font-style傾斜 font-weight粗細 font-size/line height大小/行高 font-family類型
b.屬性值可以全部寫上，也可以寫一部分，沒寫的就用默認值，但是一定要注意在寫複合形式時字體的大小和類型是不可以省略
c.如果既有複合形式font，也有單一形式，那麼單一形式一定要寫在下面
7.文本陰影text-shadow:值1 值2 值3 值4;
值1：代表陰影水平方向上的位移距離，可以是正整數（向右移）、也可以是負整數（向左移）
值2：代表陰影垂直方向上的位移距離，可以是正整數（向下移）、也可以是負整數（向上移）
值3：代表陰影半徑
值4：代表陰影顏色
8.文本修飾text-decoration，屬性值爲underline、overline、line-through、none
underline：下劃線
overline：上劃線
line-through：刪除線
none：去掉文本修飾效果
9.word-spacing:修飾英文單詞間的距離，屬性值可以是像素值，也可以是em
10.letter-spacing:修飾單詞內部字符間的距離和漢字間的距離，屬性值可以是像素值，也可以是em
11.text-transform：修飾英文字母大小寫，屬性值爲capitalize(首字母大寫)、uppercase(所有字母大寫)、lowercase(所有字母小寫)
12.line-height:設置行高，屬性值可以是像素值、em、百分比
如果是單行文本，那麼要讓該行文本在垂直方向上居中，可以讓行高等於高度
如果是多行文本，那麼要讓文本將容器平分，可以讓行高等於高度除以行數
13.text-align:設置文本相對於容器的水平對齊方式，使用對象爲塊元素和行內塊元素，不可以是行內元素
14.text-indent:設置元素的首行縮進效果，屬性值爲像素值、em、負數值
15.white-space：normal、pre、nowrap、pre-wrap、pre-line
normal:合併空格、換行
pre:不合並空格、不換行
nowrap:合併空格、不換行
pre-wrap:不合並空格、換行
pre-line：合併空格、換行
16.overflow：文本溢出後的處理方式
visible：默認，顯示溢出文本
hidden：隱藏溢出文本
scroll：當文本溢出時出現滾動條，通過拖動滾動條，可以調節內容顯示部位，注意即使內容沒有溢出，也會出現滾動條所在的灰色邊框
auto：自動判斷文本是否溢出，如果沒有溢出，那麼不顯示滾動條，如果有溢出，顯示滾動條
overflow-x:文本橫向溢出的處理方法
overflow-y：文本縱向溢出的處理方法
text-overflow：處理溢出的內容以什麼形式顯示，可以是clip、ellipsis（省略號）
（二）應用：讓溢出文本以省略號形式顯示
第一步：不換行white-space：pre
第二步：隱藏溢出文本overflow：hidden
第三步：處理溢出文本的顯示顯示：text-overflow：ellipsis
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
width: 130px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>1688阿里巴巴批發網</li>
<li>首頁從原料,生產,加工一系列服務.</li>
<li>找阿里巴巴,全球領先採購批發平臺.阿里巴巴,採購批發找1688阿里巴巴批發網首頁,匯聚更多商業資訊</li>
</ul>
</body>
（三）display:用於定義元素在佈局時的顯示類型，常用值爲block/inline/inline-block/none;
1.HTML元素的分類：塊級元素、行內元素、行內塊元素
塊級元素：display：block;
行內元素：display：inline
行內塊元素：display：inline-block
display:none隱藏HTML元素,改元素在文檔中的位置會丟失
2.應用：下拉菜單
<head>
<meta charset="UTF-8">
<title>下拉菜單</title>
<style type="text/css">
ul{
list-style: none;
width: 120px;
}
a{
display: block;
text-decoration: none;
color: #000;
}
li>a{
background: #ccc;
height: 35px;
line-height: 35px;
}
div{
display: none;
}
li:hover div{
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">吉林省</a>
<div>
<a href="#">長春市</a>
<a href="#">吉林市</a>
<a href="#">四平市</a>
</div>
</li>
<li>
<a href="#">遼寧省</a>
<div>
<a href="#">瀋陽市</a>
<a href="#">大連市</a>
<a href="#">盤錦市</a>
</div>
</li>
<li>
<a href="#">黑龍江省</a>
<div>
<a href="#">哈爾濱市</a>
<a href="#">齊齊哈爾市</a>
<a href="#">黑河市</a>
</div>
</li>
</ul>
</body>
3.應用：橫向導航菜單
<head>
<meta charset="UTF-8">
<title>橫向導航菜單</title>
<style type="text/css">
#nav{
width: 800px;
height: 40px;
background: green;
line-height: 40px;
font-size: 0;
}
a{
color: #fff;
text-decoration: none;
width: 100px;
display: inline-block;
font-size: 14px;
text-align: center;
}
a:hover{
background: pink;
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">最新電影</a>
<a href="#">最新電影</a>
<a href="#">最新電影</a>
<a href="#">最新電影</a>
<a href="#">最新電影</a>
<a href="#">最新電影</a>
<a href="#">最新電影</a>
<a href="#">最新電影</a>
</div>
</body>
注意：行內塊元素間右空隙，處理該空隙的方法
1.將HTML代碼寫在同一行上（不建議）
2.將行內塊元素所在的父元素font-size：0，對於行內塊元素自身在設置單獨的font-size
4.應用：使用行內塊元素的特性進行頁面佈局
<head>
<meta charset="UTF-8">
<title>效果測試頁面</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 800px;
margin: 0 auto;
}
#header{
height: 80px;
background: red;
}
#nav{
height: 40px;
background: green;
}
#main{
height: 400px;
background: blue;
}
.left{
width: 400px;
height: 400px;
background: yellow;
float: left;
}
.right{
width: 400px;
height: 400px;
background: gold;
float: left;
}
#footer{
height: 60px;
background: pink;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div class="left">左側</div>
<div class="right">右側</div>
</div>
<div id="footer"></div>
</body>
