一、字體設置和文本設置
1、文字的字體
（1）字體的複合屬性
複合屬性是指該屬性是由多種屬性組合而成。CSS中字體用font表示。
font:font-style||font-variant||font-weight||font-size||font-height||font-family
屬性分別爲設置：字體的樣式、字母大小寫、文本的粗細、文本字體的大小、文本字體名稱序列。ong
（2）字體的顏色
Color:顏色值
顏色表示方法有三種：#RRGGBB、rbg和顏色名
（3）字體的大小
font-size:xx-small;
字體大小：可以用xx-small、x-small等字體尺寸值。也可以用具體數值+px單位表示。
（4）字體的粗細
font-weight:bold;
字體的粗細又稱爲字體的重量。
可以用bold等關鍵字也可以用100-900中的數字表示文本的粗細。
（5）字體類型
font-family:fontname;
fontname指字體類型，有宋體、黑體、Courier等。
2、行距設置
行距指行與行之間的距離。
line-height:30px;
3、文本間距與間隔
（1）文本間距
文本間距指單詞（包括漢字與字母）之間插入的空格數。
word-spacing: normal|長度單位
（2）文本間隔
文本間隔指文本中字符、單詞的間隔，即文字間隔和字母間隔，包括設定字與字之間，字母與字母之間的距離。
letter-spacing: normal|長度單位
4、字母大小寫轉換
text-transform:capitalize|uppercase|lowercase|none
5、文本的修飾
修飾包括對文本添加下劃線、上劃線、刪除線、閃爍等。
text-decoration:underline|overline|line-through|bink|none
6、空格處理方式
空格處理應用在該對象處理文本間的空格時。
語法：
while-space:normal |pre |nowrap
7、設置文本垂直與水平對齊
（1）文本垂直對齊
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom
（2）文本水平對齊
text-align:left | right |center |justify
8、文本縮進
文本縮進可以用於塊級元素（P、H1等)。
text-indent:<長度>|<百分比>
長度的單位是px
如：text-indent:20px;
百分比：表示該文本縮進在對象中佔有的百分比。
二、設置背景和尺寸
1、背景的基本語法
背景是指對象在網頁中顯示的背景顏色或圖像。背景的對象可以是HTML標記、CSS中的ID或CLASS對象。
背景語法：
Background:background-color | background-image | background-repeat | background-attachment | background-position
背景的對象可以是HTML標記、也可以是CSS中的ID或CLASS對象。
2、設置背景顏色
background-color:transparent|color
前者表示背景色透明，後者表示顏色值。
應用：
#id1
{
background:red;
}
<body>
<div id="id1">背景顏色測試</div>
</body>
3、設置背景圖像
background-image:none | url
none是默認值，表示設置成沒有圖像的背景，url爲圖像的路徑。
#id2{
padding: 400px;
background-image:url("image/小兔子.jpg");
}
<body>
<div id="id2">背景顏色測試</div>
</body>
（1）設置背景圖像滾動
如下的滾動用background-attachment
語法：
background-attachment:scroll|fixed
scroll表示圖像因內容的滾動而滾動，而參數fixed表示背景圖像固定在網頁中。
（2）設置背景圖像的位置
控制圖像在對象背景中的位置。有兩種形式：
方式一：
background-position:length | length
length可以爲百分數或者由浮點數字和單位標識符組成的長度值。
如：
background-position: 30px 20%;
方式二：
background-position:position | position
position後面可接top、center、bottom、left、right等方向值。
（3）設置背景的鋪排
background-repeat: repeat | no-repeat | repeat-x |repeat-y
4、設置尺寸
（1）設置寬度
width:auto | length
auto根據瀏覽器窗口調節對象的寬度，length具體值來設置。
（2）設置高度
height:auto | length
三、設置外邊距和內邊距
外邊距（margin）指對象與外面距離或外延距離。內邊距（padding）表示對象內部填充距離。
1、外邊距的基本語法
語法：
margin:auto | length
margin是複合屬性，內聯對象要用margin時，必須先設定對象的height或width屬性。
2、外邊距的四邊設置
（1）頂端外邊距的用法
頂端外邊距，又稱上端外延距離，是對象與父對象的上端距離，
margin-top:auto | length
屬性值接auto表示相對邊的值。
（2）右端外邊距
margin-right:auto | length
（3）底端外邊距
margin-bottom:auto | length
（4）左端外邊距
margin-left:auto | length
應用案例：
css文件：
#mybody
{
width: 778px;/*設置寬爲778px*/
margin: auto;/*容器層上下左右的外邊距爲自動*/
font-size: 14px;/*字體大小*/
border: 0;/*容器層邊框爲0*/
}
div
{
border: 1px solid red;/*設置所有層爲1像素的紅色實線*/
}
#header
{
margin: auto;
width: 100%;/*設置寬度爲100%*/
height: 80px;
}
#contentleft
{
width: 180px;
height: 450px;
float: left;/*設置層向左漂移*/
}
#contentcenter
{
width: 410px;
height: 450px;
float: left;
margin-left: 6px;
}
#contentright
{
width: 170px;
height: 450px;
float: right;
margin-left: 6px;
}
#bottom
{
width: 100%;
margin-top: 450px;/*設置外邊距上下爲5px，左右爲自動*/
height: 60px;
}
html文件
<body>
<div id="mybody">
<div id="header">
這是網頁頭部，放置logo
</div>
<div id="contentleft">
網頁內容左欄
</div>
<div id="contentcenter">
網頁中間欄
</div>
<div id="contentright">
網頁內容右欄
</div>
<div id="bottom">
網頁底部
</div>
</div>
</body>
3、內邊距的基本語法
內邊距用在對象的內部，表示對象中的內部填充距離。
基本語法：
padding:length
length表示相對於父對象的百分比或具體數值。
應用測試：
css編碼：
#m1{
width: 200px;
height: 150px;
background: #ccc;
padding: 20px;/*設置內邊距*/
}
#m2{
height: 100%;
background: green;
}
html編碼：
<body>
<div id="m1">
<div id="m2"></div>
</div>
</body>
4、內邊距的四邊屬性
基本語法如下：
padding-top:length;
padding-right:length;
padding-bottom:length;
padding-left:length;