使用CSS格式化網頁

上傳人：1*** IP屬地：廣西上傳時間：2024-01-09 格式：PPT 頁數：98 大小：1.29MB 積分：15 舉報 版權申訴

已閱讀5頁，還剩93頁未讀，繼續免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第8章使用CSS格式化網頁主要內容CSS在頁面風格設計中的作用用多個HTML頁面調用一個CSS文件用DIV+CSS的方式來寫HTML頁面用CSS控制背景圖片的顯示方式用CSS設置滾動條的樣式用CSS設置滾動條的樣式8.1.1CSS的簡介CSS的英文名為CascadingStyleSheet，譯成中文的意思為層疊樣式表。樣式就是格式，對于網頁來說，像網頁顯示的文字的大小、顏色以及圖片位置以及段落、列表等，都是網頁顯示的樣式。層疊就是指當HTML文件引用多個CSS樣式時，如果CSS的定義發生沖突，瀏覽器將依據層次的先后順序來應用樣式，如果不考慮樣式的優先級時，一般會遵循“最近優選原那么〞。CSS能將樣式的定義與HTML文件內容別離。只要建立定義樣式的CSS文件，并且讓所有的HTML文件都來調用CSS文件所定義的樣式，如果要改變HTML文件中任意局部的顯示風格時，只要把CSS文件翻開，更改樣式就可以了。8.1.2CSS構造構造樣式規那么樣式表的每個規那么都有兩個主要局部：選擇符〔selector〕和聲明〔declaration〕。選擇器決定哪些因素要受到影響，聲明由一個或多個屬性值對組成。根本語法：selector{屬性:屬性值[[;屬性:屬性值]…]}語法說明：selector表示希望進行格式化的元素；聲明局部包括在選擇器后的大括號中；用“屬性:屬性值〞描述要應用的格式化操作；聲明中的多個屬性值對之間必須用分號隔開。CSS構造在樣式規那么中添加注釋在樣式表規那么中添加注釋有助于記住復雜的樣式規那么的作用，應用的范圍等，便于進行維護和應用。例如，下面是一個添加注釋的樣例。

注意：注釋不能嵌套。

/*此標記應用在文檔中*/h1{color:red;background:yellow;}CSS構造繼承繼承是CSS的一個主要特征，許多CSS屬性不但影響選擇符所定義的元素，而且會被這些元素的后代繼承。例如一個body定義了的顏色值也會應用到段落的文本中。下面舉例說明。<html><head><title>CSS的繼承性</title><styletype="text/css"></style></head><body><p>CSS的繼承性</p></body></html>8.2樣式表的定義與使用在CSS里可以使用四種不同的方法，將樣式表的功能加到網頁里。直接定義標記的style屬性定義內部樣式表嵌入外部樣式表鏈接外部樣式表定義標記的style屬性將CSS樣式定義在HTML標記內的，這是最簡單的樣式定義方法。根本語法：<標記style="樣式屬性:屬性值;樣式屬性:屬性值;…">語法說明：標記：HTML標記，如body、table、p等；標記的style定義只能影響標記本身；style的多個屬性之間用分號分割；標記本身定義的style優先于其他所有樣式定義。<html><head> <title>直接定義標記的style屬性</title></head><body><pstyle="font-size:18px;color:#003366">此行文字被style屬性定義為藍色顯示</p><p>此行文字沒有被style屬性定義</p></body></html>例如代碼第一個段落標記被直接定義了style屬性，此行文字將顯示18像素大小，藍色字體；而第二個段落標記沒有被定義，將按照默認設置來顯示文字樣式。結果如圖10-2所示。定義內部樣式表內部樣式表允許在他們所應用的HTML文檔的頂部設置樣式，后在整個HTML文件中直接調用使用該樣式的標記。根本語法：<html><head><title>直接定義標記的style屬性</title><styletype="text/css"><!--選擇符1{樣式屬性：屬性值；樣式屬性：屬性值；……}

選擇符2{樣式屬性：屬性值；樣式屬性：屬性值；……}

