css教程PPT課件

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

2、lect_rowcolor:red;4.分組選擇符h1,h2,h3,h4,h5,h6,p/*line-height:1.6em;/.class1,class2/*/,.,5,第1章CSS書(shū)寫(xiě)及調(diào)用,CSS格式5.包含選擇符.div1h2pspan/*多層包含選擇符*/font-size:18px;6.元素指定選擇符span.red/*定義div元素中class為red元素的顏色為紅色*/color:red;span#top/*定義div元素中id為top元素的顏色為紅色寬度為百分之百*/width:100%;,.,6,第1章CSS書(shū)寫(xiě)及調(diào)用,CSS格式7.子對(duì)象選擇符#maintable/*定

3、義id為main的主體模塊中子對(duì)象table的樣式*/#main.title/*定義id為main的主體模塊中子對(duì)象class為title的樣式*/以上是定義css格式的語(yǔ)法格式,但是不同格式也讓樣式具有優(yōu)先級(jí),簡(jiǎn)單說(shuō)下優(yōu)先級(jí)順序:id選擇符class選擇符類(lèi)型選擇符,.,7,第2章顏色與背景,color/前景色background-color:/背景色background-image:url()/背景圖像background-repeat:/平鋪背景圖像background-attachment/固定背景圖像background-position/放置背景圖像background/背景,.,

4、8,background-repeat,background-repeat,bodybackground-color:#FFCC66;background-image:url(butterfly.gif);background-repeat:no-repeat;,.,9,background-attachment,bodybackground-color:#FFCC66;background-image:url(butterfly.gif);background-repeat:no-repeat;background-attachment:fixed;,.,10,background-posi

5、tion,bodybackground-color:#FFCC66;background-image:url(butterfly.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:rightbottom;,.,11,background,簡(jiǎn)稱(chēng):background-color|background-image|background-repeat|background-attachment|background-positionbackground:#FFCC66url(butterf

6、ly.gif)no-repeatfixedrightbottom;background-color:#FFCC66;background-image:url(butterfly.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:rightbottom;,.,12,第3章字體,font-family字體font-style樣式normal（正常）、italic（斜體）或oblique（傾斜font-variantnormal（正常）或small-caps（小體大寫(xiě)字母font-weig

7、htnormal（正常）或bold（加粗)font-size字體大小font,.,13,第4章文本,text-indent文本縮進(jìn)text-align文本對(duì)齊text-decoration文本裝飾underlineoverlineline-through字符間距l(xiāng)etter-spacing字符間距text-transform文本轉(zhuǎn)換首字母大寫(xiě)（capitalize）、全部大寫(xiě)（uppercase）或者全部小寫(xiě)（lowercase）,add(),.,14,第5章連接,偽類(lèi)：linka:linkcolor:blue;a:visitedcolor:red;a:activebackground-col

8、or:#FFFF00;a:hovercolor:orange;font-style:italic;atext-decoration:none;去下劃線(xiàn),add(),border-top-width:thick;border-top-style:solid;border-top-color:red;,.,15,第6章邊框,border-width:“thin”（薄）、“medium”（普通）或“thick”（厚）border-colorborder-styleBorder縮寫(xiě)border:1pxsolidblue;Boder可分bodder-left-color(style、width),add(),.,16,第6章邊框border-style,add(),.,17,第7章定位,相對(duì)定位#dog1position:relative;left:350px;bottom:150px;絕對(duì)定位#box1position:absolute;top:50px;left:50px;,add(),.,18,第8章層次堆疊,z-index數(shù)字較大的元素將疊加在數(shù)字較小的元素之上。#ten_of_diamondsposition:absolute;left:100px;