CSS(一)：認識CSS-html教學-PHP中文網

1.什麼是CSS

CSS 層疊樣式表(英文全名：Cascading Style Sheets)是一種用來表現HTML或XML等檔案樣式的電腦語言。 CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了許多強大的新功能。目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支援了CSS3大部分功能了，IE10以後也開始全面支援CSS3了。不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的。

<span style="color: #800000;">-moz-transform:translateX(20px);
-webkit-transform:translateX(20px);
-ms-transform:translateX(20px);
transform:translateX(20px);</span>

登入後複製

transform為CSS3的新屬性，各瀏覽器都需要加上前綴來支援。

2.CSS能做什麼

樣式定義如何顯示HTML 元素。
CSS把很多以前需要使用圖片和腳本來實現的效果、甚至動畫效果，只需要短短幾行程式碼就能搞定。例如圓角，圖片邊框，文字陰影和盒子陰影，過渡、動畫等。
CSS簡化了前端開發工作人員的設計流程，更靈活的頁面佈局，更快的頁面載入速度。
可以將網站上所有的網頁風格都使用一個CSS檔案來控制，只要修改這個CSS檔案中對應的程式碼，那麼整個網站的所有頁面都會隨之變動。
目的：將表現與結構分離。

<span style="color: #008000;">/*</span><span style="color: #008000;"> style.css </span><span style="color: #008000;">*/</span><span style="color: #800000;">

body</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#ccc</span>;
}<span style="color: #800000;">
h1</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">normal</span>;
}

登入後複製

<span style="color: #008000;"><!--</span><span style="color: #008000;"> index.html </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="./style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>这是标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

登入後複製

3.CSS語法結構

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明，選擇器通常是你需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是你希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

<span style="color: #800000;">p</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择器 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">      
    color</span>:<span style="color: #0000ff;">red</span>;      <span style="color: #008000;">/*</span><span style="color: #008000;"> 属性:值; </span><span style="color: #008000;">*/</span>
}

登入後複製

4.如何引入CSS

引入樣式表的方法有三種：

外部樣式表
內部樣式表
內聯樣式

　　4.1 外部樣式表

　　　　當樣式需要套用於許多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以透過改變一個檔案來改變整個網站的外觀。每個頁面使用標籤連結到樣式表。標籤在（文件的）頭部：

<span style="color: #800000;"><head>
　　<link rel="stylesheet" type="text/css" href="style.css">
</head></span>

登入後複製

　　4.2 內部樣式表

　　　　當單一文件需要特殊的樣式時，就應該使用內部樣式表。可以使用

<span style="color: #800000;"><head>
    <style>
        p </span>{<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
    </style>
</head>        </span>

登入後複製

　　4.3 內聯樣式

　　　　內聯樣式是指將CSS樣式直接寫在HTML 標籤中的style屬性裡。注意這種方式的引入CSS，是不需要寫入選擇器的。

<span style="color: #800000;"><p style="color:red;">这是一个段落</p></span>

登入後複製

　　4.4 三種引進方式的優先權對比

　　　　當同一個 HTML 元素被不只一個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

瀏覽器缺省設定
外部樣式表
內部樣式表（位於標籤內部）
內聯樣式（在 HTML 元素內部）

因此，內聯樣式（在HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

5.CSS代碼註解

css 程式碼註釋，以 /* 開始 */ 結束。

<span style="color: #008000;">/*</span><span style="color: #008000;"> 公共样式</span><span style="color: #008000;">*/</span><span style="color: #800000;">

body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">0px</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;">0px</span>;}    
    
<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式开始</span><span style="color: #008000;">*/</span><span style="color: #800000;">
    
#nav </span>{<span style="color: #ff0000;">
      ……
    </span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式结束</span><span style="color: #008000;">*/</span>

登入後複製

6.CSS選擇器

CSS選擇器用於選擇你想要的元素的樣式的模式。

　　6.1 通配符選擇器

　　　　* 選擇器選擇所有元素。 * 選擇器也可以選擇另一個元素內的所有元素:

<span style="color: #800000;">*</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;
}<span style="color: #800000;">
div *</span>{              <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择div元素下的所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;
}

登入後複製

　　6.2 元素選擇器

　　　　所謂元素選擇符，指以網頁中已有的標籤名稱作為名稱的選擇符。

<span style="color: #800000;">body</span>{               <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为body的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
a</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为a的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}

登入後複製

　　6.3 群組選擇器

　　　　除了可以對單一標籤進行樣式指定外，還可以對一組標籤進行相同的樣式定義。使用逗號對選擇符號進行分隔。對頁面中需要使用相同樣式的元素，只需寫一次樣式。

<span style="color: #800000;">h1,h2,h3,p</span>{<span style="color: #ff0000;">         
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;
}

登入後複製