進擊のpython
前端學習——CSS基礎
CSS的樣式可以寫在哪呢？其實CSS的樣式插入式十分靈活的
按照插入的形勢來看，可以分為三種情況
而接下來就對這三種情況進行簡單的討論
內嵌式
CSS樣式表是可以直接把代碼放在現有的標簽里面去的
這種方法就稱為內嵌式：
<p style='color:red;'>文字顏色為紅色</p>
把對應的style屬性，寫在p標簽的開始標簽中
CSS樣式代碼要寫在style=“”雙引號中，如果有多條CSS樣式代碼設置可以寫在一起，中間用分號隔開
<p style='color:red;font-size:12px;'>文字顏色為紅色</p>
嵌入式
有個新的任務百因必有果！你的報應就是我！，我想把百因必有果，你，我這三個變成紅色
要是用內嵌式的話，那可就太難了（每一個<span>標簽加入style=”color:red;”語句，如果有多個span呢？）
那么嵌入式CSS樣式的編寫就能讓我們很快的解決這個問題
嵌入式樣式就是把CSS樣式代碼寫在<style type='text/CSS'></style>標簽之間
統一設置span標簽的樣式：
<style type='text/CSS'>
span{
color:red;
}
</style>
嵌入式的CSS樣式必須寫在<style></style>之間
並且一般情況下嵌入式CSS樣式寫在<head></head>之間
外部式
大家試想一下，如果我們做一個類似淘寶那樣的商城網站
那么隨着項目需求的增多，我們的CSS代碼量也會更龐大，越發到了后期
我們上述的內聯式和嵌入式CSS樣式的方式肯定是不行的，那我們應該怎么辦?
這個時候，我們可以使用將我們的CSS代碼編寫到另一個單獨的文件中，以為了后期方便維護我們的代碼
那么這就是外部式CSS樣式
外部式CSS樣式(也可稱為外鏈式)就是把CSS代碼寫一個單獨的外部文件中，這個CSS樣式文件以”.CSS”為擴展名
在<head>內（不是在style標簽內）使用<link>標簽將樣式文件鏈接到HTML文件內，如下代碼：
<link rel="stylesheet" href="index.CSS" type="text/CSS">
- CSS樣式文件名稱以有意義的英文字母命名，如main.css、index.css、base.css等
- rel=”stylesheet”
- rel:relationship的縮寫，rel屬性用於定義鏈接的文件和HTML文檔之間的關系
- stylesheet：文檔的外部樣式表
- href：是指定超鏈接(之前學習a標簽的時候)目標的URL,href屬性的值為樣式表文件的地址
<link>標簽位置一般寫在<head>標簽之內
優先級
這么多方式，要是疊加使用，應該用誰的樣式呢？？？這就是我們現在要考慮的問題
我們做個測試：
- 使用內聯css設置”百因必有果“文字為紅色。
- 然后使用嵌入式css設置文字為綠色
- 最后使用外部式設置文字為藍色(index.css文件中設置)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span style="color: red">百因必有果！</span>你的報應就是我！</p>
</body>
</html>
span{
color: pink;
}
我們發現，顏色是紅色，為什么呢？因為這三種引入方式是優先級的，誰的優先級高瀏覽器就會顯示誰的樣式屬性
內聯式>嵌入式>外部式
重點來了！！嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面！
綠色：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span>百因必有果！</span>你的報應就是我！</p>
</body>
</html>
粉色：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
color: green;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p><span>百因必有果！</span>你的報應就是我！</p>
</body>
</html>
所以根本的優先級其實是就近原則！，哪個離被修飾的元素近，用哪個樣式！
這也就是為什么CSS叫層疊樣式表！