1、2006-12-18,1,CSS,CSS(Cascading Style Sheets)簡介,HTML主要側(cè)重于定義內(nèi)容，比如表示一個段落，表示標題，而并沒有過多設(shè)計HTML的排版和界面效果。 為了解決HTML排版和界面效果的局限性的問題，人們也走了不少彎路，用了一些不好的方法，比如給HTML增加很多的屬性結(jié)果將代碼變得很臃腫，將文本變成圖片 ，過多利用Table來排版，用空白的圖片表示白色的空間等 。直到CSS出現(xiàn)。,CSS簡介,CSS可算是網(wǎng)頁設(shè)計的一個突破，它解決了網(wǎng)頁界面排版的難題?？梢赃@么說，HTML的Tag主要是定義網(wǎng)頁的內(nèi)容(Content)，而CSS決定這些網(wǎng)頁內(nèi)容如何顯示(L

2、ayout)。 CSS的英文是Cascading Style Sheets，中文可以翻譯成串聯(lián)式樣式表 。 CSS按其位置可以分成三種： 內(nèi)嵌樣式(Inline Style) 內(nèi)部樣式表(Internal Style Sheet) 外部樣式表(External Style Sheet),內(nèi)嵌樣式,Inline Style是寫在Tag里面的。內(nèi)嵌樣式只對所在的Tag有效 。 這個Style定義里面的文字 是20pt字體，字體顏色是紅色。,內(nèi)部樣式表,內(nèi)部樣式表是寫在HTML的里面的。內(nèi)部樣式表只對所在的網(wǎng)頁有效。 內(nèi)部樣式表(Internal Sytle Sheet)要用到Style這個Tag，

3、寫法如下 ： . ,內(nèi)部樣式表, H1.mylayout border-width:1; border:solid ; text-align:center; color:red 這個標題使用了Style。 這個標題沒有使用Style。 ,外部樣式表,如果很多網(wǎng)頁需要用到同樣的樣式(Styles)，用什么方法呢？ 將樣式(Styles)寫在一個以.css為后綴的CSS文件里，然后 在每個需要用到這些樣式(Styles)的網(wǎng)頁里引用這個CSS文件 。 比如可以用文本編輯器建立一個叫home的文件，文件后綴不要用.txt，改成.css。文件內(nèi)容如下： H1.mylayout border-width

4、: 1; b order: solid; text-align: center;col or:red 然后你建立一個網(wǎng)頁，代碼如下：,外部樣式表, 這個標題使用了Style 。 這個標題沒有使用Style。 ,外部樣式表,使用外部(Extenal )樣式表，相對于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點： 使用外部(Extenal )樣式表，相對于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點： 樣式代碼可以復用 。一個外部CSS文件，可以被很多網(wǎng)頁共用。 便于修改。如果要修改樣式，只需要修改CSS文件，而 不需要修改每個網(wǎng)頁。 提高網(wǎng)頁顯示的速度 。如果

5、樣式寫在網(wǎng)頁里，會降低網(wǎng)頁顯示的速度，如果網(wǎng)頁引用一個CSS文件，這個CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁早已經(jīng)引用過它)，網(wǎng)頁顯示的速度就比較快。,串聯(lián)(Cascading),CSS第一個字母，是Cascading，意為串聯(lián)。它是指 不同來源的樣式(Styles)可以合在一起，形成一種樣式。 Cascading的順序是： 瀏覽器缺省(browser default)(優(yōu)先級最低 ) 外部樣式表(Extenal Style Sheet) 內(nèi)部樣式表(Internal Style Sheet) 內(nèi)嵌樣式表 (Inline Style)(優(yōu)先級最高) 樣式 (Styles)的優(yōu)先級依次 是內(nèi)嵌 (

6、inline), 內(nèi)部(internal), 外部(external), 瀏覽器缺省(browser default)。假設(shè)內(nèi)嵌 (Inline)樣式中有font-size :30pt , 而內(nèi)部 (Internal)樣式中有font-size :12pt，那么內(nèi)嵌(Inline)式樣式就會覆蓋內(nèi)部(Internal)樣式。,CSS語法,基本語法 一個樣式(Style)的語法由三部分構(gòu)成：Selector(中文叫選擇器)，屬性(Property)，屬性值(Value)。 selector property: value 舉個例子，下面的代碼p就是selector，color就是屬性 ，blue

