CSS基本樣式

標籤：

CSS基本樣式

• 內聯樣式：直接在分頁檔中使用HTML標記的style屬性。例如：

 <p style="font-family:宋體;color: red;font-size: 10pt;">程式員</p>

• 在分頁檔中定義樣式：這種方式是通過<style>標記來定義樣式，文法格式如下：

<style type="text/css">        h1 {font-family: "微軟雅黑";font-size: 12px;}        #fromid {font-family: "微軟雅黑";font-size: 12px;}        .classid{font-family: "微軟雅黑";font-size: 12px;}    </style>    

• 在分頁檔中嵌入外部樣式表：文法如下

<style type="text/css">        @import url("外部CSS樣式檔案名稱");          <!--        外部檔案名稱是以.css為副檔名的CSS檔案，如果該檔案和當前頁面同一個目錄下，則直接用檔案名稱，不在同一個目錄下，則要給出其相對路徑。        -></style>     

• 連結外部樣式表:文法如下

<link type="text/css" rel="stylesheet" type="text/css" href="css/index.css"/>

CSS註解文法：CSS註解語句是位於

/* */

標記之間的語句內容

CSS選取器

• HTML標記 文法如下

h1 {font-family: "微軟雅黑";font-size: 12px;} /*在HTML文檔中，所有該標記保護的文本都具有定義的CSS樣式*/

• CLASS選擇符 文法如下

.classid{font-family: "微軟雅黑";font-size: 12px;}/* 在HTML文檔中， 所有使用該類名標記的都具有定義的標籤*/

• ID選擇符 文法如下

#fromid {font-family: "微軟雅黑";font-size: 12px;}/* 在HTML文檔中，所有指定為該ID的標記都具有定義的標籤*/

CSS樣式優先順序

1. 直接在頁面上使用HTML標記的Style屬性設定的樣式優先順序最高。
2. 其他樣式定義按照在頁面上出現的先後順序，越後面的優先度最高。
3. ID選擇符的優先度高於CLASS選擇符。
4. 沒有被定義樣式控制的內容將使用瀏覽器的預設樣式。

CSS基本屬性：主要包括背景屬性，文字屬性，字型屬性，邊界屬性，邊框屬性，邊距屬性，列表屬性，定位屬性

• 背景屬性 ：CSS中有關背景的屬性，對背景顏色的設定屬性和對背景圖片的設定屬性

img{    background-color: red transparent;    /*      * 用於設定背景顏色     * 其中transparent表示透明     * 顏色的表示方式有多種     * 1.使用英文名稱，如red,blue等。     * 2.用6位十六進位數（#rrggbb）表示。     * 3.用3位十六進位數（#rgb）表示。     * 4.用rgb(r,g,b)函數表示，其中3個參數的取值可為0~255的整數或百分比值，     * 如rgb(0,0,0)表示黑色，rgb(100%,100%,100%)表示白色。     */        background-image: url("背景圖片的路徑")|none;    /*     * 用於設定要載入的背景圖片      */        background-repeat: no-repeat;    /*     * 用於設定背景圖片的相片順序，其屬性設定格式如下：     * background-repeat:repeat|repeat-x|repeat-y|no-repeat ;     * 其中repeat表示以並列方式柏拉圖片，是該屬性的預設值，repeat-x表示以x軸方向並列柏拉圖片；     * repeat-y表示以y軸方向並列柏拉圖片，no-repeat表示不以並列方式柏拉圖片。     */        background-attachment: scroll;    /*     * 用於設定移動捲軸時背景圖片位置是否固定，其屬性設定格式如下：     * background-attachment: scroll|fixed;     * scroll表示移動捲軸時背景圖片隨之滾動，fixed表示移動捲軸時背景圖片不動。     */        background-position: x,y;    /*     * 用於設定背景圖片的插入位置，其屬性設定格式如下：     * 1.百分比，用於描述圖片距地區元素邊框的百分比值     * 2.數值，用具體數值描述，單位可分為任意的長度單位：em px in pt pc cm mm等。     * 3關鍵字，包括left right center top bottom     */}

• 文本樣式 主要用於設定文本的屬性

h1{    text-indent: 20px;    /*     * 用於設定文本的首行縮排值，預設屬性值為0，其屬性數值用具體數值描述，單位可為任意長度單位：em px in pt pc cm mm等。     */        text-align: left;    /*     * 用於設定文本段落的水平對齊，其屬性設定文法如下；     * text-align:left|right|center|justify     * 該屬性的取值有4種：     * left表示靠左對齊     * right表示靠右對齊     * center表示置中對齊     * justify表示左靠右對齊     */        vertical-align: baseline;    /*     * 用於設定文本段落的垂直對齊，其屬性設定文法如下：     * vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom;     * baseline:屬性的預設值，表示段落文本與上段落文本的基準對齊；     * sub：表示文本以下標方式顯示；     * super:表示以上標方式顯示；     * top:表示垂直向上對齊；     * text-top:表示文本垂直向上對齊；     * middle：表示垂直置中對齊；     * bottom：表示垂直向下對齊；     * text-bottom:表示文字垂直向下對齊。     */        line-height: normal;    /*     * 用於設定文本的行距，屬性設定文法如下：     * line-height：normal|百分比|長度值     * normal：表示該屬性的預設值；     * 百分比：表示相對於字大小font-size的百分比     * 長度值：用具體的數值表示，其屬性值可以問任意的長度單位：em px in pt pc cm mm等。     */        letter-spacing: normal;    /*     * 用於設定字元的間距，其屬性設定文法如下：     * letter-spacing：normal|長度值；     * normal：表示該屬性的預設值；     * 長度值：用具體的數值表示，其屬性值可以問任意的長度單位：em px in pt pc cm mm等。     * 我們也可以把長度值設定為負數，以打打緊縮字元行距的效果     */}

• CSS字型屬性  主要設定文字的屬性

h2{    font-family: "微軟雅黑";    /*     * 用於設定文字的字型，文法設定如下：     * font-family：字型；     * 可以設定多種字型，用逗號隔開，瀏覽器按照順序尋找系統可匹配的字型，若尋找不到，瀏覽器會使用預設的字型。     */        font-style: normal;    /*     * 用於設定文字的效果，其屬性設定文法如下：     * font-style:normal|italic|oblique;     * normal:表示預設值     * italic：表示斜體     * oblique：表示歪斜體     */        font-size: 10px;    /*     * 用於設定字型的大小，其屬性設定文法如下：     * font-size:長度|關鍵字     * 長度：用具體的數值描述，單位可以問任意的長度單位：em px in pt pc cm mm等。     * 關鍵字;包括：XX-small、X-small、small、medium、large、XX-large、X-large、larger和smaller.     */        font-weight: normal;    /*     * 用於設定文字的粗細，其屬性設定文法如下：     * font-weight：normal|bold|bolder|lighter|100~900     */        font-variant: normal;    /*     * 用於設定文字的變形屬性，其屬性設定文法如下：     * font-variant：normal|small-caps     */        }

CSS基本樣式