CSS知識梳理01
CSS的使用方式
1. 行內樣式(內聯樣式)
在HTML標簽中加style屬性，值寫css代碼
例：
1 <p style="color:red; font-size:50px"></p>
2. 內部樣式
將css代碼寫在style標簽中，style標簽對一般放在head頭裏面
選擇器{css代碼}
例：
p{background:lime;}
3. 外部樣式
1 <link rel="stylesheet" href="css的文件路徑" />
4. @import 導入外部css樣式
需要將語句寫在style標簽對的第1行
例：
1 <style>@import ‘./style.css‘;</style>
css的代碼概念
屬性:值;
多條代碼之間用分號隔開
最後一條的分號可以省略
全局屬性(標準屬性)：可以加在任何一個標簽身上，有style/id/class/title
CSS的註釋
/* 註釋內容 */
css使用方式的優先級
行內樣式 > 其他
其他：下面的會覆蓋上面的
css的長度單位
px 像素，屏幕顯示的最小表示單位
em 倍數，2em 兩倍
% 百分比，100% == 1em 200%兩倍
s 秒，css3的過渡效果會用到
deg 度，css3的2D變換的時候會用到
in 英寸，1英寸=96px
pt 磅
mm/cm 毫米/厘米
顏色單位
1. 顏色的英文單詞colorname
red/green/blue/pink/black...
2. 十六進制方式 0~9a~f
#紅 綠 藍
#ff 00 00 -> 簡寫 #f00
#abc -> #aabbcc
#aabbcd -> 不能簡寫
3. rgb()方式
rgb(紅, 綠, 藍);
數字：rgb(0~255, 0~255, 0~255);
百分比：rgb(0%~100%, 0%~100%, 0%~100%)
4. rgba()方式
rgba(紅, 綠, 藍, 透明度);
透明度： 0~1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css的基本語法</title> 6 7 <style> 8 p{color:blue;} 9 </style> 10 11 <!-- 外部樣式 --> 12 <link rel="stylesheet" href="style.css"> 13 14 </head> 15 <body style="font-size:50px"> 16 <!-- p標簽默認為16px --> 17 <p style="color:green;font-size:2em">這周日你有空嗎？</p> 18 <p style="font-size:32px">這周日你有空嗎？</p> 19 <p>這周日你有空嗎？</p> 20 <p style="font-size:1in">這周日你有空嗎？</p> 21 22 <hr> 23 <!-- 顏色 --> 24 <p style="color:#369">女神，我要給你做牛做馬！</p> 25 <p style="color:rgb(0,0,255)">女神，我要給你做牛做馬！</p> 26 <p style="color:rgba(0,0,255, 0.5)">女神，我要給你做牛做馬！</p> 27 </body> 28 </html>
css的選擇器
標簽選擇器
通過標簽名選中對象
class類選擇器
給HTML標簽加class屬性，值自己取；在內部或者外部樣式中通過.class名選中對象
id選擇器
給HTML標簽加id屬性，值自己取；在內部或者外部樣式中通過#id名選中對象
必須保證id值的唯一性
*通配符選擇器
可以匹配頁面上的任何一個元素
選擇器的優先級
id選擇器 > class選擇器 > 標簽選擇器
取名的規範：
1. 盡量由字母數字下劃線組成
2. 不要以數字開頭
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css的選擇器</title> 6 <style> 7 /*通配符選擇器*/ 8 *{border:5px solid lightblue;} 9 10 /*id選擇器*/ 11 #two{color:blue;} 12 /*class類選擇器*/ 13 .one{color:green;} 14 /*標簽選擇器*/ 15 p{color:red;} 16 17 .san{font-size:25px;} 18 #si{font-size:30px;} 19 </style> 20 </head> 21 <body> 22 <!-- class可以同時使用多個 --> 23 <p id="two" class="one">君子成人之美，小人奪人所愛</p> 24 <p>君子成人之美，小人奪人所愛</p> 25 <p id="kangyushenaizhewangru">君子成人之美，小人奪人所愛two</p> 26 <p>君子成人之美，小人奪人所愛</p> 27 <p class="one san">君子成人之美，小人奪人所愛</p> 28 </body> 29 </html>
CSS知識梳理01