CSS之CSS和html整合方式及優先順序

carson0408發表於2018-03-18
CSSHTML

        CSS的使用可以將顯示樣式分離出來，那麼CSS需要與html整合使用，就相當於將網頁內容與顯示樣式整合在一起。CSS和html有四種整合方式，本文就詳細講解這四種整合方式。

1.style樣式(內聯樣式)

        style樣式就是將樣式直接通過style屬性表達出來。

<html>
 <head>
  <title>HTML示例</title>
  
 </head>
 <body>

<div style="background-color:red;color:green;">css和html整合之style樣式表</div>


 </body>
</html>

檢視效果：


2.內部樣式表

        所謂內部樣式表，就是在<head></head>元素之間定義的，並將樣式內容定義在<style></style>元素之間。

<html>
 <head>
  <title>HTML示例</title>

  <style type="text/css">	
	div {
		background-color:green;
		color: pink;
	}		
 </style>

 </head>
 <body>

<div>css與html整合之內部樣式表</div>

 </body>
</html>

檢視效果：


3.外部連線樣式表

        在html檔案中通過與css檔案建立連線，從而在html中可以直接使用css檔案中的樣式。通過<link rel="stylesheet" type="text/css" href="*.css" />來與css檔案建立連線。

首先，將樣式定義在div.css檔案中，檔案內容如下：

div {

	background-color: pink;
	color: black;
	font-size:20px;
	font-family:Serif;
	font-weight:5px;
	font-style:italic;
}

然後使用外部連線的例項：

<html>
 <head>
  <title>HTML示例</title>

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

 </head>
 <body>

	<div>css與html整合之外部連線樣式表</div>
 </body>
</html>

樣式結果：


4.外部匯入樣式表

        外部匯入樣式表，則是通過<style type="text/css">@import url(name.css)</style>來匯入外部的css內容的。演示程式碼如下：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
		@import url(div.css);
  </style>
 </head>
 <body>

<div>css和html整合之外部匯入樣式表</div>
 </body>
</html>

效果如下：


5.優先順序比較

        css和html整合有四種方式，接下來來看看這幾種方式的優先順序。

首先定義div.css檔案如下：

div {

	background-color: pink;
	color: black;
	font-size:20px;
	font-family:Serif;
	font-weight:5px;
	font-style:italic;
}
p {
	color:red;
	font-weight:10px;
}

例項程式碼：

<html>
 <head>
  <title>HTML示例</title>

  <link rel="stylesheet" type="text/css" href="div.css" />
  <style type"text/css">
      div{
	  background-color:white;
		color:pink;
	  }
  </style>

 </head>
 <body>

	<div style="color:black">誰是第一優先順序</div>
	<div>誰是第二優先順序</div>
	<p>誰是第三優先順序</div>
 </body>
</html>

效果圖：


        結合效果圖和程式碼可以看出，style樣式的優先順序最高，當幾種整合方式都存在的時候，具有相同屬性時，style值能夠覆蓋其它的，如果沒有的則繼承過來，其次就是內部樣式表，覆蓋低優先順序衝突的以及繼承自身沒有但是低優先順序有的。因此整合方式的優先順序應該是從外到內，優先順序從低到高。

相關文章