《使用HTML5實現(xiàn)響應(yīng)式布局》第七章-邊框樣式-理論學(xué)習(xí)資料

第七章邊框樣式理論內(nèi)容邊距與填充邊框?qū)傩粤斜韺傩?.邊距與填充CSS3邊距屬性margin用于設(shè)置元素周圍的邊界寬度，主要包括上下左右4個邊界的距離設(shè)置。填充屬性padding也稱為補白屬性，用于設(shè)置邊框和元素內(nèi)容之間的間隔，同樣包括上、下、左、右4個方向的值邊距填充內(nèi)容邊框邊距與填充房地產(chǎn)公司的網(wǎng)站局部頁面運行時的效果上填充：10px左填充：10px下邊距：15px下填充：30px邊距頂端邊距margin-top屬性也稱為上邊距，其用一個指定的長度或百分比值設(shè)置元素的上邊界margin-top:[length|百分比|auto]參數(shù)說明length設(shè)置頂端的絕對邊距值auto自動取邊距值，即取元素的默認值百分比基于上級元素寬度的百分比，允許使用負值邊距<styletype="text/css">h2{ font-family:黑體; font-size:20px;

margin-top:15px;}img{

margin-top:25px;}</style>上邊距15px上邊距25px邊距<styletype="text/css">img{

margin-top:10px; margin-bottom:10px; margin-left:25px; margin-right:25px;}</style>下邊距10px左邊距25px右邊距25px邊距margin屬性還可以縮寫margin的值可以取一到四個，如果僅設(shè)置一個值，則應(yīng)用于所有的四個邊距margin:[長度值|百分比|auto]邊距內(nèi)容margin寫法邊距如果設(shè)置了兩個值，則表示上下、左右邊距邊距如果設(shè)置了三個值，則對應(yīng)上、左右、下邊距邊距如果設(shè)置了四個值，則按照上、右、下、左的順序分別對應(yīng)其邊距邊距<styletype="text/css">img{

margin:8px30px10px;}</style>上邊距8px，下邊距10px，左右邊距30px填充頂端填充屬性padding-top也稱為上補白，即上邊框和選擇符內(nèi)容之間的間隔距離。padding-top:[長度值|百分比|auto]填充<styletype="text/css">body{

padding-top:26px;}</style>上填充26px填充更多填充屬性包括底端填充padding-bottom、左右兩側(cè)填充padding-left、padding-right，其語法和使用方法與頂端填充類似<styletype="text/css">body{

padding-top:15px; padding-bottom:13px; padding-right:30px; padding-left:20px;}</style>下填充13px右填充30px左填充20px填充padding屬性還可以縮寫，基本語法為padding:[長度值|百分比|auto]與margin屬性類似，padding屬性的值可以取1到4個，具體的設(shè)置如下：如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。如：padding:10px20px30px40px。如果僅提供一個，將作用于全部的四邊。如：padding:10px。如果提供兩個，則第一個用于上下，第二個用于左右。如：padding:10px20px。如果提供三個，則第一個用于上，第二個用于左右，第三個用于下。如：padding:10px20px30px。填充body{padding:18px35px;}上下填充18px，左右填充35px2.邊框?qū)傩赃吙蚴蔷W(wǎng)頁元素經(jīng)常使用的樣式效果CSS3的邊框樣式