選擇符3{樣式屬性：屬性值；樣式屬性：屬性值；……}……選擇符n{樣式屬性：屬性值；樣式屬性：屬性值；……}--></style></head></html><style>元素是用來說明所要定義的樣式，type屬性是指style元素以CSS的語法定義；隱藏標記：防止了因瀏覽器不支持CSS而導致錯誤，加上這些標記后，不支持CSS的瀏覽器，會自動跳過此段內容，防止一些錯誤；；選擇符可以使用HTML標記的名稱，所有的HTML標記都可以作為選擇符；樣式屬性主要是關于對選擇符格式化顯示風格的樣式屬性名稱定義內部樣式表語法說明：<style>元素是用來說明所要定義的樣式，type屬性是指style元素以CSS的語法定義；隱藏標記：防止了因瀏覽器不支持CSS而導致錯誤，加上這些標記后，不支持CSS的瀏覽器，會自動跳過此段內容，防止一些錯誤；選擇符1……選擇符n：選擇符可以使用HTML標記的名稱，所有的HTML標記都可以作為選擇符；樣式屬性主要是關于對選擇符格式化顯示風格的樣式屬性名稱；屬性值設置對應樣式屬性的值。定義內部樣式表<html><head><title>定義內部STYLE屬性</title><styletext="text/css"></style></head><body><pclass="p1">此行文字被內部的樣式定義為藍色顯示</p><p>此行文字沒有被內部的樣式定義</p></body></html>定義內部樣式表嵌入外部樣式表嵌入外部樣式表就是在HTML代碼的主體中直接導入樣式表的方法。根本語法：<styletype="text/css">@importurl("外部樣式表的文件名稱");</style>語法說明：import語句后的“;〞號，一定要加上！外部樣式表的文件名稱是的是要嵌入的樣式表文件名稱，后綴為.css；@import應該放在style元素的任何其他樣式規那么前面。嵌入外部樣式表<html><head><title>嵌入外部樣式表</title><styletype="text/css">@importurl("style.css")；</style></head><body><pclass=p1>此行文字被style屬性定義為藍色顯示</p><p>此行文字沒有被style屬性定義</p></body></html>嵌入外部樣式表例如代碼調用的外部style.css文件的內容是：.p1{font-size:18px;color:blue}執行結果如圖鏈接外部樣式表除了以嵌入外部樣式表的方法到達在HTML文件中引用樣式表的目的外，還可以用鏈接的方式，使用外部CSS文件。根本語法：<linktype="text/css"rel="stylesheet"href="外部樣式表的文件名稱">語法說明：鏈接外部樣式表時，不需要使用style元素，只需直接用<link>標記放在<head>標記中就可以了；同樣外部樣式表的文件名稱是要嵌入的樣式表文件名稱，后綴為.css；CSS文件一定是純文本格式；在修改外部樣式表時，引用它的所有外部頁面也會自動地更新；外部樣式表中的URL相對于樣式表文件在效勞器上的位置；外部樣式表優先級低于內部樣式表；可以同時鏈接幾個樣式表，靠后的樣式表優先于靠前的樣式表。鏈接外部樣式表<html><head><title>嵌入外部樣式表</title><linkrel="stylesheet"type="text/css"href="style.css"></head><body><pclass="p1">此行文字被style屬性定義為藍色顯示</p><p>此行文字沒有被style屬性定義</p></body></html>8.3定義選擇符選擇符決定了格式化將應用于哪些元素。最簡單的選擇符可以對給定類型的所有元素進行格式化，更復雜的選擇符可以根據元素的class或id、上下文、狀態等來應用格式化規那么。按照名稱選擇元素選擇要格式化的元素最常用的標準可能是元素的名稱或類型。例如，可以讓所有p元素顯示為紅色、且大小為16像素。下面的例如中除非指定其他情況，指定類型的所有元素〔這里是標記p〕都將被格式化。<styletype="text/css">p{font-size:16px;color:red;}</style>按照id和class選擇元素如果已經在頁面元素中標識了id或class屬性，那么就可以在選擇器定義中使用，從而對被標識的元素進行格式化。<styletype="text/css"></style>或者<styletype="text/css"></style>語法說明可以單獨使用classname和idname選擇器，也可以與其他選擇器標準一起使用。例如，“.news{color:red;}〞會影響所有標記中定義了“class="news"〞類的元素，而“h1.news{color:red;}〞只影響屬性中定義了“class="news"〞類的h1元素。例如<html><head><title>ID和類的定義</title><styletype="text/css"></style></head><body><divid="divdemo"> <p>此段文字以默認方式顯示</p><pclass="p1">此段文字以16像素大小，紅色字體顯示</p><pclass="p2">此段文字以26像素大小，玫紅色字體顯示

