CSS 樣式表小結 CSS （Cascading style sheets）學完就可以寫樣式了

先介紹一些簡單的基礎知識：

什麼是樣式選取器：

    Selector {                          /*  Selector 是樣式選取器 */
   property:value;    /* color:red;                        */
    property:value;   /* font-size:4cm;                 */
   …
}    Selector:當定義一條樣式規則時，必須指定受這條樣式規則作用的網頁元素，在一條規則中定義的網頁元素就是selector（選取器），也就是選擇該樣式規則作用於的網頁元素。

 

關聯選取器：

關聯選取器只不過是一個用空格隔開的兩個或更多的單一選取器給成的字串
因為層疊順序的規則，它們的優先權比單一的選擇符大
必須按關聯關係使用，不能有反順序
只要能保持關聯關係就可以，不管是在多少層

 

樣式規則的繼承：

所有嵌套在某個HTML標籤中的HTML標籤都會繼承外層標籤設定的樣式規則。

 

以分號;結束
<   &lt;  &#60;   
>  &gt;   &#62;

 

CSS的四種設定方式：內聯樣式表：在HTML元素標籤中使用style屬性內聯
每個HTML標籤都可以加樣式
內建樣式表：通過HTML的<style>標籤將CSS嵌入到HTML中使用
可以控制當前頁面的所有樣式
外部樣式表：將樣式單獨定義在一個尾碼名為.css的文檔中，並在HTML中通過link元素串連到HTML中使用。
多個頁面都可以使用
輸入樣式表：可以將一個樣式檔案輸入到另外一個樣式檔案的中，或將一個樣式檔案輸入到<style>元素中
@import url(css檔案)
他們的優先順序別：
內聯的高於其它的， 其它的和載入的順序有關

 

   

樣式表小結：

     選取器的優先等級 ：聯合選取器（多級的選取器 類似【#id div classA {        }】）> #id 選取器 > class 選取器 > html 標籤選取器   另外

直接寫在標籤中的選取器 > <style>標籤的  <style> 跟外聯的 誰後 誰起作用；

 

     另外在網頁最佳化方面； 一般會把多張圖片顯示在一張上，以達到減少請求的目的，提高網頁的響應；

 

 

CSS中修飾字型的屬性：font: [ <字型風格> || <字型變形> || <字型加粗> ]? <字型大小> [ / <行高> ]? <字型族科>

屬    性 描    述 屬  性  值
font-family 字型族科 任意字型族科名稱都可以使用例如Times、serif等，而且多個族科的賦值是可以使用的，中間用逗號分隔，以防止選擇不存在的字型族科
font-size 字型大小 可以使用絕對大小、相對大小、長度或百分比
font-style 字型風格 normal（普通），italic（斜體）或oblique（傾斜）
font-weight 字型加粗 normal、bold、bolder或lighter等
font-variant 字型變形 normal（普通）或small-caps（小型大寫字母）

 

CSS中常見的控制文本的屬性：letter-spacing 字母間隔 該值必須符合長度格式，允許使用負值
word-spacing 文字間隔 該值必須符合長度格式，允許使用負值
text-decoration 文字修飾 underline（底線），overline（上劃線），line-through（刪除線），blink（閃爍），或預設地使用無
text-align 橫向排列 left、right、center或justify
text-indent 文本縮排 該值必須是一個長度或一個百分比，若百分比則視上階項目的寬度而定
line-height 行高 可以接受一個控制文本基準之間的間隔的值。當值為數字時，行高由元素字型大小的量與該數字相乘所得。百分比的值相對於元素字型的大小而定。不允許使用負值

 

CSS中常見的控制背景的屬性：background-color 背景顏色 值和color屬性值設定方式相同，或使用transparent（透明）值
background-image 背景圖象 圖片URL或none（無）
background-repeat 背景重複 repeat、repeat-x、repeat-y、no-repeat
background-attachment 背景附件 scroll（滾動）或fixed（固定）
background-position 背景位置 橫向的關鍵字（left, center, right），縱向的關鍵字（top, center, bottom）百分比和長度也可用做安排背景圖象的位置

background:  <背景顏色> || <背景圖象> || <背景重複> || <背景附件> || <背景位置>

應用多個表徵圖放到同一個圖片裡：

多個表徵圖放到同一個圖片裡，通過定義某區塊的背景定位，調用同一個圖片中不同位置上的小表徵圖，好處是可以減少對伺服器的請求次數，從而加快頁面的訪問速度

 

邊框的一些風格： 各邊的風格使用的屬性值

dotted：點線式邊框
dashed：破折線式邊框
solid：直線式邊框
double：雙線式邊框
groove：槽線式邊框
ridge：脊線式邊框
inset：內嵌效果的邊框
outset：突起效果的邊框
可以通過邊框寬度屬性border-width設定上下左右邊框的寬度，該屬性用1到4個值來設定元素的邊界，值是一個關鍵字或長度，不允許使用負值長度。
如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。
如果只給出一個值，它將被運用到各邊上。
如果兩個或三個值給出了，省略了的值與對邊相等。這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。
也可以分別使用border-top-width、border-bottom-width、border-left-width和border-right-width屬性單獨設定各邊的寬度。除了可以使用長度單位定值外，還可以用medium（是預設值）、thin（比medium細）或thick（比medium粗）值。

 

CSS中常見的控制列表的屬性：ul 無序的列表  ol  有序的列表

 

list-style-type 設定引導清單項目的符號類型，可以設定多種符號類型，值為disc、circle、square等
list-style-image 使用映像作為定製列表符號
list-style-position 決定清單項目縮排的程度