筆記-10.3、HTML-CSS樣式筆記1

CSS註釋：以/*開頭 以*/結束 eg ：/* 這是CSS註釋 */

1.字型屬性:
— font-family:字型型別（行書還是楷書或是其他字型型別）eg：body {font-family:”楷體”;}

— font-size:字型大小。
    取值範圍：xx-small：絕對字型尺寸，最小
          x-small:絕對字型大小,較小
          small：小
          medium：絕對字型預設值，正常預設值
          large：大
          x-large：較大
          xx-large：最大
          lager：相對字型尺寸，相對於父物件中字型尺寸進行相對增大。
          smaller：。。。相對減小
          畫素值和百分比：畫素值是最常用的，
            百分比的取值是基於父物件中的字型的尺寸。用父物件字型尺寸乘以自物件中的字型百分比，得到自物件的字型大小。
    eg：body {font-size:30px;} 或者：body {font-size:50%; }

— font-style:字型風格（斜體。。。）
    取值：
        italic：斜體子。
        oblique：中間狀態，同樣是斜體字。
        normal：普通字型，沒有任何風格（預設值）

— font-weight：字型加粗
    取值：100、200、300、400、500、600、700，800，900
          bold：加粗，粗細程度等於700的粗細程度。bold = 700
          normal：正常字型，不加粗 等於400
          bolder：很粗的，等於900
          lighter：細的，相當於100

— font-variant:將小寫的英文字母轉化為大寫
    取值：normal：預設值，表示正常顯示，原來是什麼樣，現在還是什麼樣。
          small-caps：將小寫的英文字母轉換為大寫字母，且字型較小。
         
— font：複合屬性
    可以取值：字型族科（字型型別），字型大小，字型風格，字型加粗，每個值之間用空格隔開
    複合屬性取值有順序，
        分別是：字型風格 字型粗細 字型大小 字型型別，
        eg: div {font:italic bold 50px “宋體”;}
    如果同時設定這四個樣式的話，必須按照這個順序寫，這四個樣式才能全部生效。
    font-variant這是屬性沒有整合到font複合屬性中，只能單獨寫。

2.顏色和背景屬性：
— color：用來設定指定元素的文字顏色。顏色值是一個顏色的英文單詞或者是一個十六進位制的顏色值。
— background-color：背景顏色。用來設定指定元素的背景的顏色。值也是一個顏色值。
— background-image：背景圖片。用來設定指定元素的背景的圖片。值是一張圖片的路徑。
    注意：在使用背景圖片時：background-image的值是：url(圖片路徑)，url() 不能少，圖片路徑放在小括號裡面。當背景圖片和背景顏色同時設定時，背景圖片會覆蓋在背景顏色上，就會看不到背景顏色。
    eg：body {background-image:url(images/img.jpg); }
— background-repeat：背景重複（平鋪）
    取值：no-repeat：背景圖片不重複（不平鋪）
          repeat：預設值，背景圖片重複（平鋪）
          repeat-x：背景圖片向X軸方向（水平）重複（平鋪）
          repeat-y：背景圖片向Y軸方向（垂直）重複（平鋪）

— background-position：背景的位置。

— background：是背景的一複合屬性，整合了背景顏色，背景圖片，背景重複，背景位置這四個屬性。
    eg：    body {
            background:green url(bj1.jpg) no-repeat Top center;
        }
        寫法：多個值之間用空格隔開，
— 與font的區別：background與font同是複合屬性，與font不同的是，background的四個值沒有順序，哪個放前面哪個放後面都一樣，但是font的屬性必須要有順序才能看到效果。

3.段落屬性：
— word-spacing：單詞間隔。（網頁中每相鄰的兩個用空隔開的英文單詞或者是中文之間的距離。）
    取值：畫素值。可以使用負數。
— letter-spacing：字元間隔，就是網頁中相鄰兩個字元間的距離。
    取值：畫素值
— text-decoration：文字修飾，用來控制一段文字的下劃線、上劃線、刪除線。。。
    取值：underline：下劃線
          overline：上劃線
          none：這是預設值，沒有任何修飾，常用來去除超連結的下劃線。
          line-through：刪除線。
— vertical-align：垂直對其方式
    取值：baseline：瀏覽器預設的垂直對齊方式；
          sub：文字的下標。 常用來寫化學方程式。
          super：文字的上標。常用來寫數學表示式。
          top：垂直靠上對齊。
          text-top：是元素和上級元素的字型向上對齊。
          middle：垂直居中對齊，常用來設定圖片與文字的垂直對齊方式。
          text-bottom：使元素和上級元素的字型向下對齊。
— text-transform：文字轉換，英文單詞大小寫之間的轉換。
    取值：none：預設值，不轉換。
          capitalize：使用每個單詞的第一個字母大寫。
          uppercase：每個單詞的所有字母都大寫。
          lowercase：每個單詞的所有字母小寫。