</div></body></html>按照上下文選擇元素在CSS中，可以根據元素的祖先元素、父元素或同胞元素來定位它們。祖先元素就是包含所關心元素〔希望樣式影響的元素〕的任何元素，父元素就是直接包含所關心元素的元素。根本語法：祖先元素[祖先元素…]顯示元素{屬性名:屬性值;…}.語法說明：祖先元素是希望格式化的元素的祖先元素的名稱，上面程序中是“#divdemo〞；如果還需要繼續指定后續的祖先元素，那么元素名中加空格；最后是最終希望格式化影響的元素名，上面程序中指定了影響段落標記P，也可以是前面講過的一個ID〔#p1〕或者CLASS〔.p1)，例如：#divdemo#p1{font-size:26px;color:#FF0066;}#divdemo.p1{font-size:26px;color:#FF0066;}如果祖先元素和影響元素是父子關系，那么可采取下面的定義風格：#divdemo>p{font-size:26px;color:#FF0066;}選擇元素的一局部還可以只選擇元素的第一個字母或第一行進行格式化。根本語法：選擇符:first-letter{font-size:26px;color:#FF0066;}選擇符:first-line{font-size:26px;color:#FF0066;}語法說明：下面是關于此規定的一個實例。p:first-letter{font-size:26px;color:#FF0066;}p:first-line{font-size:26px;color:#FF0066;}指定元素組多個元素使用同樣的樣式規那么，可以組合使用選擇器。例如：h1,h2,div{color:#FF0066;}這里規定了標記h1、h2和div的color都是同樣的顏色。組合選擇其中的元素名中間要用“,〞隔開。h1,h2,div{color:#FF006;}

