2019前端「HTML+CSS」零基础入门之 CSS学习笔记
目錄
2019前端「HTML+CSS」零基礎入門
? ? ? ? ? ? ? ? ??2019前端「HTML+CSS」零基礎入門之 HTML學習筆記
課時4?css初級篇-css引入css基礎選擇器選擇器權重
課時5?css復雜選擇器，權重計算問題，css基礎屬性
課時6?css企業開發經驗、習慣，盒子模型，層模型
課后練習
2019前端「HTML+CSS」零基礎入門
瀏覽器 = shell（外殼）+內核
市場主流瀏覽器是什么？是在市場占有一定份額并有自主研發的內核的瀏覽器。
| 瀏覽器 | 內核 |
| IE | trident |
| Firefox ? ? | Gecko |
| Google chrome | Webkit/blink |
| Safari | Webkit |
| Opera | presto |
HTML、CSS、JavaScript三者分工不同。?
HTML ? ? ? ? ? ? ?負責結構
CSS? ? ? ? ? ? ? ? 負責樣式
JavaScript? ? ? ?負責行為
CSS中只有一種注釋形式：/*? ? */? ? 快捷鍵：ctrl鍵+?
課時4?css初級篇-css引入css基礎選擇器選擇器權重
CSS的完整拼寫：Cascading Style Sheet ，意思是層疊樣式表。CSS是用來裝修HTML的。
引入css的三種形式：
1.行間樣式css
<html><head><meta charset="utf-8"><title>document</title></head><body><div style="width: 100px;height: 100px;background-color: red;"></div></body>? </html>2.頁面級css?
<html><head><meta charset="utf-8"><title>document</title><style>div{width: 100px;height: 100px;background-color: red;}</style></head><body><div></div></body>? </html>3.外部css文件
/*style.css*/ div{width:100px;height:100px;background-color:red; } <!--document.html調用style.css--> <html><head><meta charset="utf-8"><title>document</title><link rel="stylesheet" href="style.css"> </head><body><div></div></body>? </html>選擇器
1.id選擇器：? ? ? #(id名)
比如某個元素 id="only"? ,? #only 即可選擇到這個元素（id和元素的關系是1對1）。
2.類選擇器? ? ? ? .（class名）
比如某個元素 class="demo"? ,? .demo 即可選擇到這個元素（class和元素的關系是多對多）；
多個class屬性的連接用空格即可，比如?class="demo? demo1" 表示元素同時擁有“demo”和“demo1”兩個class屬性。
3.標簽選擇器? ? ? ?標簽名
直接 標簽名 加 花括號{} 即可修改標簽樣式。
比如：選擇所有div標簽
4.通配符選擇器 *? ?選擇所有元素。
優先級：
!important>行間樣式>id選擇器>類選擇器=屬性選擇器([屬性/屬性=屬性值])>標簽選擇器>通配符選擇器? ?
| !important | Infinity |
| 行間樣式 | 1000 |
| id選擇器 | 100 |
| class選擇器|屬性選擇器|偽類 | 10 |
| 標簽選擇器|偽元素 | 1 |
| 通配符選擇器 | 0 |
課時5?css復雜選擇器，權重計算問題，css基礎屬性
1.父子選擇器/派生選擇器? ?（不一定要用標簽選擇器，可用其他選擇器替代）? 形式：父親+空格+子孫
示例1：div下的所有span? ??
示例2： strong下的所有em? ?
示例3：? div下所有的em? ?
2.直接子元素選擇器? 形式：父親+'>'+兒子
示例：div下的直接兒子em? ? div > em
3.并列選擇器（按順序且不帶空格）?
示例：
4.分組選擇器
復雜選擇器優先級：同行選擇器對應權重之和比較大小（權重相同后面覆蓋前面的）
CSS字典
基本用法：
設置顏色的三種形式：
1.純英文單詞（示例：red）
2.顏色代碼（三原色rgb，示例：#ff4400，每兩位表示一種原色的飽和度，依次是紅綠藍）
3.顏色函數（示例：rgb(255,255,255）)
border —— 盒子邊框：
? ? ? ? ??? ? ? ? ??
課時6?css企業開發經驗、習慣，盒子模型，層模型
字體默認高度為16px.
實現字體在按鈕中水平垂直居中： 文本所占高度=容器高度（line-height=height）
實現文本首行縮進兩個位置：
一個像素（px）只能表示一種顏色。1 em=1 font-size 。
行為、樣式、結構相分離：
模仿a標簽：（藍色、下劃線、聚焦變小手）
偽類選擇器（最常用 -? :hover? 表示鼠標聚焦的效果）：
實現聚焦背景變色，如下圖：
? ? 轉換：display屬性
如行級轉塊級：
去除圖片之間的空隙：
連續幾張圖片放在一起為什么會有空隙？因為。
?
? ?——>??
盒子模型：
先定義功能，后選擇。
意思就是先寫好css樣式，寫html的時候調用所需要的樣式即可，這樣比較有利于模塊化分工，省時間精力。
自定義標簽：
意思就是初始化標簽，比如說baidu檢索的時候關鍵字顯示紅色，查看源代碼發現使用的是<em>標簽，而<em>標簽的原始css并不是這樣的，但是我們可以自定義。
當標簽的某些固定屬性是我們不需要或者不想要的時候，我們可以通過自定義標簽來改變標簽的初始樣式。
再講幾個栗子，比如a標簽我們不想要下劃線和藍色，比如ul標簽不想要圓點和間距。為了清晰一點我把背景變成黃色。
初始：? ? ? ? ? ? 自定義：
一般每個標簽都會自帶padding和margin屬性，但是有時我們不想要他們自帶的間隔大小，所以最好用通配符選擇器取消所有標簽的自帶間隔屬性。?為什么這樣最好呢？因為通配符選擇器權重為0，如果想要自定義也不會沖突。
什么是盒子模型？就是針對HTML的每個元素都可以作為一個盒子。
盒子的三大組成部分：盒子壁border + 內邊距padding + 盒子內容(width+height)
盒子模型=外邊距margin+border+padding+（content=width+height）
瀏覽器以左邊上邊為墻，也就是說設置外邊距的時候元素會往右下或者左上變化。
控制臺：
右鍵點擊控制，出現控制臺界面，點擊Elements，出現HTML+CSS的展示。
在CSS區域旁邊就是盒子模型，鼠標移到哪，對應的區域就會變色。
當我們想要設置一個元素居中時，可以嵌套元素盒子把內容大小設置成一樣大。比如：
padding是一個復合屬性，padding：10px等同于 padding：10px 10px 10px 10px，設置padding: 10px 20px 30px 40px如下圖：
四個值時順序：上，右，下，左；三個值時順序：上，左右，下；兩個值時順序：上下，左右；一個值：上下左右。
還可以單獨設置padding-top，padding-left，padding-right，padding-bottom。
嘗試做個遠眺圖，如下圖：
這里只有三層：
有了margin就能隔開元素和元素。
原始：? ? ? 自定義：
定位：在特定位置出現特定元素
絕對定位absolute：
設置左邊線距離左邊：left屬性；右：right；上：top；下：bottom。
body標簽自帶的margin屬性的值為8px，所以生成的元素不會緊貼頁面邊框。
絕對定位的特點：
1.脫離原來位置進行定位（變成不同層面的元素，不占有另一層面的空間）
2.相對于最近的有定位的父級進行定位，如果沒有就相對于文檔定位
相對定位relative：
相對定位的特點：
1.保留原來位置進行定位（變成不同層面的元素，占有另一層面的空間）
2.相對于自己原來的位置進行定位
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ?
使用定律：用relative做參照物，用absolute定位 。
廣告定位fixed：
就是平時遇到的頁面上那種不管頁面怎么動位置都不變的廣告的定位。自己試試：
如何居中定位？ 首先left和top屬性設置為50%，又由于定位是以元素的左上角為參照的，所以還需要修改margin-left和margin-top往左和往上移動一半的寬和一半的長。如下：
課后練習
作業：顯示一個五環，并要求在屏幕居中的位置。
提示：
?
<html><head><meta charset="utf-8"><title>document</title><link rel="stylesheet" href="style.css"></head><body><div class="dv1"><div class="cir demo1"></div><div class="cir demo2"></div><div class="cir demo3"></div></div><div class="dv2"><div class="cir demo4"></div><div class="cir demo5"></div></div>br*500+Tab鍵</body>? </html> /*style.css*/ *{margin: 0;padding: 0; } .dv1,.dv2{position: fixed;left: 50%;top: 50%; } .dv1{margin-left:-150px ;margin-top: -100px;width: 300px;height: 100px;z-index: 1; } .dv2{margin-left:-100px ;margin-top: -50px;width: 200px;height: 100px;z-index: 2; } .cir{display: inline-block;width: 80px;height: 80px;border: solid 6px;border-radius: 50%; } .demo1{border-color: blue;margin-right: 7px; } .demo2{border-color: black;margin-right: 7px; } .demo3{border-color: red; } .demo4{border-color: yellow;margin-right: 11px; } .demo5{border-color: green; }?
總結
以上是生活随笔為你收集整理的2019前端「HTML+CSS」零基础入门之 CSS学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【浅墨Unity3D Shader编程】
- 下一篇： 前端「HTML+CSS」零基础入门学习笔