1.文字效果

• 文字樣式
  • 文字
  • 文字大小
  • 文字顏色
  • 文字粗細
  • 斜體
  • 下劃線、頂劃線、刪除線

#font{
    font-family : 微軟雅黑,宋體;       /*字型型別*/
    font-size : 1em;                 /*字型大小*/   
    color : #f00;                    /*字型顏色*/
    font-weight:100;                 /*字型粗細*/
    text-decoration:underline;       /*下劃線*/         
    text-decoration:overline;        /*頂劃線*/
    text-decoration:line-through;    /*刪除線*/
    text-decoration:blink;           /*閃爍*/
}
 

• 段落文字
  • 段落水平對齊方式
  • 段落垂直對齊方式
  • 行間距、字間距
  • 首字放大

2.圖片

• 圖片樣式
  • 圖片邊框
  • 圖片縮放
• 圖片對齊
  • 橫向對齊
  • 縱向對齊
• 圖文混排
  • 文字環繞
  • 設定圖片與文字的間距

img.test{
    
    /*圖片邊框*/
    border-style:dashed;    /*虛線*/
    border-color:blue;      /*邊框顏色*/
    border-width:2px;       /*邊框粗細*/
    
    /*圖片縮放*/
    width:50px;             /*絕對寬度*/
    height:40%;             /*相對高度*/
    
    /*對齊方式*/
    text-align:left;        /*左對齊*/
    text-align:center;      /*居中對齊*/
    text-align:right;       /*右對齊*/

    /*圖文混排*/
    float:left;             /*文字環繞圖片*/
    margin-right:50px;      /*右側距離*/
    margin-bottom:25px;     /*下側距離*/

}
 

4.頁面背景

• 背景顏色
  • 頁面背景色
  • 用背景色給頁面分塊
• 背景圖片
  • 頁面的背景圖
  • 背景圖片的重複
  • 背景圖片的位置
  • 固定背景圖片

body{
    
    /*背景顏色*/
    background-color:red;                    /*設定頁面背景顏色*/
    color:blue;                              /*設定頁面文字顏色*/
    
    /*背景圖片*/
    background-image:url(02.jpg);            /*頁面背景圖片*/
    background-repeat:repeat-y;              /*垂直方向上重複*/
    background-position:bottom right;        /*背景位置，右下*/

}

.topbanner{
    background-color:yellow;                  /*頂端banner的背景色*/
}

 

 5.Cluuuuuuuuuu.