《CSS技術(shù)概述W》PPT課件.ppt

,CSS技術(shù)概述,1、網(wǎng)頁的表現(xiàn)和內(nèi)容分離的實(shí)現(xiàn),1）、內(nèi)容(Content)內(nèi)容是頁面實(shí)際要傳達(dá)的真正信息，包括數(shù)據(jù)、文擋或者圖片等；,2）、結(jié)構(gòu)（Structure）結(jié)構(gòu)就是對網(wǎng)頁內(nèi)容進(jìn)行整理和分類。利用結(jié)構(gòu)化標(biāo)準(zhǔn)語言使網(wǎng)頁內(nèi)容更加具有邏輯性和易用性；（1）、HTML（2）、XML,(ExtensibleMarkupLanguage(可擴(kuò)展標(biāo)記語言)，XML最初設(shè)計(jì)的目的是彌補(bǔ)HTML的不足，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述；推薦使用W3C于2000年發(fā)布的XML1.0,（3）、XHTML(可擴(kuò)展超文本標(biāo)記語言)推薦使用W3C于2000年發(fā)布的XHTML1.0,結(jié)構(gòu)層主要用于對內(nèi)容進(jìn)行格式化處理。例如：定義標(biāo)題定義段落定義列表等等,3）、表現(xiàn)（Presentation)表現(xiàn)是對結(jié)構(gòu)化的信息進(jìn)行樣式上的控制，例如對顏色、大小、背景等外觀進(jìn)行控制。表現(xiàn)層標(biāo)準(zhǔn)語言CSS推薦使用w3c于1998年發(fā)布的CSS2.0W3C創(chuàng)建CSS標(biāo)準(zhǔn)目的是以CSS取代HTML的表格式布局。,4）、行為(Behavior)行為是對內(nèi)容的交互和操作效果；表現(xiàn)行為有以下2類：（1）、DOM。DOM是DocumentObjectModel(文檔對象模型)（2）、Script（腳本語言：JavaScript、VBScript）,網(wǎng)頁分層樣例,（1）、網(wǎng)頁的內(nèi)容,（2）、網(wǎng)頁的內(nèi)容+結(jié)構(gòu),（3）、網(wǎng)頁的內(nèi)容+結(jié)構(gòu)+表現(xiàn),例子：,1、bodybackground-image:url(images/water.jpg);margin:0000;,2、CSS來定義表格的一些屬性,一、CSS的定義,CSS主要是將定義好的規(guī)則應(yīng)用到文檔中的元素，這樣可以將網(wǎng)頁的內(nèi)容與網(wǎng)頁的表現(xiàn)形式進(jìn)行分開定義；這樣做的好處：1、提高設(shè)計(jì)的標(biāo)準(zhǔn)化程度；2、減少網(wǎng)頁設(shè)計(jì)的工作量；3、提高網(wǎng)站的可維護(hù)性。,1、CSS的定義的組成,一般來說，每個(gè)CSS樣式由一系列規(guī)則組成，每條規(guī)則由兩部分作成：選擇符和聲明（Declaration），每條聲明由：屬性名和屬性值組成；,P,:,color,red,選擇符,屬性名,聲明（Declaration）,屬性值,CSS的定義樣例,#Div2padding:20px;height:250px;width:250px;margin-top:30px;margin-right:50px;margin-bottom:30px;margin-left:50px;border:3pxsolid#FF3300;,填充,上邊距,二、CSS的選擇符分類,DreamWeare新建CSS樣式的對話框,1、類選擇符2、標(biāo)簽選擇符3、ID選擇符4、偽類選擇符,1、類選擇符,在CSS里用一個(gè)點(diǎn)開頭表示類別選擇符定義，例如：.14pxcolor:#f60;font-size:14px;在頁面中，用class=“類別名”的方法調(diào)用：14px大小的字體p.righttext-align:rightp.centertext-align:centerdddddddddddd,.abc,2、ID選擇符,在CSS里用“#”開頭表示ID選擇符的定義,#Div2padding:20px;height:250px;width:250px;margin-top:30px;margin-right:50px;margin-bottom:30px;margin-left:50px;border:3pxsolid#FF3300;,.Div2padding:20px;height:250px;width:250px;margin-top:30px;margin-right:50px;margin-bottom:30px;margin-left:50px;border:3pxsolid#FF3300;,類選擇符,P#title01font-family:”宋體”；font-size:12px;color:#FF0000;,段落的標(biāo)題,P.title01font-family:”宋體”；font-size:12px;color:#FF0000;,段落的標(biāo)題,#abc,不能這樣寫否則結(jié)果如下abc,ID選擇符與類選擇符的差別：,1、類選擇符可以重復(fù)使用，而且可以在任意元素上使用，使用任意次；2、HTML內(nèi)id屬性是唯一的，只有擁有該id的元素才會應(yīng)用該樣式；3、ID選擇符的優(yōu)先權(quán)高于類選擇符。,ID選擇器,類選擇器,3、標(biāo)簽選擇符,標(biāo)簽選擇符也稱類型選擇符，HTML中所有標(biāo)簽都可以做為標(biāo)簽選擇符在CSS中直接寫標(biāo)簽名即可，即是對標(biāo)簽樣式的重新定義；,bodybackground-image:url(images/water.jpg);,4、偽類選擇符,偽類可以看作是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動所識別的特殊選擇符號。偽類所指定的對象在文檔中并不存在，而是指定的是元素的某種狀態(tài)。,偽類定義的語法結(jié)構(gòu)：選擇符：偽類名屬性：值,偽類名在CSS中已經(jīng)定義好了，不能隨意取名；,華東交通大學(xué),a元素的偽類：1、link表示未訪問的連接2、visited表示已經(jīng)訪問過的連接3、active表示激活的連接4、hover表示鼠標(biāo)停留在連接上,a:linkfont-family:宋體;font-size:12px;color:#FF0000;a:visitedfont-family:宋體;font-size:12px;color:#00FF00;a:hoverfont-family:宋體;font-size:12px;color:#0000FF;a:activefont-family:宋體;font-size:12px;color:#FF00FF;,5、標(biāo)簽指定式選擇符,在使用標(biāo)簽選擇符時(shí)，如果同時(shí)定義id或者class選擇符，則可以對標(biāo)簽選擇符進(jìn)行分類。,h1.wordsfont-size:18px;line-height:140%;,h1#navbarfont-size:18px;line-height:140%;,表示針對所有class為words的h1標(biāo)簽設(shè)置樣式,表示針對id為navbar的h1標(biāo)簽設(shè)置樣式,標(biāo)簽指定式選擇符的好處：1、標(biāo)簽指定式選擇符可以更精確地選擇特定的標(biāo)簽進(jìn)行樣式設(shè)定；2、可以對同一類標(biāo)簽再進(jìn)行樣式分類；,h1.wordsfont-size:18px;line-height:140%;,h1.navbarfont-size:18px;line-height:140%;,6、包含選擇符,包含選擇符是可以單獨(dú)對某種元素包含關(guān)系進(jìn)行樣式定義。,例如：元素1包含元素2，要定義元素2的樣式：,1）、使用類選擇符：.class2,包含多個(gè)元素2,則每個(gè)元素2都必須進(jìn)行class申明,2）、使用ID選擇符：#id21#id22#id23,包含多個(gè)元素2,則每個(gè)元素2都必須進(jìn)行ID申明,3）、標(biāo)簽指定式選擇符：元素1元素2,即使包含多個(gè)元素2,則每個(gè)元素2都無須進(jìn)行任何申明,標(biāo)簽指定式選擇符好處：有時(shí)候可以避免過多的使用id或者class樣式定義。,tableafont-size:15px;color:red;,表示table標(biāo)簽內(nèi)的所有a對象的樣式,包含選擇符樣例演示,7、CSS應(yīng)用到網(wǎng)頁中,1、標(biāo)記加注法2、外部調(diào)用法,CascadingOrderpfont-size:12pt這個(gè)段落的內(nèi)嵌樣式(InlineStyle)覆蓋(overwrite)了內(nèi)部樣式表(InternalStyleSheet)，顯示的字體大小是30pt，而不是12pt。,CSS常用屬性,1、CSS字體屬性(Font),字體名稱屬性(font-family)這個(gè)屬性設(shè)定字體名稱，如Arial,Tahoma,Courier等。例句如下：.s1font-family:Arial字體大小屬性(font-size)這個(gè)屬性可以設(shè)置字體的大小。字體大小的設(shè)置可以有多種方式，最常用的就是px（象素）和pt（磅）。例句如下：.s2font-size:16pt字體風(fēng)格屬性(font-style)這個(gè)屬性有三個(gè)值可選：normal(普通)，italic(斜體)或oblique(傾斜)。normal是缺省值，italic,oblique都是斜體顯示。例句如下：.s1font-sytle:italic,字體濃淡屬性(font-weight)這個(gè)屬性常用值是normal和bold，normal是缺省值。例句如下：這段文字字體的濃淡屬性(font-weight)值是bold。字體變量屬性(font-variant)這個(gè)屬性有兩個(gè)值，normal和small-caps，normal是缺省值。small-caps表示小的大寫字體。例句如下：.s1font-variant:small-caps字體屬性(font)這個(gè)屬性是各種字體屬性的一種快捷的綜合寫法。這個(gè)屬性可以綜合字體風(fēng)格屬性(font-style)，字體變量屬性(font-variant)，字體濃淡屬性(font-weight)，字體大小屬性(font-size)等屬性。例句如下：.s1font:italicnormalbold11ptarial字體顏色(color)caps表示小的大寫字體。例句如下：等屬性！字體顏色用CSS中的color屬性來表示。,2、CSS常用文本屬性,文本對齊屬性(text-align)這個(gè)屬性用來設(shè)定文本的對齊方式。有以下值：left(居左，缺省值)right(居右)center(居中)justify(兩端對齊)示例代碼如下：.p2text-align:right文本修飾屬性(text-decoration)這個(gè)屬性主要設(shè)定文本劃線的屬性。有以下值：none(無，缺省值)underline(下劃線)overline(上劃線)line-through(當(dāng)中劃線)示例代碼如下：.p2text-decoration:underline,文本縮進(jìn)屬性(text-indent)這個(gè)屬性設(shè)定文本首行縮進(jìn)。其值有以下設(shè)定方法：length(長度，可以用絕對單位(cm,mm,in,pt,pc)或者相對單位(em,ex,px)percentage(百分比，相當(dāng)于父對象寬度的百分比)示例代碼如下：.p1text-indent:8mm行高屬性(line-height)這個(gè)屬性設(shè)定每行之間的距離。其值有以下設(shè)定方法：normal(缺省值)length(長度，可以用絕對單位(cm,mm,in,pt,pc)或者相對單位(em,ex,px)percentage(百分比，相當(dāng)于父對象高度的百分比)示例代碼如下：.p1line-height:1cm,字間距屬性(letter-spacing)這個(gè)屬性用來設(shè)定字符之間的距離。normal(缺省值)length(長度，可以用絕對單位(cm,mm,in,pt,pc)或者相對單位(em,ex,px)示例代碼如下：.p1letter-spacing:3mm顏色屬性(color)用顏色屬性(color)可以改變文本的字體顏色。字體顏色代碼請參見HTML顏色參考(HTMLColorReference)。示例代碼如下：.p1color:gray,3、CSS背景屬性,背景顏色屬性(background-color)演示示例上面的代碼表示圖片豎向重復(fù)。這個(gè)屬性為HTML元素設(shè)定背景顏色，相當(dāng)于HTML中bgcolor屬性。bodybackground-color:#99FF00;上面的代碼表示Body這個(gè)HTML元素的背景顏色是翠綠色的。背景圖片屬性(background-image)這個(gè)屬性為HTML元素設(shè)定背景圖片，相當(dāng)于HTML中background屬性。上面的代碼為Body這個(gè)HTML元素設(shè)定了一個(gè)背景圖片。,背景重復(fù)屬性(background-repeat)這個(gè)屬性和background-image屬性連在一起使用，決定背景圖片是否重復(fù)。如果只設(shè)置background-image屬性，沒設(shè)置background-repeat屬性，在缺省狀態(tài)下，圖片既橫向重復(fù)，又豎向重復(fù)。repeat-x背景圖片橫向重復(fù)repeat-y背景圖片豎向重復(fù)no-repeat背景圖片不重復(fù)bodybackground-image:url(./images/css_tutorials/background.jpg);background-repeat:repeat-y上面的代碼表示圖片豎向重復(fù)。背景附著屬性(background-attachment)這個(gè)屬性和background-image屬性連在一起使用，決定圖片是跟隨內(nèi)容滾動，還是固定不動。這個(gè)屬性有兩個(gè)值，一個(gè)是scroll，一個(gè)是fixed。缺省值是scroll。bodybackground-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat;background-attachment:fixed上面的代碼表示圖片固定不動，不隨內(nèi)容滾動而動。示例,背景位置屬性(background-position)這個(gè)屬性和background-image屬性連在一起使用，決定了背景圖片的最初位置。bodybackground-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat;background-position:20px60px上面的代碼表示背景圖片的初始位置距離網(wǎng)頁最左面20px，距離網(wǎng)頁最上面60px。背景屬性(background)這個(gè)屬性是設(shè)置背景相關(guān)屬性的一種快捷的綜合寫法，包括background-color,background-image,background-repeat,backgroundattachment,background-position。bodybackground:#99FF00url(./images/css_tutorials/background.jpg)no-repeatfixed40px100px上面的代碼表示，網(wǎng)頁的背景顏色是翠綠色，背景圖片是background.jpg圖片，背景圖片不重復(fù)顯示，背景圖片不隨內(nèi)容滾動而動，背景圖片距離網(wǎng)頁最左面40px，距離網(wǎng)頁最上面100px。,4、CSS邊框?qū)傩?Border),邊框風(fēng)格屬性(border-style)這個(gè)屬性用來設(shè)定上下左右邊框的風(fēng)格，它的值如下：none(沒有邊框，無論邊框?qū)挾仍O(shè)為多大)dotted(點(diǎn)線式邊框)dashed(破折線式邊框)solid(直線式邊框)double(雙線式邊框)groove(槽線式邊框)ridge(脊線式邊框)inset(內(nèi)嵌效果的邊框)outset(突起效果的邊框)示例邊框?qū)挾葘傩?border-width)這個(gè)屬性用來設(shè)定上下左右邊框的寬度，它的值如下：medium(是缺省值)thin(比medium細(xì))thick(比medium粗)用長度單位定值。可以用絕對長度單位(cm,mm,in,pt,pc)或者用相對長度單位(em,ex,px)。演示示例：分別用medium,thin,thick和長度單位定制的CSS邊框?qū)挾葘傩允纠?邊框顏色屬性(border-color)這個(gè)屬性用來設(shè)定上下左右邊框的顏色。例句如下：.d5border-color:gray;border-style:solid;邊框?qū)傩?border)這個(gè)屬性是邊框?qū)傩缘囊粋€(gè)快捷的綜合寫法，它包含border-width,border-style和border-color。例句如下：.d1border:5pxsolidgray;,上下左右四個(gè)邊框不但可以統(tǒng)一設(shè)定，也可以分開設(shè)定。單邊邊框?qū)傩陨舷伦笥宜膫€(gè)邊框不但可以統(tǒng)一設(shè)定，也可以分開設(shè)定。設(shè)定上邊框?qū)傩?，你可以使用border-top,border-top-width,border-top-style,border-top-color。分別用medium,thin,thick和長度單位定制的CSS邊框?qū)挾葘傩允纠?。設(shè)定下邊框?qū)傩?，你可以使用border-bottom,border-bottom-width,border-bottom-style,border-bottom-color。上下左右四個(gè)邊框不但可以統(tǒng)一設(shè)定，也可以分開設(shè)定。設(shè)定左邊框?qū)傩?，你可以使用border-left,border-left-width,border-left-style,border-left-color。設(shè)定右邊框?qū)傩裕憧梢允褂胋order-right,border-right-width,border-right-style,border-right-color。演示示例：設(shè)置單邊邊框?qū)傩缘氖纠?5、CSS邊距屬性(Margin),邊距屬性是用來設(shè)置頁面中一個(gè)元素所占空間的邊緣到相鄰元素之間的距離。左邊距屬性(margin-left)這個(gè)屬性用來設(shè)定左邊距的寬度。示例如下：.d1margin-left:1cm演示示例右邊距屬性(margin-right)上下左右邊距寬度相同：上下左右邊距寬度相同。這個(gè)屬性用來設(shè)定右邊距的寬度。示例如下：.d1margin-right:1cm上邊距屬性(margin-top)這個(gè)屬性用來設(shè)定上邊距的寬度。示例如下：.d1margin-top:1cm下邊距屬性(margin-bottom)這個(gè)屬性用來設(shè)定下邊距的寬度。示例如下：.d1margin-bottom:1cm,邊距屬性(margin)這個(gè)屬性是設(shè)定邊距寬度的一個(gè)快捷的綜合寫法，用這個(gè)屬性可以同時(shí)設(shè)定上下左右邊距屬性。你可以為上下左右邊距設(shè)置相同的寬度。示例入下：.d1margin:1cm你也可以分別設(shè)置邊距，順序是上，右，下，左。示例如下：.d1margin:1cm2cm3cm4cm上面的代碼表示，上邊距為1cm，右邊距為2cm，下邊距為3cm，左邊距為4cm。演示示例：上下左右邊距寬度相同演示示例：上下左右邊距寬度各不相同,6、CSS間隙屬性(Padding),間隙屬性(padding)是用來設(shè)置元素內(nèi)容到元素邊界的距離。左間隙屬性(padding-left)這個(gè)屬性用來設(shè)定左間隙的寬度。示例如下：.d1padding-left:1cm演示示例右間隙屬性(padding-right)左間隙為4cm。這個(gè)屬性用來設(shè)定上間隙的寬度。這個(gè)屬性用來設(shè)定右間隙的寬度。示例如下：.d1padding-right:1cm上間隙屬性(padding-top)這個(gè)屬性用來設(shè)定上間隙的寬度。示例如下：.d1padding-top:1cm下間隙屬性(margin-bottom),間隙屬性(padding).這個(gè)屬性用來設(shè)定下間隙的寬度。示例如下：.d1padding-bottom:1cm間隙屬性(padding)這個(gè)屬性是設(shè)定間隙寬度的一個(gè)快捷的綜合寫法，用這個(gè)屬性可以同時(shí)設(shè)定上下左右間隙屬性。你可以為上下左右間隙設(shè)置相同的寬度。示例入下：.d1padding:1cm你也可以分別設(shè)置間隙，順序是上，右，下，左。示例如下：這個(gè)屬性用來設(shè)定上間隙的寬度。.d1padding:1cm2cm3cm4cm是用來設(shè)置元素內(nèi)容到元素邊界的距離。上面的代碼表示，上間隙為1cm，右間隙為2cm，下間隙為3cm，左間隙為4cm。演示示例：上下左右間隙寬度相同演示示例：上下左右間隙寬度各不相同,7、CSS盒子模式(BoxModel),盒子里由外至里依次是：margin邊距border邊框padding間隙(也有人稱做補(bǔ)丁)content(內(nèi)容，比如文本，圖片等)CSS邊距屬性(margin)是用來設(shè)置一個(gè)元素所占空間的邊緣到相鄰元素之間的距離。CSS邊框?qū)傩?border)用來設(shè)定一個(gè)元素的邊線。CSS間隙屬性(padding)是用來設(shè)置元素內(nèi)容到元素邊框的距離。CSS背景屬性指的是content和padding區(qū)域。CSS屬性中的width和height指的是content區(qū)域的寬和高。,二、CSS的布局基礎(chǔ),1、定位屬性,position:static|absolute|fixed|relative,Static靜態(tài)（默認(rèn)）它會按照普通順序生成，就如它們在html中的出現(xiàn)順序一樣。Relative相對使元素偏移一定的距離，偏移方向及幅度有top,right,bottom,left等屬性聯(lián)合指定。#div1Position:relative;Top:20px;Left:40px;,Absolute絕對使元素從html普通元素流中分離出來，并把他送到一個(gè)完全屬于自己的定位中。通過設(shè)置top,right,bottom,left的值，可以使絕對定位的元素放到任何地方。#div1Width:200px;Position:absolute;Top:20px;Left:40px;,如果給父元素div1定義為position:relative子元素div2定義為Position:absolute那么子元素div2的位置將相對于父元素div1,而不是整個(gè)網(wǎng)頁。#div