7、就是屬性值 。 p color:blue HTML中所有的Tag都可以作為selector。,CSS語法,如果你想為Style加多個屬性，在兩個屬性之間要用分號加以分隔。下面的Style就包含2個屬性，一個是對齊方式居中，一個字體顏色為紅，當中用分號分隔開。 p text-align:center;color:red 為了提高Style代碼的可讀性，你也可以分行寫： p text-align: center; color: black; font-family: arial ,組合(Grouping ),你也可以將相同的屬性和屬性值賦予多個Selector。Selector之間用逗號分隔。 h

8、1,h2,h3,h4,h5 ,h6 color: red 上面的例子是將所有正文標題(到)的字體顏色都變成紅色。,Class Selector,利用Class Selector，你可以用同樣的HTML Tag構(gòu)成不同的樣式。比如說，你希望段落有兩種樣式，一種是居中對齊，一種是居右對齊。你就可以寫如下樣式： p.right text-align:right p.center text-align:center 其中right和center就是兩個class。然后 你就可以引用這兩個class，示例代碼如下 ： 這一段居中顯示。 這一段是居右顯示。,Class Selector,你也可以不用HTM

9、L Tag，直接用.加上Class名稱作為一個Selector。示例代碼如下： .center text-align : center 這種通用的Class Selector就沒有Tag的局限性，可以用于 不同的Tag。比如： 這個標題居中顯示。 這個段落居中顯示。,Contextual Selector,你可以為嵌入其它Tag的Tag定義樣式，示例代碼如下： p emcolor: red Em這個Tag嵌套 在P里面。p em就叫做Contextual Selector，定義嵌套于P里的Em的樣式。這個例子表示，在P里面的用Em這個Tag標記的字體顏色是紅色。,CSS注釋,為了方便你自己或者

10、他人日后更好地理解你的CSS代碼，你可以寫CSS代碼注釋。CSS代碼注釋以/*開頭，以*/結(jié)束。 /* 段落樣式 */ p text-align : center; /* 居中顯示 */ color: black; font-family: arial ,CSS字體屬性,字體名稱屬性(font-family) 這個屬性設(shè)定字體名稱，如Arial, Tahoma, Courier等。例句如下： .s1 font-family :Arial 字體大小屬性(font -size) 這個屬性可以設(shè)置字體的大小。字體大小的設(shè)置可以有多種方式，最常用的就 是pt和px(pixel)。例句如下： .s2 f

11、ont-size:16pt,CSS字體屬性,字體風格屬性(font-style) 這個屬性有三個值可選：normal , italic, oblique。normal是缺省值，italic, oblique都是斜體顯示。例句如下： .s1 font-sytle :italic 字體濃淡屬性(font -weight) 這個屬性常用值是normal和bold，normal是缺省值。例句如下： 這段文字字體的濃淡屬性(font-weight)值是bold。,CSS字體屬性,字體變量屬性 (font-variant) 這個屬性有兩個值，normal和small-caps，normal 是缺省值。sm

12、all-caps表示小的大寫字體。例句如下： .s1 font-variant:small-caps 字體屬性(font ) 這個屬性是各種字體屬性的一種快捷的綜合寫法 。這個屬性可以綜合字體風格屬性(font-style)，字體變量屬性(font-variant)，字體濃淡屬性(font-weight)，字體大小屬性(font-size )等屬性。例句如下： .s1 font:italic normal bold 11pt arial,CSS字體屬性,字體顏色(color) 字體顏色用CSS中的color屬性來表示 。,CSS常用文本屬性,文本對齊屬性 (text-align) 這個屬性用來

