CSS(一)：認識CSS
- WBOY原創
- 2016-08-10 08:49:401186瀏覽
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>;
}
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn