技術標籤：前端學習css

一、CSS是什麼

CSS，指的是Cascading Style Sheet（層疊樣式表），是用來控制網頁外觀的一門技術，它告訴瀏覽器如何指定樣式佈局等。
CSS發展至今，歷經CSS1.0、CSS2.0、CSS2.1以及CSS3.0幾個版本。其中，CSS2.1是CSS2.0的修訂版，CSS3.0是CSS的最新版本。
雖然出現了CSS3，但CSS2並未被淘汰，一般來說，CSS3指的是相對於CSS2“新增加的內容”。

二、頁面引入CSS方式

在一個頁面引入CSS，共有以下3種方式。
（1）外部樣式表
（2）內部樣式表
（3）行內樣式表

1.外部樣式表
外部樣式表是最理想、最常用的CSS引入方式，指的是把CSS程式碼和HTML程式碼單獨放在不同檔案中，在HTML文件中的head部分使用link標籤來引用CSS樣式表。

<link rel="stylesheet" type="text/css" href="檔案路徑" />

其中rel是relative的縮寫，它的取值是固定的stylesheet，表示引入的是一個樣式表文件（即CSS檔案）。
type屬性取值也是固定的"text/css"，表示這是標準的CSS。
href則屬性表示CSS檔案的路徑。

2.內部樣式表
內部樣式表，指的是把HTML程式碼和CSS程式碼放到同一個HTML檔案中。其中，CSS程式碼放在style標籤內，而style標籤則放在head標籤內部的。

<style type="text/css">
    ……
</style>

其中type="text/css"是不可缺少的，表示這是標準的CSS。
style標籤中，首先通過選擇器選擇需要設定的標籤，再為標籤設定屬性。
如以下程式碼：

<style type="text/css">
	div{color: red;}    
</style>

<div>Hello World</div>

顯示效果如下：

3.行內樣式表/內聯樣式
行內樣式表跟內部樣式表類似，也是把HTML程式碼和CSS程式碼放到同一個HTML檔案。但是兩者有著本質的區別：內部樣式表的CSS是在“style標籤”內定義的，而行內樣式表的CSS是在“標籤的style屬性”中定義的。

<div>Hello World</div>    
<br>    
<div style="color:red">Hello World</div>

顯示效果如下：