13、設(shè)定文本的對齊方式。有以下值： left (居左，缺省值) right (居右) center (居中) 示例代碼如下： .p2 text-align :right,CSS常用文本屬性,文本修飾屬性(text-decoration) 這個屬性主要設(shè)定文本劃線的屬性。有以下值： none (無 ，缺省值 ) underline (下劃線) overline (上劃線) line-through (當中劃線) .p2 text-decoration: underline,CSS常用文本屬性,文本縮進屬性 (text-indent) 這個屬性設(shè)定文本首行縮進。其值有以下設(shè)定方法： length (長

14、度，可以用絕對單位(cm, mm, in, pt , pc)或者相對單位 (em, ex, px) percentage (百分比，相當于父對象寬度的百分比) 示例代碼如下： .p1 text-indent: 8mm .p2 text-indent:50%,CSS常用文本屬性,行高屬性(line-height) 這個屬性設(shè)定每行之間的距離。其值有以下設(shè)定方法： normal (缺省值) length (長度，可以用絕對單位(cm, mm, in, pt,pc)或者相對單位 (em, ex, px) percentage (百分比，相當于父對象高度的百分比) 示例代碼如下： .p1 line-h

15、eight:1cm,CSS常用文本屬性,字間距屬性(letter-spacing) 這個屬性用來設(shè)定字符之間的距離。 normal (缺省值) length (長度，可以用絕對單位(cm , mm, in, pt, pc)或者相對單位 (em, ex , px) 示例代碼如下： .p1 letter-spacing: 3mm,CSS常用文本屬性,顏色屬性(color) 用顏色屬性(color)可以改變文本的字體顏色。 .p1color:gray,CSS背景屬性,背景顏色屬性(background-color) 這個屬性為HTML元素設(shè)定背景顏色，相當于HTML中bgcolor屬性。 body

16、background -color:#99FF00; 背景圖片屬性(background-image) 這個屬性為HTML元素設(shè)定背景圖片，相當于HTML中background屬性。 ,CSS背景屬性,背景重復屬性(background-repeat) 這個屬性和background-image屬性連在一起使用，決定背景圖片是否重復。如果只設(shè)置background-image屬性，沒設(shè)置background-repeat屬性，在缺省狀態(tài)下，圖片既橫向重復，又豎向重復。 repeat-x 背景圖片橫向重復 repeat-y 背景圖片豎向重復 no-repeat 背景圖片不重復 body back

17、ground-image :url(./images/background.jpg); background-repeat:repeat-y,CSS背景屬性,背景附著屬性(background-attachment) 這個屬性和background-image屬性連在一起使用，決定圖片是跟隨內(nèi)容滾動，還是固定不動。這個屬性有兩個值，一個是scroll，一個 是fixed。缺省值是scroll 。 body background-image:url(./images/background .jpg); background-repeat:no-repeat; background-attachm

18、ent :fixed 上面的代碼表示圖片固定不動，不隨內(nèi)容滾動而動。,CSS背景屬性,背景位置屬性(background-position) 這個屬性和background-image屬性連在一起使用，決定了背景圖片的最初位置。 body background-image:url(./images/background.jpg);background-repeat :no-repeat; background-position :20px 60px 上面的代碼表示背景圖片的初始位置距離網(wǎng)頁最左面20px，距離網(wǎng)頁最上面60px。,CSS背景屬性,背景屬性(background) 這個屬性是設(shè)置

19、背景相關(guān)屬性的一種快捷的綜合寫法， 包括background-color, background-image, background-repeat, backgroundattachment , background-position 。 body background:#99FF00 url(./images/background.jpg) no-repeat fixed 40px 100px ,CSS邊框?qū)傩?邊框風格屬性(border -style ) 這個屬性用來設(shè)定上下左右邊框的風格 ，它的值如下 ： none (沒有邊框，無論邊框?qū)挾仍O(shè)為多大) dotted (點線式邊框) das

20、hed (破折線式邊框) solid (直線式邊框) double (雙線式邊框) groove (槽線式邊框) ridge(脊線式邊框) inset (內(nèi)嵌效果的邊框) outset (突起效果的邊框),CSS邊框?qū)傩?邊框?qū)挾葘傩?border-width) 這個屬性用來設(shè)定上下左右邊框的寬度，它的值如下： medium (是缺省值) thin (比medium細) thick (比medium粗) 用長度單位定值?？梢杂媒^對長度單位(cm, mm , in, pt, pc)或者用相對長度單位 (em, ex, px)。,CSS邊框?qū)傩?邊框顏色屬性(border-color) 這個屬性用

21、來設(shè)定上下左右邊框的顏色。例句如下： .d5 border-color:gray;border-style:solid; 邊框?qū)傩?border) 這個屬性是邊框?qū)傩缘囊粋€快捷的綜合寫法，它包含border-width, border -style和border-color。 .d1 border:5px solid gray;,CSS邊框?qū)傩?單邊邊框?qū)傩?上下左右四個邊框不但可以統(tǒng)一設(shè)定，也可以分開設(shè)定。 設(shè)定上邊框?qū)傩裕憧梢允褂胋order-top, border-top-width, border-top-style, border-top-color。 設(shè)定下邊框?qū)傩裕憧梢允褂胋

22、order-bottom , border-bottom-width, border-bottom-style, border-bottom-color。 設(shè)定左邊框?qū)傩?，你可以使用border-left, border-left-width, border-left-style, border-left-color。 設(shè)定右邊框?qū)傩?，你可以使用border-right, border-right-width, border-right-style, border-right -color。,CSS邊距屬性,邊距屬性是用來設(shè)置頁面中一個元素所占空間的邊緣到相鄰元素之間的距離。 左邊距屬性(ma

23、rgin-left) 這個屬性用來設(shè)定左邊距的寬度。示例如下： .d1margin-left :1cm 右邊距屬性 (margin-right ) 這個屬性用來設(shè)定右邊距的寬度。示例如下： .d1 margin-right:1cm,CSS邊距屬性,上邊距屬性(margin-top) 這個屬性用來設(shè)定上邊距的寬度。示例如下： .d1 margin-top:1cm 下邊距屬性 (margin-bottom) 這個屬性用來設(shè)定下邊距的寬度。示例如下： .d1margin-bottom:1cm 邊距屬性(margin) 這個屬性是設(shè)定邊距寬度的一個快捷的綜合寫法，用這個屬性可以同時設(shè)定上下左右邊距屬性

24、。,CSS邊距屬性,你可以為上下左右邊距設(shè)置相同的寬度 。示例入下： .d1 margin:1cm 你也可以分別設(shè)置邊距，順序 是上，右，下，左。示例如下： .d1 margin:1cm 2cm 3cm 4cm 上面的代碼表示 ，上邊距為1cm，右邊距為2cm，下邊距為3cm，左邊距為4cm。,CSS間隙屬性,間隙屬性(padding)是用來設(shè)置元素內(nèi)容到元素邊界的距離。 左間隙屬性(padding-left ) 這個屬性用來設(shè)定左間隙的寬度 。示例如下： .d1padding -left:1cm 右間隙屬性(padding-right ) 這個屬性用來設(shè)定右間隙的寬度。示例如下： .d1 p

25、adding-right:1cm,CSS間隙屬性,上間隙屬性(padding-top) 這個屬性用來設(shè)定上間隙的寬度。示例如下： .d1 padding-top:1cm 下間隙屬性(margin-bottom ) 這個屬性用來設(shè)定下間隙的寬度。示例如下： .d1padding-bottom:1cm 間隙屬性(padding ) 這個屬性是設(shè)定間隙寬度的一個快捷的綜合寫法 ，用這個屬性可以同時設(shè)定上下左右間隙屬性。,CSS間隙屬性,你可以為上下左右間隙設(shè)置相同的寬度。示例入下 ： .d1 padding:1cm 你也可以分別設(shè)置間隙，順序是上，右，下，左。示例如下： .d1 padding:1c

26、m 2cm 3cm 4cm 上面的代碼表示，上間隙為1cm，右間隙為2cm，下間隙為3cm，左間隙為4cm。,CSS盒子模式(Box Model),CSS盒子模式(Box Model),盒子里由外至里依次是： margin 邊距 border 邊框 padding 間隙 (也有人稱做補丁 ) content (內(nèi)容，比如文本，圖片等 ) CSS 邊距屬性 (margin) 是用來設(shè)置一個元素所占空間的邊緣到相鄰元素之間的距離。 CSS 邊框?qū)傩?(border) 用來設(shè)定一個元素的邊線。 CSS 間隙屬性 (padding) 是用來設(shè)置元素內(nèi)容到元素邊框的距離。 CSS 背景屬性指的是 con

27、tent 和 padding 區(qū)域。 CSS 屬性中的 width 和 height 指的是 content 區(qū)域的寬 和高。,CSS列表樣式屬性,列表樣式類型屬性(list-style-type) 這個屬性用來設(shè)定列表項標記(list-item marker)的類型。有以下值： disc (缺省值，黑圓點) circle (空心圓點) square (小黑方塊) decimal (數(shù)字排序) lower-roman (小寫羅馬字排序 ) upper-roman (大寫羅馬字排序) lower-alpha (小寫字母排序) upper -alpha (大寫字母排序) none (無列表項標記),CSS列表樣式屬性,列表樣式位置屬性(list-style-position) 列表樣式位置屬性(list-style-position)有兩個值 ： outside (以列表項內(nèi)容為準對齊) inside (以列表項標記為準對齊) 列表樣式圖片屬性(list-style-image) 列表項標記可以用圖片來表示，用列表樣式圖片屬性(list-style-image )來設(shè)定圖片。示例代碼如下： ul list-sty