1、第1章 CSS書寫及調用第2章 顏色與背景 第3章 字體 第4章 文本 第5章 連接 第6章 邊框第7章 定位 第8章 層次堆疊 第9章浮動元素float交流內容第1章 CSS書寫及調用 第1章 CSS書寫及調用CSS存放形式1、在頁面元素嵌套2、與頁面嵌套:在與之間 3、把css頁面移到外面形成一個單獨文件并以css為后綴(外部css) 第1章 CSS書寫及調用CSS格式1.類型(標簽)選擇符,直接使用元素名稱定義 html/*/ body/*/ div/*/ span/*/ 2. id選擇符 #top /*/ color:red; div. #top /*/ 第1章 CSS書寫及調用CSS

2、格式3、class 選擇符 .select_row color:red; 4. 分組選擇符(群選擇器) h1,h2,h3,h4,h5,h6,p/* line-height:1.6em; / .class1,class2/*/ 第1章 CSS書寫及調用CSS格式7. 子對象選擇符 #main table/*定義id為main的主體模塊中子對象table的樣式*/ #main .title/*定義id為main的主體模塊中子對象class為title的樣式*/以上是定義css格式的語法格式,但是不同格式也讓樣式具有優先級,簡單說下優先級順序: id選擇符 class選擇符 類型（標簽）選擇符 第2

3、章 顏色與背景 color /前景色background-color: /背景色 background-image:url() /背景圖像background-repeat: /平鋪背景圖像background-attachment/固定背景圖像 background-position /放置背景圖像background /背景 background-attachment 值描述background-attachment:scroll圖像會跟隨頁面滾動-非固定的background-attachment:fixed圖像是固定在屏幕上的body background-color: #FFCC66

4、; background-image: url(butterfly.gif);background-repeat: no-repeat; background-attachment: fixed; background-position body background-color: #FFCC66; background-image: url(butterfly.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; 值描述background-po

5、sition:2cm 2cm圖像被放置在頁面內距左邊2厘米、頂部2厘米的地方background-position:50% 25%圖像被放置在頁面內水平居中、離頂部四分之一處background-position:top right圖像被放置在頁面的右上角background 簡稱:background-color | background-image | background-repeat | background-attachment | background-position background: #FFCC66 url(butterfly.gif) no-repeat fixed r

6、ight bottom; background-color: #FFCC66; background-image: url(butterfly.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; 第3章 字體 font-family 字體font-style 樣式normal（正常）、italic（斜體）或oblique（傾斜 font-variant normal（正常）或small-caps（小體大寫字母 font-weight normal

7、（正常）或bold（加粗 )font-size 字體大小font 第4章 文本 text-indent 文本縮進 text-align文本對齊 text-decoration文本裝飾 underline overline line-throughletter-spacing字符間距 text-transform文本轉換首字母大寫（capitalize）、全部大寫（uppercase）或者全部小寫（lowercase） add()第5章 連接 偽類：link a:link color: blue; a:visited color: red; a:active background-color: #FFFF00; a:hover color: orange; font-style: italic; a text-decoration:none; 去下劃線add()border-top-width: thick; border-top-style: solid; border-top-color: red; 第6章邊框 border-styleadd()第7章 定位 相對定位 #dog1 position:relative; left: 350px; bottom: 150px; 絕對定位#box1 position:absolute; top: 50px; left: 50