— text-align：水平對齊方式。
    取值：left：左對齊。
          right：右對齊。
          center：水平居中對齊。
          justify：兩端對齊（一段文字沒有佔滿一整行，使用了justify的話，就可以佔滿這行。）、部分瀏覽器不支援該屬性。
— text-indent：文字首行縮排。
    取值：畫素值,還可以是其它的長度單位（cm,em . . .）。
        （em:一個長度單位，1em 等於 12px左右， 2em 約等於兩個正常大小的漢字的寬度。）
— line-height：文字行高，相鄰兩行之間的間隔、預設是這行文字有多高，這行的行高就是多高。
    是本行上面的空白 + 文字本身的高度 = 行高
    取值：同上↑。
— white-space：處理空白
    取值：    normal：預設值。
        pre：會將原始碼中的空格保留，
        nowrap：強制在同一行顯示文字、直到遇到<br/>或者文字結束。

— unicode-bidi、direction：文字反排 （開發用不到，瞭解即可。）
    unicode-bidi配合direction一起使用，來設定物件的閱讀順序。
    unicode-bid:
        取值：    bidi-override:表示嚴格按照direction屬性的值重排
            normal:預設值。
            embed:表示物件開啟附加的嵌入層，direction屬性的值指定嵌入層，在物件內部進行隱式重排序。
    direction:
        取值：    ltr:表示從左到右的順序閱讀
            rtl:從右到左的順序閱讀。
            inherit:表示文字流的值不可繼承。

4.外邊距與內邊距屬性：
:外邊距(margin)
— margin-top：上邊距，用來設定元素的上邊界（與其它盒子的距離）。
— margin-bottom：下邊距。
— margin-left：左邊距。
— margin-right：右邊距。
— margin：是綜合了以上四個屬性，可以同時設定四個方向的外邊距。
    取值：都是一個長度值或者百分比。
    margin的取值可以是一個、兩個、三個、四個、多個值之間用空格隔開：
        一個值：表示的方向是上下左右四個方向。
            margin:10px;
        兩個值：第一個值表示上下兩個方向的邊距，第二個值表示左右兩個方向。
            margin:10px 20px;
        三個值：第一個值表示上方向，第二個值表示左右方向，第三個值表示下方向。
            margin:10px 20px 30px;
        四個值：分別表示上、右、下、左方向的邊距。
            margin:10px 20px 10px 20px;

:內邊距(padding)，用法與外邊距一樣
— padding-top:上內邊距。
— padding-bottom:下內邊距。
— padding-left:左內邊距。
— padding-right:右內邊距。
— padding:綜合以上四個屬性。
    取值：都是長度值或百分比。
    padding:的取值與margin一樣，可以是多個，padding的多個值對應的方向與margin的多個值對應的方向相同。

5.邊框屬性（border）：
— 邊框樣式：
    border-style:用來設定四個方向的邊框
    border-bottom-style:設定下邊框樣式
    border-top-style:設定上邊框樣式
    border-left-style:設定做邊框樣式
    border-right-style:設定右邊框樣式
    取值：
        none：預設值，沒有邊框。
        dotted：點線邊框。
        dashed：虛線邊框。
        solid：實線邊框。
        double：雙實線邊框。
        groove：邊框具有立體感的溝槽。
        ridge：邊框呈脊形。
        inset：使整個邊框凹陷，及在一個變寬嵌入一個立體邊框。
        outset：使整個邊框凸陷，及在一個變寬嵌入一個立體邊框。
    
— 邊框寬度：
    border-width:用來設定四個方向的邊框寬度。
    border-top-width:上邊框寬度。
    border-bottom-width:下邊框寬度。
    border-left-width:左邊框寬度。
    border-right-width:右邊框寬度。
    取值：一個長度值，或者百分比。

— 邊框顏色：
    border-color:用來設定四個方向的邊框顏色。
    border-top-color：上邊框顏色
    border-bottom-color：下邊框顏色
    border-left-color：左邊框顏色
    border-right-color：右邊框顏色
    取值：是一個顏色對應英文單詞或者是一個表示顏色的十六進位制顏色值。

— border-top:上邊框樣式
— border-bottom:下邊框樣式
— border-left:左邊框樣式
— border-right:右邊框樣式
— border：是所有邊框樣式的複合屬性，用來設定四個方向的邊框樣式。
    以上五個屬性由邊框樣式，寬度，顏色綜合。
    取值：有三個值，綜合了樣式，寬度，顏色三個屬性
        比如：border-top:1px solid red;這個屬性表示上邊框是一個寬度為1px，顏色為red（紅色）的實線。
    這三個值分別用空格隔開，沒有順序，樣式屬性值（如solid等）必不可少，否則將無法正確顯示邊框。