CSS基礎知識
CSS作用：
外觀美化，布局，定位
CSS的幾種選擇器：
1標簽選擇器：
<head>
<meta charset="UTF-8">
<style>/*選擇器：你要操作的頁面元素 標簽選擇器:作用於當前頁面的所有li標簽*/
li{
color: red;
}
</style>
<title>標簽選擇器</title>
</head>
2 ID選擇器：
<head>
<meta charset="UTF-8">
<style>
/*ID選擇器：給當前頁面指定的id元素添加樣式，同一個頁面，不能出現重復的id*/
#change{
color: red;
}
</style>
<title>ID選擇器</title>
</head>
body>
<ul>
<li id="change">理學院</li><!--id不能重復-->
<li>計算機學院</li>
</ul>
3：類選擇器：
<head>
<meta charset="UTF-8">
<style>
/*類選擇器：給當前頁面某一類標簽添加樣式，同一個頁面，可以存在多個同名的類*/
.change{
color: red;
}
</style>
<title>類選擇器</title>
</head>
<body>
<ul>
<li class="change">理學院</li>
<li>計算機學院</li>
<li class="change">外國語學院</li>
<li>汽車學院</li>
<li class="change">機械學院</li>
</ul>
4後置選擇器：
<style>
.td <p>{
color: red;
}
</style>
CSS的三種樣式：行內樣式；內部樣式；外部樣式
下面是極端代碼配合理解三種樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--外部樣式-->
<link rel="stylesheet" href="../../css/first.css">
<!--內部樣式-->
<style>
li{
color: coral;
font-size: 19px;
font-weight: bold;
}
#qwer{
color: crimson;
}
</style>
<title>CSS使用方法{內部，行內}</title>
</head>
<body>
<!--CSS的使用方法分3類：
1：行內樣式 <li style="color: ;size: ">
缺點：代碼繁復，影響正常的代碼審查，不利於後期維護（最不推薦！）
優點：樣式的優先級高，可以實現整體風格下的單獨效果。
2：內部樣式
缺點：代碼復用程度低（不同頁面不能復用）。
3：外部樣式
默認情況下，優先級:
行內樣式 > 內部樣式 > 外部樣式
但是要考慮順序，即就近原則
特殊情況下，那就是外部樣式在內部樣式的後面引入，會發現相同類名或ID定義的樣式，行外的的優先級是高於行內的
再就是考慮權值原則
-->
<ul>
<!--行內樣式-->
<li style="color: #4D2E83">數學院</li>
<li>法學院</li>
<li>理學院</li>
<li>工學院</li>
<li id="qwer">外國語學院</li>
<li>航海學院</li>
<li>國防生學院</li>
</ul>
</body>
</html>
上文提到的特殊情況的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li{
color: coral;
font-size: 19px;
font-weight: bold;
}
</style>
<link rel="stylesheet" href="../../css/first.css">
<title>CSS使用方法{內部，行內}</title>
</head>
<body>
<ul>
<li>數學院</li>
<li>法學院</li>
</ul>
</body>
</html>
CSS基礎知識