HTML+CSS基礎知識個人筆記_2
阿新 • • 發佈：2018-12-02
HTML+CSS基礎知識個人筆記_2
CSS樣式
行內樣式
寫在行內，如下所示 style = “color: green”
<div class="name" id="na" style="color: green">123</div>
內部樣式表
寫在html檔案的head中
<head> <meta charset="utf-8" /> <title>08_新聞.html</title> <style> h3 { color: orange; } h4 { color: deeppink; } p { color: #036; } div { color: red; } </style> </head>
外部樣式表
另起css檔案，通過link呼叫，不用寫style
常用，複用性高。
/* CSS檔案 */
/*外部樣式表不需要style*/
div {
color: red;
}
<!-- HTML檔案 -->
<head>
<meta charset="utf-8" />
<title>09_外部樣式表.html</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" >
</head>
CSS選擇器
基本選擇器
標籤選擇器
形式：
選擇器 { 屬性： 值； }
/*選擇器 { 屬性： 值； } ------ 標籤選擇器，選擇標籤的*/
th {
color: skyblue;
}
td {
font-size: 14px;
}
tr {
height: 20px;
}
類選擇器
類選擇器：上面點宣告，下面類呼叫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>10_類選擇器.html</title>
<style>
span { /*標籤選擇器 可以選擇 所有的 同種標籤 此處讓所有的 span 的
font-size 變為150px*/
font-size: 150px;
}
.G { /*類選擇器：上面點宣告，下面類呼叫*/
color: blue;
}
.o1 { /*命名規則，不建議使用_ 因為JS中變數一般採用_ 對於需要分割
的，用- 如：first-child*/
color: red;
}
.o2 { /*類選擇器 可以選擇一種或者多種不同個數標籤，同class即可，不一
定同種全部*/
color: yellow;
}
.g {
color: lightblue;
}
.l {
color: green;
}
.e {
color: deeppink;
}
</style>
</head>
<body>
<div class="G">G</div>
<span class="G">A</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
多類名選擇器
呼叫時，class=“red font20”，中間用空格隔開即可。
樣式顯示效果與呼叫順序無關，而是由層疊性決定，樣式聲明後來者為準，就近原則。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01多類名選擇器.html</title>
<style>
.red {
color: red;
}
.font20 {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<!-- 樣式顯示效果和HTML元素的類名先後順序無關，與CSS樣式書寫上下順序有關，後來者有效 -->
<!-- HTML多類名之間用空格隔開 -->
<!-- 類名的簡單理解：<a class="nav"> nav就是這個a的名字 這個a就是nav nav就是這個a a:hover 可寫成 .nav:hover -->
<div class="red font20">多類名</div>
<div class="font20 red">多類名</div>
<div>多類名</div>
<div>多類名</div>
<p class="red">多類名</p>
<p class="red">多類名</p>
<p>多類名</p>
<p>多類名</p>
</body>
</html>
id選擇器
css：
#last {
color: red;
}
html：
<div id="last">id選擇器.html</div>
萬用字元選擇器
* { /*萬用字元選擇器，選擇所有標籤，會拖慢渲染，一般不用*/
color: red;
}
複合選擇器
連結偽類選擇器
標準寫法：
/*請按照 L V H A 的順序編寫！ 簡記為:LV HAo 或者 LoVe HAte*/
/*順序指定原則是，優先順序問題，涉及到權值，或者說特殊性值*/
/*實際上確保 L H A 即可，V 的位置可以任意放*/
a:link { /*常態*/
color: #3c3c3c;
font-size: 50px; /*一般用偶數*/
font-weight: 700;
text-decoration: none;
}
a:visited { /*已訪問後的狀態*/
color: orange;
}
a:hover { /*滑鼠懸停或者經過的狀態*/
color: #f00;
}
a:active { /*點選但為釋放的狀態*/
color: green;
實際開發中的連結偽類選擇器：
/*建議先寫a，再寫a:hover*/
/*這裡先寫hover也沒事，因為是偽類,0, 0, 1, 0 > 0, 0, 0, 1*/
/*a是：0001，a:是：0010*/
a {
color: #333;
font-size: 26px;
font-weight: 700;
text-decoration: none;
}
a:hover {
color: #f10215;
}
並集選擇器
/*並集使用較多*/
/*並集選擇器， 用,隔開， 代表 和 的意思， 也可理解成或運算， 注意與後代選擇器用
空格隔開區分*/
/*在集體宣告相同樣式時*/
div,
p,
span {
color: red;
}
交集選擇器
/*交集使用較少*/
/*小心寫法，在u1和.red之間，不要出現空格，否則會理解成後代選擇器！*/
/*u1.red u1#de這個所用可以，但多次一舉*/
ul.red {
color: red;
}
後代選擇器
選擇所有後代，可跨越，用空格隔開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_後代選擇器.html</title>
<style>
/*後代使用較多*/
/*選所有後代，可跨越*/
/* > 左右可以有空格*/
ul ol > li {
color: red;
}
/*ul div {
color: green;
}*/
</style>
</head>
<body>
<ul>
<li>
<div>第一級</div>
<ol>
<li>
<div>第二級</div>
<div>第二級</div>
<div>第二級</div>
</li>
</ol>
</li>
</ul>
<div>name</div>
</body>
</html>
子代選擇器
選擇 所有 子代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_子代選擇器.html</title>
<style>
/*子代使用較少*/
/*子代選擇器，用 > 符號限定其子代，左右可帶空格。
可與後代選擇器連用，
綜合理解，後代選擇器，選擇所有後代，不單單子代，可跨越，而不管其所
在位置有多深，
子代選擇器，只選擇 所有 子代。
如以下做法，ul 下的所有ol 的li子代*/
/*ul ol > li {
color: red;
}
*/
/*所有first類的盒子，包含div.first*/
/*.first {
color: red;
}*/
/*ul下的first類的盒子，div.first不包含*/
/*ul.first {
color: red;
}*/
/*效果同ul.first 因為div.first沒有ol的後代的li子代*/
/*.first ol > li {
color: red;
}*/
/*效果同ul.first*/
/*ul.first ol > li {
color: red;
}*/
</style>
</head>
<body>
<ul class="first">
<li>
<div>第一級</div>
<ol>
<li>
<div>第二級</div>
<div>第二級</div>
<div>第二級</div>
</li>
</ol>
</li>
</ul>
<div class="first">test</div>
<ul>
<li>
<div>第一級</div>
<ol>
<li>
<div>第二級</div>
<div>第二級</div>
<div>第二級</div>
</li>
</ol>
</li>
</ul>
<div>name</div>
</body>
</html>