前端學習(3)-CSS
- 2020 年 4 月 4 日
- 筆記
一 CSS
CSS是Cascading Style Sheets的縮寫，層疊樣式表，用來控制網頁數據的顯示，可以使網頁的顯示與數據內容分離。
二 引入方式
（1）行內式：在標記的style屬性中設置CSS樣式，不推薦使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> </head> <body> <div style="color: aqua;background-color: bisque">hello world</div> </body> </html>
（2）嵌入式：將CSS樣式集中寫在網頁的<head></head>標籤找那個的<style></style>標籤中。結果和上圖一致；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style> div{ color: aqua; background-color: bisque; } </style> </head> <body> <div >hello world</div> </body> </html>
（3）鏈接式：寫一個*.css文件引入到HTML文件中。不知道為什麼用Chrome瀏覽器和IE都不能顯示，但在Windows Edge瀏覽器中可以。推薦使用這種方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <link href="myCss.css" rel="stylesheet" type="text/css"/> </head> <body> <div >hello world</div> </body> </html>
CSS文件：
div{ color: aqua; background-color: bisque; }
（4）導入式：在<head></head>標籤中的<style></style>標籤中導入*.css文件。還是只能在Windows Edge中正常顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style type="text/css"> @import "myCss.css"; </style> </head> <body> <div >hello world</div> </body> </html>
如果以上幾種方式同時使用，採取就近原則，離標籤最近的樣式將被適用。
三 CSS選擇器
選擇器是用來指定樣式的作用對象，作用於哪些標籤。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style type="text/css"> *{ {#通用選擇器#} background-color: aqua; } div{ {#標籤選擇器， 標籤名字#} font-size: 50px; } #name{ {#以標籤中的id作為選擇器， 前面加"#" #} color: black; } .p2{ {#以標籤中的id作為選擇器，前面加"." #} font-style: oblique; } .div1 p1{ {#後代選擇器， div1是父代標籤class，p1是子代標籤class 只要是有這種層級關係的都會被指定， 用空格隔開#} font-size: 60px; } .div1>.p1{ {#子代選擇器，div1是父代標籤class，p1是子代標籤class 只會把子代指定樣式， 用大於號隔開#} color: darkcyan; } #name, #sex{ {#同時指定多個沒有標籤樣式，並列選擇器，用逗號隔開#} color: coral; } .div1+#name{ {#毗鄰選擇器， 會指定class是div1的緊挨著的下一個id是name的標籤的樣式#} color: blue; } [class]{ {# 屬性選擇器 所有這類屬性的標籤都有這個樣式 #} color: red; } [class="p2"]{ {# 屬性選擇器 指定屬性值為p2 的標籤的樣式 #} color: black; } [name]{ {# 為自己創建的屬性添加樣式 #} font-size: 50px; } div [class="p2"]{ {# 當用屬性鍵值對區分不出時，可以在前面加上標籤名，用來指定樣式 #} color:black; } p [class="p2"]{ {# 指定p標籤中屬性class值等於p2的標籤的樣式 #} color: blue; } [class~="div2"]{ {# 指定標籤屬性中只要有一個屬性是div2的標籤的樣式，可以選中一個屬性多個值 #} background-color: yellow; } [class ^= "div2"]{ {# 指定class屬性的值得開頭為div2的標籤的樣式 #} background-color: yellow; } [class $= "div2"]{ {# 指定class屬性的值以div2結尾的標籤的樣式 #} background-color: yellow; } [class *= "div2"]{ {# 指定class屬性的值包含div2的標籤的樣式 #} background-color: yellow; } </style> </head> <body> <div >hello world</div> <div class="div1"> <p class="p1">div p</p> </div> <p id="name">I'm damon</p> <p id="sex">Man</p> <p class="p2">p2標籤</p> <div class = "p2">classp2 div</div> <p name="damon">damon</p> {# 自己創建個name屬性 但瀏覽器不認識#} <div class="div2 div3">兩個屬性</div> {# 這個標籤的class屬性有兩個值div2 div3 #} </body> </html>
四 偽類
偽類是對選擇器添加特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style type="text/css"> a:link{ {# 定義鏈接時的樣式 #} color: yellow; } a:hover{ {# 定義滑鼠懸浮到鏈接時的樣式 #} color: blue; } a:visited{ {# 定義鏈接被訪問後的樣式 #} color: black; } a:active{ {# 定義鏈接訪問時的樣式 #} color: red; } </style> </head> <body> <a href="www.baidu.com">anchor偽類</a> </body> </html>
anchor偽類
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style type="text/css"> #p1:before{ content: "偽類"; {# 在id是p1的標籤的內容前面加‘偽類’ #} color: red; } #p2:after{ content: "偽類"; {# 在id是p2的標籤的內容後面加‘偽類’ #} color: darkcyan; } </style> </head> <body> <p id="p1"> before </p> <p id="p2"> after </p> </body> </html>
before,after偽類
五 常用屬性
1.顏色屬性：下面是顏色屬性常用的四種表示方式
<div style="color: red">英文單詞</div> <div style="color: #ff2233">十六進位</div> <div style="color: rgb(255,0,0)">rgb</div> <div style="color: rgba(255,0,0,0.5)">rgba</div>
2.字體屬性
<div style="font-size: smaller">字體大小</div> <div style="font-family: 'Times New Roman'">字體樣式</div> <div style="font-weight: lighter">字體粗細</div> <div style="font-style: italic">字體傾斜</div>
3.背景屬性
background-color: red; {# 設置背景顏色 #} background-image: url("1.jpg"); {# 設置背景圖片 #} background-repeat: no-repeat; {# 背景圖片是否平鋪整個背景 #} background-size: 100px 200px; {# 背景圖片大小 #}
background-position； center center; {#背景圖片位置在上下的中心 左右的中心 #}
也可以直接這麼寫：
background: red no-repeat url("1.jpg") 100px 200px;
4.文本屬性
text-align: center; {# 文本居中 #} line-height: 100px; {# 文本所佔行的高度 #} text-indent: 10px; {# 文本首行縮進 #} letter-spacing: 10px; {# 文本中每個字母的間隙 #} word-spacing: 10px; {# 文本中每個單詞的間隙 #} text-transform: capitalize; {# 文本中單詞首字母大寫 #}
5.外邊距和內邊距
在html中一切皆盒子。margin是盒子與盒子之間的距離，border是盒子的邊界，padding是盒子邊界距離內容的距離
注意：當指定一個CSS元素的長度和寬度時，指定的是內容區域的長寬，要指定完全體的長寬，還需指定邊寬和邊距。
6.邊界屬性
border-stype: solid border-color: red border-width: 20px 簡寫：border: 10px red solid
六 嵌套規則
1. 塊級元素可以嵌套內聯元素或者某些塊級元素，內聯元素不能包含塊級元素而只能包含其他內聯元素；
2. h1, h2, h3, h4, h5, h6 p, dt這些塊級元素只能包含內聯元素；
3. li內可以包含div；
4. 塊級元素應該與塊級元素並列， 內聯元素與內聯元素並列；
參考文獻：
https://www.cnblogs.com/yuanchenqi/articles/5977825.html