h1,h2,div{color:#FF0066;}CSS全局選擇符CSS全局選擇符--匹配文檔中的任意一個元素語法:**代表文檔中的所有元素說明：匹配文檔中的任意一個元素如果全局選擇符只是一個簡單項選擇擇符的一局部，*可以省略*{color:pink;font-size:12px;border:1pxsolidblue;}8.4文字與排版樣式的使用CSS的網頁排版功能十分強大，使用CSS，不僅可以控制文字的大小、顏色、對齊方式和字體，還可以控制行高、字母間距、大小寫〔全部大寫、首字大寫、小型大寫或全部都小寫等〕，甚至還可以控制文本的第一個字或第一行的樣式。不僅如此，只需要在某一位置創立樣式規那么〔即樣式表〕，就可以讓這些樣式規那么應用于整個網站的所有文本〔當然也可以為特定的段落或網頁的某些區域創立特別的樣式表〕。此外，任何時候發現需要讓網站上的文字增大，或是需要改變正文的字體，只需更改樣式表中的“值〞即可。長度、百分比單位在CSS文字、排版、邊界等的設置上，常常會在屬性值后加上長度或者百分比單位，通過本小節的學習將掌握兩種單位的使用。長度單位百分比單位百分比單位也是一種常用的相對類型，通常的參考依據為元素的font-size屬性，下面的語句將設置margin屬性值為font-size的150%，如下所示：p{margin:150%}此處表示的是相對于font-size高度的150%。需要注意的是，不管使用哪種單位，在設置的時候，數值與單位間不需要加上空格。8.4.2文字樣式屬性font-family設置字體font-size設置字號font-style設置字體樣式font-weight設置字體加粗font-variant設置字體變體text-decoration設置文字效果屬性font設置綜合字體屬性font-family設置字體除了利用HTML的標記來設置字體外，也可以用CSS的font-family屬性來設置需要的字體。根本語法：font-family:字體一，字體二，字體三…語法說明：上面的語法定義了幾種不同的字體，并用逗號隔開，當瀏覽器找不到字體一時，將會用字體二代替，以此類推，當瀏覽器完全找不到字體時，那么使用默認字體〔宋體〕。<html><head><title>設置字體</title><styletype="text/css"></style></head><body><pclass="p1">設置字體的順序為，黑體，草書，宋體<pclass="p2">設置字體的順序為，琥珀，草書，宋體</body></html>font-size設置字號font-size設置字號可以用<fontsize=值>標記來設置文字的大小。在CSS里，利用font-size屬性來設置字號。根本語法：font-size：絕對大小|相對大小語法說明：絕對大小：是以pt為單位，以絕對大小的方式來設置字號。可以指定精確的大小，如16px，或者使用關鍵字來指定大小，如：font-size屬性的關鍵字〔xx-small|x-small|small|medium|large|x-large|xx-large〕。不過這些關鍵字，在不同的設備下，可能會顯示不同的字號。相對大小：利用百分比或者em(當前字母中，字母的寬度)，以相對父元素大小的方式來設置大小。例如指定font-size的屬性值時父元素的1.5em或150%，或者使用相對關鍵字(larger|smaller)來指定。<html><head><title>設置字號的絕對大小</title><styletype="text/css"></style></head><body><pclass="p1">設置字號為xx-small</p><pclass="p2">設置字號為x-small</p><pclass="p3">設置字號為small</p><pclass="p4">設置字號為medium</p><pclass="p5">設置字號為large</p><pclass="p6">設置字號為x-large</p></body></html><html><head><title>設置字號的相對大小</title><styletype="text/css"></style></head><body><p>設置字號的相對大小</p><pclass="b">設置字號的相對大小</p></body></html>font-style設置字體樣式在HTML里，可以使用<I>標記，將網頁文字設置為斜體。而在CSS里，那么可以利用font-style屬性來到達字體變化的效果。根本語法：font-style:normal|italic|oblique語法說明：normal為默認值，一般以瀏覽器默認的字體來顯示，italic為斜體效果，oblique為歪斜體效果。font-weight設置字體加粗在HTML里，可以利用<b>標記或者<strong>標記將文字設置為粗體。在CSS里，那么可以利用font-weight屬性來設置字體的粗細。根本語法：font-weight：normal|blod|bolder|lighter|100-900語法說明：normal表示默認字體，bold表示粗體，bolder表示粗體再加粗，lighter表示比默認字體還細，100-900共分為九個層次〔100、200……、900〕，數字越小字體越細、數字越大字體越粗。<html><head><title>font-weight字體加粗</title><styletype="text/css"></style></head><body><pclass="p1">此段文字正常顯示</p><pclass="p2">此段文字以blod方式顯示</p><pclass="p3">此段文字以bolder方式顯示</p><pclass="p4">此段文字以lighter方式顯示</p><pclass="p5">此段文字以900方式顯示</p></body></html>font-variant設置字體變體在HTML里設置字體變體，實際就是設置字體是否顯示為小型的大寫字母。而CSS中的字體變體主要用于設置英文字體。根本語法：font-variant:normal|small-caps語法說明：normal表示默認值，small-caps表示英文字體顯示為小型的大寫字母。<html><head><title>font-variant字體變體</title><styletype="text/css"></style></head><body><pclass="p1">font-variant:normal字體變體</p><pclass="p2">font-variant:small-caps字體變體</p></body></html>text-decoration設置文字效果屬性text屬性所提供的text-decoration屬性，主要完成文字加下劃線、頂線、刪除線及文字閃爍效果。根本語法：text-decoration：underline|overline|line-through|blink|none語法說明：<html><head><title>文字效果屬性</title><styletype="text/css"></style></head><body><pclass="p1">文字加下劃線</p><pclass="p2">文字加刪劃線</p></body></html>font設置綜合字體屬性font屬性是一種復合屬性，可以同時對文字設置多個屬性。包括字體族科、大小、風格、加粗及字體變體。根本語法：font:font-stylefont-weightfont-variantfont-size/line-heightfont-family語法說明：如果要利用font屬性，同時設置多個文字屬性時，屬性與屬性之間必須利用空格隔開；前三個屬性次序不定或者省略，默認為normal；大小和字體系列必須顯式地指定，先設置大小，再設置字體系列，字體系列如果有多個，以逗號分割；行高必須直接出現在字體大小后面，中間用斜杠分開，行高是可選的屬性；font屬性是繼承的。<html><head><title>font字體設置</title><styletype="text/css"></style></head><body><pclass="p1">本行文字以黑體25像素大小加粗來顯示</p><pclass="p2">本行文字以黑體斜體25像素大小加粗來顯示</p></body></html>8.4.3排版樣式屬性text-indent首行縮進屬性letter-spacing字符間距屬性line-height行距屬性text-align水平對齊屬性text-transform轉換英文大小寫利用text-transform屬性可以轉英文大小寫。根本語法：text-transform：uppercase|lowercase|capitalize|none語法說明：uppercase表示使所有單詞的字母都大寫，lowercase表示使所有單詞的字母都小寫，capitalize表示使每個單詞的首字母大寫，none表示默認值。text-indent首行縮進屬性text-indenttext-indent首行縮進屬性，通常被用來指定一個段落，第一行文字縮進的距離。根本語法：text-indent：長度單位|百分比單位語法說明：letter-spacing字符間距屬性letter-spacingletter-spacing字符間距屬性，可以設置字符與字符間的距離。根本語法letter-spacing：normal|長度單位語法說明：normal表示默認值，此處的長度單位可使用負數line-height行距屬性line-height是用來設置行與行之間的距離。根本語法：line-height：normal|比例|長度單位|百分比語法說明：normal為默認值，比例是倍數，相對于元素font-size的幾倍大小，長度單位和百分比請參考的說明，此處的長度單位可使用負數。text-align水平對齊屬性text-align屬性可以控制文字段落的水平對齊方式。根本語法：text-align：left|right|center|justify語法說明：left為默認值，right表示右對齊，center表示居中對齊，justify表示左右對齊。text-transform轉換英文大小寫利用text-transform屬性可以轉英文大小寫。根本語法：text-transform：uppercase|lowercase|capitalize|none語法說明：uppercase表示使所有單詞的字母都大寫，lowercase表示使所有單詞的字母都小寫，capitalize表示使每個單詞的首字母大寫，none表示默認值。8.5背景與顏色的使用設置顏色方法背景顏色的屬性背景圖片的屬性設置顏色方法利用RGB設置顏色利用RGB函數設置顏色利用顏色名稱設置顏色利用RGB設置顏色在HTML網頁，或者CSS樣式的顏色定義里，設置顏色的方式是利用RGB概念，在RGB的概念中，所有顏色都是由紅色、綠色、藍色混合而成。CSS那么有四種定義顏色的方法：十六進制數RGB函數〔整數〕RGB函數〔百分比〕顏色名稱顏色的表示在計算機中，定義每種顏色的強度都是由0~255。當所有顏色的強度為0時，將產生黑色，當所有顏色的強度都是255時，將產生白色。在HTML中，要使用RGB來指定顏色時，將使用#號，加上6個十六進制的數字來表示，表示方法如下：#RRGGBB其中R，G，B這三個字母的值范圍0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f這16個數字。比方要表示紅色的值，那么表示方法為：#FF0000。

利用RGB函數設置顏色RGB函數在CSS里，可以利用RGB函數，加上三組范圍為0~255的數字來設置所要的顏色。因為每組數字可表現256種顏色強度，所以利用RGB函數共可表達出256*256*256種顏色表示方法如下：RGB(R，G，B)其中，R，G，B代表的整數范圍為0~255。比方現在要表示紅色的值，那么表示方法為：RGB〔255，0，0〕。

利用顏色名稱設置顏色背景顏色的屬性背景顏色在HTML里，可以使用標記的bgcolor屬性來設置網頁的背景顏色，而在CSS里，不僅可以用background-color屬性來設置網頁背景顏色的變化，還可以設置文字的背景顏色。根本語法：background-color：關鍵字|RGB值|transparent語法說明：transparent表示透明的意思，也是瀏覽器的默認值。<html><head><title>背景顏色的屬性</title><styletype="text/css"></style></head><body><pclass="p1">此行文字以紅色背景顯示n</p><pclass="p2">此行文字以黃色背景顯示</p></body></html>背景圖片的屬性background-image插入背景圖片background-attachment插入背景附件background-repeat設置重復背景圖片background-position設置背景圖片位置background-image插入背景圖片除了可以設置背景的顏色以外，還可以用background-image來設置背景圖片。根本語法：background-image:url|none語法說明：url表示要插入背景圖片的路徑，路徑可以是絕對路徑也可以是相對路徑，none表示不加載圖片。background-attachment插入背景附件background-attachment背景附件屬性是用來設置背景圖片是否隨著滾動條的移動而一起移動。根本語法：background-attachment：scroll|fixed語法說明：scroll表示背景圖片是隨著滾動條的移動而移動，是瀏覽器的默認值；fixed表示背景圖片固定在頁面上不動，不隨著滾動條的移動而移動。background-repeat設置重復背景圖片background-img屬性設置網頁的背景圖片重復顯示方式。根本語法：background-repeat：repeat|repeat-x|repeat-y|no-repeat語法說明：repeat表示背景圖片在水平和垂直方向平鋪，是默認值；repeat-x表示背景圖片在水平方向平鋪；repeat-y表示背景圖片在垂直方向平鋪；no-repeat表示背景圖片不平鋪。background-position設置背景圖片位置當在網頁中插入背景圖片時，每一次插入的位置，都是位于網頁的左上角，所以通過background-position屬性來改變圖片的插入位置。根本語法：background-position：百分比|長度|關鍵字語法說明：利用百分比和長度來設置圖片位置時，都要指定兩個值，并且這兩個值都要用空格隔開。一個代表水平位置，一個代表垂直位置。水平位置的參考點是網頁頁面的左邊，垂直位置的參考點是網頁頁面的上邊。關鍵字在水平方向的主要有left、center、right，關鍵字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。8.6美化網頁與超鏈接的設置設置網頁鏈接屬性設置滾動條屬性設置光標屬性設置網頁鏈接屬性在HTML里，可以使用<a>標記來建立網頁的鏈接，CSS允許按照鏈接的狀態來設置網頁鏈接文字的效果。語法如表8-5：設置滾動條屬性有些網頁的窗口滾動條上，增加了許多漂亮的顏色，其實這些滾動條的顏色效果，是利用CSS所制作出來的。以下圖顯示了滾動條的區域劃分。設置滾動條屬性滾動條的屬性參見表8-6。設置光標屬性在瀏覽網頁時，常看到不同的光標，有的代表程序正在執行，有的代表文字位置光標，或者是超鏈接光標等，在HTML里并沒有提供設置光標的功能，但在CSS的cursor屬性剛好可以彌補這個缺點，設置出許多變化的光標圖形。根本語法：cursor:s-resize語法說明：s-resize：cursor屬性共提供了16種屬性值，具體見課本表10-7所示。8.7矩形模塊的概念與使用矩形模塊設置邊界設置元素邊框設置元素內邊界矩形模塊在CSS中，將樣式調用在每一個元素上，都以一個假想的矩形格式模型看待.一般使用矩形模塊的時候，搭配margin屬性、border屬性以及padding屬性，可以更好的控制元素的樣式。設置邊界margin的四個屬性主要是控制元素邊界與文件其他內容的空白距離，四個邊界一般按順時針方向上〔margin-top〕、右〔margin-right〕、下〔margin-bottom〕、左〔margin-left〕屬性。四個邊界的設置語法一樣。根本語法：margin-(top、right、bottom、left):長度單位|百分比單位|auto設置元素邊框border-style邊框樣式屬性border-width邊框寬度屬性border-color邊框色彩屬性border屬性的綜合設置border-style邊框樣式屬性在CSS里了，利用邊框樣式屬性不僅可以設置單位邊框樣式屬性，還可以對單位邊框進行設置，而且也可以利用復合邊框樣式屬性來統一設置四條邊框的樣式。根本語法：border-style:樣式值border-top-style:樣式值border-bottom-style:樣式值border-left-style:樣式值border-right-style:樣式值border-style邊框樣式屬性語法說明：border-style是一個復合屬性，復合屬性的值有四種設置方法，其他4個都是單個邊框的樣式屬性，只能取一個值。樣式值屬性的具體說明見表8-8。設置一個值：四條邊框寬度均使用一個值。設置兩個值：上邊框和下邊框寬度調用第一個值，左邊框和右邊框寬度調用第二個值。設置三個值：上邊框寬度調用第一個值，右邊框與左邊框寬度調用第二個值，下邊框調用第三個值。設置四個值：四條邊框寬度的調用順序為上、右、下、左。border-width邊框寬度屬性border-width屬性，是控制元素邊框的寬度的一個綜合屬性，和border-style一樣也有四種單獨的設置方法，分別來定義四條邊框的寬度，設置方法和邊框樣式一樣。根本語法：border-width邊框寬度屬性語法說明：thin、medium、thick分別表示細、中等、粗，length表示長度單位border-color邊框色彩屬性border-color屬性是用來控制邊框顯示的顏色，和邊框寬度、邊框樣式的設置方法一樣，也可以分別來設置每個邊框的顏色.根本語法：border-color:顏色關鍵字|RGB值border-top-color:顏色關鍵字|RGB值border-bottom-color:顏色關鍵字|RGB值border-left-color:顏色關鍵字|RGB值border-right-color:顏色關鍵字|RGB值border屬性的綜合設置在CSS中，border屬性用來同時設置邊框的樣式、寬度和顏色，也可以另外對每個邊界屬性單獨進行設置根本語法：border:邊框寬度|邊框樣式|邊框顏色border-top:上邊框寬度|上邊框樣式|上邊框顏色border-bottom:下邊框寬度|下邊框樣式|下邊框顏色border-left:左邊框寬度|左邊框樣式|左邊框顏色border-right:右邊框寬度|右邊框樣式|右邊框顏色語法說明：每一個屬性都是一個復合屬性，都可以同時設置邊框的樣式、寬度和顏色，每個屬性的值中間用空格隔開，在這5個屬性中，只有border可以同時設置四條邊框的屬性，其他的只能設置單邊框的屬性。設置元素內邊界元素內邊界主要是指邊框和內部元素之間的空白距離，利用padding屬性設置元素內的邊界時，也包括5個屬性，同樣也有四種設置方法。根本語法：padding:長度|百分比padding-top:長度|百分比padding-bottom:長度|百分比padding-left:長度|百分比padding-right:長度|百分比語法說明：長度包括長度值和長度單位，百分比是相對于上級元素寬度的百分比，不允許用負數，padding作為復合屬性的四種取值方法請參考邊框樣式的取值方法。8.8CSS的進階應用區域組件div標記的使用<span>標記的使用<div>與<span>的區別列表list-style-type列表樣式list-style-image圖像列表list-style-position列表符號的縮進div標記的使用div在寫HTML文件時，要定義區域間不同樣式時，可以使用<div>標記到達這個效果，除此以外，通過設置<div>的z-index屬性還可以設置層次的效果。根本語法：<divstyle="position:absolute;left:29px;top:12

人人文庫> 全部分類> 行業資料 > 管理策劃

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

老太爷的乳妓h开裆裤,久久久久久精品国产三级非禁歌 ,久久久久久久99精品国产片,免费观看交性大片

使用CSS格式化網頁

文檔簡介

溫馨提示

最新文檔

評論

老太爷的乳妓h开裆裤,久久久久久精品国产三级非禁歌 ,久久久久久久99精品国产片,免费观看交性大片

使用CSS格式化網頁

文檔簡介

溫馨提示

最新文檔

評論

相關文檔