邊框?qū)傩訡SS3常見的邊框?qū)傩杂衎order-style屬性border-width屬性border-color屬性border屬性邊框樣式邊框樣式border-style屬性用于設(shè)置邊框的風(fēng)格呈現(xiàn)樣式，該屬性用于指定可見的邊框。也可以用上邊框樣式border-top-style、下邊框樣式border-bottom-style、左邊框樣式border-left-style、右邊框樣式border-right-style，分別設(shè)置各邊框樣式邊框樣式邊框樣式的值有9種取值含義none不顯示邊框，此為默認屬性值dotted點線dashed虛線solid實線double雙實線groove邊框帶有立體感的溝槽ridge邊框成脊形inset使整個方框凹陷，即在邊框內(nèi)嵌入一個立體邊框outset使整個方框凸起，即在邊框外嵌入一個立體邊框邊框樣式<style>h2{ font-family:黑體; font-size:20px;

border-style:inset;}p{ font-size:18px; text-indent:20px;

border-top-style:dotted; border-right-style:dashed; border-bottom-style:double; border-left-style:solid;}</style>在邊框內(nèi)嵌入一個立體邊框上邊框點線右邊框虛線下邊框雙實線左邊框?qū)嵕€邊框?qū)挾冗吙驅(qū)挾葘傩詁order-width用于設(shè)置元素邊框的寬度值，其語法和用法均與邊框樣式的設(shè)置類似border-width:[thin|medium|thick|<length>]參數(shù)說明medium默認寬度thin小于默認寬度，稱為細邊框thick大于默認寬度，稱為粗邊框length由數(shù)字和單位組成的長度值，不可為負值邊框?qū)挾?lt;style>h2{ /*省略*/

border-width:1px5px10px3px;}p{ /*省略*/

border-top-width:8px; border-right-width:1px;

border-bottom-width:3px; border-left-width:4px;}</style>上邊框?qū)?px，右邊框?qū)?px，下邊框?qū)?0px，左邊框?qū)?px上邊框?qū)?px右邊框?qū)?px左邊框?qū)?px下邊框?qū)?px邊框顏色邊框顏色border-color屬性用于定義邊框的顏色，可以用16種顏色的關(guān)鍵字或RGB值來表示顏色。使用邊框border-color屬性，可以設(shè)置一到四個值。如果指定一個值，則統(tǒng)一設(shè)置4個邊框的顏色指定兩個值，則分別設(shè)置上下邊框、左右邊框顏色指定三個值，則分別設(shè)置上邊框、左右邊框、下邊框顏色指定四個值，則分別設(shè)置上、右、下、左四個邊框的顏色border-color:[顏色的關(guān)鍵字|RGB值]邊框顏色<style>h2{ /*省略*/

border-color:greenred;}p{ /*省略*/

border-top-color:#d00000; border-right-color:#00f;

border-bottom-color:#ff00ff; border-left-color:maroon;}</style>上下邊框顏色綠色，左右邊框顏色紅色邊框復(fù)合屬性border用于設(shè)置一個元素的邊框?qū)挾?、樣式和顏色邊框?fù)合屬性border：[邊框?qū)挾萞||[邊框樣式]||[邊框顏色]在border屬性中，同時設(shè)置一組邊框的寬度、樣式、顏色。邊框復(fù)合屬性<style>h2{ /*省略*/

border:5pxdashedolive;}p{ /*省略*/

border-top:3pxdotted#00f; border-right:5pxsolidred;

border-bottom:1pxridge#ff00ff; border-left:4pxsolidred;}</style>邊框?qū)挾?px，橄欖綠的實線<style>h2{ /*省略*/

border:5pxdashedolive;}p{ /*省略*/

border-top:3pxdotted#00f; border-right:5pxsolidred;

border-bottom:1pxridge#ff00ff; border-left:4pxsolidred;}</style>3.列表屬性列表屬性主要用于設(shè)置列表項的樣式包含list-style-type屬性list-style-image屬性list-style-position屬性list-style屬性

列表符號屬性list-style-type用于設(shè)定列表項的符號列表符號list-style-type:符號符號的取值含義none不顯示任何項目符號或編號disc以實心圓形●作為項目符號circle以空心圓形○作為項目符號square以實心方塊■作為項目符號decimal以普通阿拉伯?dāng)?shù)字1、2、3……作為項目符號lower-roman以小寫羅馬數(shù)字i、ii、iii……作為項目符號upper-roman以大寫羅馬數(shù)字Ⅰ、Ⅱ、Ⅲ……作為項目符號lower-alpha以小寫英文字母a、b、c……作為項目符號upper-alpha以大寫英文字母A、B、C……作為項目符號列表符號<style>ol{ list-style-type:square;}</style><body><ol><li><li><li></ol></body>以實心方塊■作為列表項目符號實心方塊■圖像符號屬性list-style-image使用圖像作為列表項目符號，以美化頁面圖像符號list-style-image:none|url(圖像地址)參數(shù)說明none表示不指定圖像url使用絕對或相對地址指定作為符號的圖像圖像符號<style>ol{ list-style-