CSS和HTML結合的四種方式
阿新 • • 發佈：2018-12-14
（1） 在每個html標籤上都有一個style屬性，把css和html結合在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: burlywood;color: black">枸杞配紅棗</div>
</body>
</html>
第一個color是背景顏色，第二個color是字型的顏色
（2）使用的html的一個標籤實現<style>標籤，寫在head裡面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ background-color: aqua; color: coral; } </style> </head> <body> <div>枸杞配紅棗</div> </body> </html>
<style>裡的div是對<body>裡的<div>做樣式變化
（3）在style標籤裡面，使用語句 @import url（css檔案的路徑）
先是CSS檔案程式碼
div{
background-color:blue;color:green;
}然後是html檔案程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> @import "div.css"; </style> </head> <body> <div>枸杞配紅棗</div> </body> </html>
瀏覽器顯示結果
（4）使用頭標籤link，引入外部css檔案
div{
background-color:yellow;color:gray;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div>枸杞配紅棗</div>
</body>
</html>
第三種方式在某些瀏覽器下沒有作用，一般使用第四種方式。