黑马css学习笔记
一、CSS 網頁美容師
1、讓網頁更加豐富多彩，布局更加靈活自如
2、讓HTML從樣式中脫離，實現了HTML專注做結構呈現，樣式交給css。實現了結構和樣式相分離
css初識
概念：css通常稱為css樣式表或者層疊樣式表、級聯樣式表
作用：
主要用于設置HTML頁面中的文本內容 （字體、大小、對齊方式等）、圖片的外形（寬高、邊框、邊距）以及版面布局和外觀顯示樣式
注釋
/**/
快捷鍵ctrl+/
二、引入css樣式表
css書寫位置
2.1行內式（內聯樣式）
對當前行標簽起效
概念：
行內樣式
<標簽名 style=“屬性1:屬性值1；屬性2：屬性值2;”></標簽名>
例子
<h1 style="color:pink;font-size:18px;"></h1>2.2內部樣式表（內嵌樣式表）
對當前頁面起效
<head><style type="text/css">選擇器{屬性1：屬性值；屬性2：屬性值；} </head>例：
<head><style type="text/css">h2{color:green；font-size:20px;}h4{color:purple;font-size:10px;} </head>2.3外部樣式表（外鏈式）
概念：稱鏈入式
? 將所有樣式放在一個或多個css外部樣式表文件中
? 通過link標簽將外部樣式表鏈接到HTML文檔中
基本語法如下
<head><link rel="stylesheet" type="text/css" href="css文件url"/> </head>注意：css文件可以被多個html文件共享 type可省略
2.4三種樣式表總結
| 行內樣式 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 一個標簽 |
| 內部樣式 | 部分結構和樣式像分離 | 沒有徹底分離 | 較多 | 控制一個頁面 |
| 外部樣式 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點 |
2.5選擇器
1、選擇器作用
找到特定的HTML頁面元素，其實就是選擇標簽的
2、css常見基礎選擇器
1、標簽選擇器
? 以標簽名作為選擇器選擇對應標簽
? 可以把一類標簽全選中
2、類選擇器
<p class=""></p> .類名{屬性：屬性值； }可以選擇一個或多個class值相同的標簽
? 類選擇器的特殊用法
? 給標簽多個類名，方便標簽選擇多個樣式，同時避免了不同選擇器中相同樣式的重復
? 語法：
<span class="blue font100"></span>用空格隔開兩個類名
3、id選擇器
? id選擇器使用#標識后面緊跟id名
? 其基本語法格式如下
? id選擇器
#id{屬性：屬性值;}? 標簽
<p id="id名"></p>元素的id值是唯一的，只能對應域文檔的某一個具體的元素
用法與類選擇器基本相同
如同人可以重名也就是class，而id如同身份證對每個標簽是唯一的
4、通配符選擇器
*表示所有標簽
*{ 屬性：屬性值； }會降低頁面響應速度 不建議隨便使用
5、總結
| 標簽選擇器 | 可以選出所有相同的標簽 | 不能差異化選擇 | 較多 | p{color:red;} |
| 類選擇器 | 可以選出1個或者多個標簽 | 可以根據需求選擇 | 非常多 | .nav{color:red;} |
| id選擇器 | 一次只能選擇一個標簽 | 只能使用一次 | 不推薦使用 | #nav{color:red;} |
| 通配符選擇器 | 選擇所有標簽 | 選擇的太多，有部分不需要 | 不推薦使用 | *{color:red;} |
記憶：<標簽 類 id>
三、font字體樣式
1、font-size:大小
| em | 1em相當于當前對象的一個字體大小 |
| px | 像素 最常用推薦使用 |
不同瀏覽器默認的字體大小不一樣我們可以指定body的font-size=16px;
2、font-family:字體
設置字體種類
微軟雅黑、宋體、黑體等
p{font-size:Arial ,"Microsoft YaHei","黑體"; }以上同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體則會選擇后面合適的字體，否則以電腦默認字體
中文字體需要加引號，英文字體一般不需要加。
3、font-weight:字體粗細
①在html中如何將字體加粗我們可以使用b和strong標簽是文本加粗。
②可以使用css來實現，但css是沒有語義的
| normal | 默認值 |
| bold | 定義粗體 |
| 100~900 | 400等同于normal，而700等同于bold |
推薦使用數字
讓粗體不加粗：font-weight：normal；
或者 font-weight:400;
4、font-style字體風格
| italic | 傾斜 |
| normal | 默認標準字體樣式 |
設置normal使傾斜字體正過來
5、font字體綜合寫法
.title{/*font:font-style font-weight font-size【/line-height】 font-family;*/font:italic 700 20px "微軟雅黑"; }必須嚴格按照font綜合寫法的順序不能顛倒
必須保留weight和family屬性其余可以省略
6、字體總結
| font-style | italic|normal | 字體風格，傾斜或正常 |
| font-weight | normal|bold|100~900 | 字體粗細 |
| font-size | px或者em | 字體大小 |
| font-family | 字體名稱 | 字體種類 |
綜合寫法font:font-style font-weight font-size【/line-height】 font-family;
記憶：SWSF 上午十分
四、unicode字體
GB2312 UTF-8
每種字體都對應著一個unicode編碼，可以上網查詢以獲得其編碼
為什么用unicode？
在css中設置字體可以直接寫中文，但是文件編碼不匹配時會產生亂碼的錯誤，而且xp系統不支持類似微軟雅黑的中文。但是unicode編碼可以避免這些錯誤
五、css文本屬性
| color | 顏色 | 1、常用十六進制比如#fff 2、rgb值如RGB（255，0，0） 3、顏色名稱 如red |
| line-height | 控制行與行之間的距離 | 行間距包括上間距文本高度和下間距組成 |
| text-align | 文字水平對齊方式 | 1、justify每行被展開為寬度相等。左右外邊距對齊 2、right右對齊 3、center居中4、left左對齊 |
| text-indent | 首行縮進 | 常用于段落首行縮進2個字的距離 值為2em |
| text-decoration | 文本修飾 | 1、none用來刪除文本修飾 ，如刪除下劃線 2、underline下劃線 3、overline上劃線 |
六、chrome開發者工具
f12打開開發者工具
ctrl+0恢復瀏覽器大小
上箭頭和下箭頭改變px值
開發者工具中可以修改，但是不會改變原文件適合調試數值更加直觀
七、emmet語法
前身為zen coding 使用縮寫來提高html/css編寫速度 VScode已經集成該語法
emmet語法生成html標簽
1、生成標簽 輸入標簽名加tab鍵可以一鍵生成標簽
2、如果想生成多個相同標簽可以標簽名*4按tab生成4個
3、父子級關系可以用>比如ul>li 可以用ul>li*3生成三個li
4、并列關系可以用+ 比如div+p
5、.class名可以生成對應class名的div標簽
? #id名類似
? 當然可以用 標簽名.class可以生成任意標簽 #類似
6、.class名$*數量 可以生成自增符號的多個div標簽 $為自增符號
7、標簽名{文字內容}按tab可以生成div標簽并包含文字內容
emmet語法生成css樣式
1、tac生成text-align:center;
2、w2+tab生成width：2px;
等
快速格式化代碼
shift+alt+f
八、復合選擇器
復合選擇器建立在基礎選擇器之上
復合選擇器由多個基礎選擇器通過不同方式組合而成
1、后代選擇器（重要）
又稱為包含選擇器 可以選擇父元素里的子元素
例子：修改ol中li的樣式
ol li{color:pink; }語法：
元素1 元素2 { 屬性：屬性名}
元素2為元素1的后代
中間一定用空格隔開
元素3類似一層層下去
2、子選擇器（重要）
只能選擇最近的一級兒子元素
語法
元素1>元素2{
? 屬性：屬性值
}
元素1和2必然是父子關系
3、并集選擇器（重要）
可以選擇多組標簽定義相同樣式
語法：
元素1，元素2{屬性：屬性值 }用逗號分隔多個任何形式的選擇器
4、交集選擇器
選擇對應類名的元素
語法：
元素.class名{屬性：屬性值}
5、偽類選擇器
①鏈接偽類選擇器
| a:link | 選擇所有未被訪問的鏈接 |
| a:visited | 選擇所有已被訪問的鏈接 |
| a:hover | 選擇鼠標指針位于其上的鏈接 |
| a:active | 選擇活動鏈接（鼠標按下未彈起） |
順序盡量不要顛倒 按照lvha順序不然會出錯
記憶：lv包包非常hao
九、標簽顯示模式（重點）
1、標簽的三種顯示模式
什么是標簽的顯示模式？
標簽以什么方式進行顯示，比如div獨占一行 span則一行可放多個
分類：
HTML標簽一般分為塊標簽和行內標簽兩種類型，也稱為塊元素和行內元素
①塊級元素block
主要用于布局
例：h、p 、div、ul、ol、dl、li
1】獨占一行
2】高度寬度、內外邊距都可控制
3】寬度默認是容器的100%，可以用width設置
4】是一個容器及盒子、里面可以放行內或者塊級元素
注意：p內不能放塊級元素 特別是div
p h dt里面盡量不要放塊元素
background-color可以設置其背景色
②行內元素inline
主要用于包裹文字
1】一行可以有多個元素
2】高寬直接設置是無效的
3】默認寬度就是它本身內容的寬度
4】行內元素只能容納文本或其它行內元素
注意：
鏈接里不能再放鏈接a
特殊情況a里面也可以放塊級元素,但a最好轉為塊級元素
③行內塊元素inline-block
兼具塊元素和行內元素的特點
img input td
1】和相鄰行內元素（行內塊）在一行上，但是之間會有空白縫隙，一行可以顯示多個
2】默認寬度就是本身內容寬度
3】高度、行高、外邊距以及內邊距都可以控制
顯示模式總結
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設置寬度高度 | 它本身內容的寬度 | 容納文本或則其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設置寬度和高度 | 它本身內容的寬度 |
2、標簽模式的轉換
塊轉行內：display:inline；
行內轉塊：display:block;
塊、行轉為行內塊：display:inline-block
十、單行文本位置
行高和高度的關系
1、如果行高等于高度 文字會垂直居中
2、如果行高大于高度，文字會偏下
3、如果行高小于高度，文字會偏上
十一、css背景background
1、背景顏色
語法：background-color:顏色
transparent透明色
2、背景圖片
background-image：url(文件路徑);
3、背景平鋪
background-repeat:
值：
repeat：背景圖像在縱向和橫向平鋪 默認選項
no-repeat：不平鋪
repeat-x：橫向平鋪
repeat-y：縱向平鋪
4、背景位置（重點）
background-position:length或position
值：
length ：百分數或由浮點數和單位標識符組成的值
position：top|center|bottom|left|right組成
例如右上角為right top；左下角為left bottom；
水平垂直居中： center center
網頁中x軸往右 y軸往下
10px 50px 表示x=10px y=50px對背景圖進行精確調整
網頁超大背景圖定位的css
body{background-image:url(img.jpg);background-repeat:no-repeat;baacground-position:center top; }案例：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.icon {width: 150px;height: 35px;background-repeat: no-repeat;background-position: 10px center;}</style> </head><body><div class="icon"></div></body></html>5、背景附著
background-attachment:
值
scroll 背景隨對象內容滾動
fixed 背景圖像固定 有滾動條背景圖也不隨內容移動
6、背景簡寫
background屬性的順序比較隨意
可以參照以下順序寫，也可以調換順序
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置；7、背景透明
background:rgba(0,0,0,透明度)透明度在0-1之間 越小越透明 可以省略小數點前的0
8、總結
| background-color | 十六進制，rgb，名稱 | 背景色 |
| background-image | url(路徑) | 背景圖 |
| background-repeat | repeat ,no-repeat,repeat-x,repeat-y | 背景圖平鋪 |
| background-attachment | scroll|fixed | 背景附著 |
| background-position | top|bottom|center|right|left或者坐標值 第一參數為x第二參數為y | 背景圖定位 |
十二、css三大特性
1、css層疊性
所謂層疊性指的是后面相同樣式會覆蓋前面樣式。樣式不沖突就不會層疊（覆蓋）
沖突就近原則
2、css繼承性
子標簽會繼承父標簽的某些樣式、如文本顏色和字號
想要設置一個可繼承的屬性，只需將它應用于父元素即可
子元素可以繼承父元素的樣式：
text-、font-、line-這些元素開頭的可以繼承、以及color屬性
3、css優先級（重點）
1、權重計算公式
?
div{ color:red; } div{ color:pink; } div{ color:red; } .one{ color:pink;} one為div的class名以上為層疊性，采取就近原則
選擇器不同則會出現優先級
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0ZmiYYVU-1670653461116)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129113408086.png)]
!important符>>>行內style>id>class>標簽名>繼承
div{ color:pink !important; }!important添加在樣式后面；
2、權重疊加
交集選擇器、后代選擇器會出現權重疊加
.nav a 權重0,0,1,0+0,0,0,1=0,0,1,1
div ul li 權重0,0,0,1+0,0,0,1+0,0,0,1=0,0,0,3
誰大誰優先
0，0，0，5+0，0，0，5=0，0，0，10疊加不進位
相對子元素來說繼承的權重是0，無論繼承采取的是什么選擇器
十三、盒子模型
網頁布局本質
1、設置盒子
2、將元素放入盒子
1】盒子模型box model
盒子：裝內容的容器
div為最常用的盒子
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Ata3x978-1670653461117)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129115903163.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ux0JV4oV-1670653461117)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129120130974.png)]
2】border邊框
boder-color 定義顏色
boder-width 定義邊框粗細，單位px
boder-style 定義邊框樣式 默認none沒有邊框，常用dotted點線|dashed虛線|solid實線
邊框綜合設置
boder:border-width||boder-style||boder-color 這是常見的綜合寫法，但是其實沒有順序[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-HHjcgk08-1670653461117)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129120936123.png)]
input table等可以用border更好看
border-collapse:collapse;表示重疊邊框，解決邊框重疊變粗問題
table,td,th{border-collapse:collapse;boder:1px solid deeppink; }3】內邊距
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r52D1tDn-1670653461118)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129151545611.png)]
注意：內邊距會導致盒子對應尺度變大
padding簡寫
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gpbbKYxH-1670653461118)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129152012695.png)]
例：
padding:20px;/*內邊距20px*/ padding:10px 20px;/*上下10px左右20px*/ padding:10px 20px 30px;/*上10左右20下30*/ padding:10px 20px 30px 40px;/*上右下左順時針*/4】內盒尺寸計算
盒子實際大小=內容的寬度和高度+內邊距+邊框
解決辦法：
? 改變內容寬度
5】padding不影響盒子大小的特殊情況
1、盒子沒有寬度則padding不會撐開盒子（height一樣）
6】外邊距margin
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-tDkZ5wq1-1670653461119)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129154515193.png)]
使用方法和padding類似
7】塊級盒子水平居中
可以用于實現網頁大小無論如何都能使網頁主體居中
須滿足兩個條件
1、盒子必須指定寬度
2、左右外邊距設置為auto
法一、
margin-left:auto;
margin-right:auto;
法二、
margin:auto;
法三、
margin:0 auto;
8】盒子內文字居中和盒子居中區別
1、盒子內文字水平居中為text-align:center;
行內元素和行內塊元素也可以因此居中
9】插入圖片img和背景圖片background區別
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ruNTOMJS-1670653461119)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129155554653.png)]
img可以用padding調整位置
但是背景圖只能用background-position
10】清除默認內外邊距
瀏覽器會默認給元素一個內外邊距
為了方便布局一般都先設置以下代碼
*{ padding:0;/*清除內邊距*/ margin:0;/*清除外邊距*/ }行內元素最好只設置左右外邊距，不設置上下內外邊距
11】垂直外邊距合并現象
1、相鄰元素垂直外邊距合并
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-u1HC3gGp-1670653461119)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129160749089.png)]
2.塌陷（嵌套關系的垂直外邊距合并）
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NibM7NN0-1670653461120)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129161511464.png)]
12】盒子模型布局穩定性
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-5o34PDRE-1670653461120)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129161818604.png)]
13】ps基本操作及常用快捷鍵
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DLcW1NkP-1670653461120)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129162143996.png)]
14】圓角邊框
border-radius:像素值或百分比
圓：值為方框寬度一半或者直接設為50%
p{width:100px;height:20px;background-color:red;font-size:12px;color:#fff;text-align:center;line-height:20px;border-radius:10px; }矩形圓角邊框：只需要高度的一半就行，而且不能用百分比，要精確值+單位
15】盒子陰影
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kqUKA7PC-1670653461121)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129171321867.png)]
十四、浮動
1、css三種布局機制
1】普通流
? 塊級元素獨占一行，自上而下排列
? 行內元素從左到右順序排列，遇到父元素邊緣自動換行
2】浮動
? 讓盒子在普通流中浮起來，主要作用讓多個塊級盒子一行顯示
? 元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到指定位置
3】定位
將盒子定在瀏覽器的某一位置
2、浮動的作用
讓多個盒子（div）水平排列一行
行內塊也能實現，但是中間會有空白縫隙難以去除
最早是用于控制圖片，實現文字環繞圖片效果
3、浮動語法
選擇器{float:屬性值;}| none | 元素不浮動 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
4、浮動之浮
漂浮在普通流上面
5、浮動之漏
浮動的盒子會把自己原來的位置給下面普通標準的盒子，也就是漏給下面盒子
6、浮動之特
特性：float屬性會改變display屬性
變成行內塊元素 且浮動元素中間沒有縫隙，和真正的行內塊有些區別
當父級盒子裝不下一行內的盒子則右邊的盒子會自動到下一行，所以要重視寬度
7、浮動的應用
浮動和標準流的父盒子搭配
浮動是會脫標的，會影響下面的標準流盒子，因此我們一般將浮動盒子放在父盒子中
8、浮動元素和父盒子的關系
子元素浮動是參照父盒子來對齊的
不會超過父元素邊框也不會超過內邊距
9、浮動元素和兄弟盒子的關系
在一個父級盒子中，如果前一個兄弟盒子是：
1、浮動的，那么當前盒子會與前一個盒子的頂部對齊
2、普通流的，那么當前浮動盒子會顯示在前一個兄弟盒子的下側；
浮動盒子只會影響當前盒子或后面的盒子，不會影響前面的標準流
10、清除浮動（造成的影響）
很多情況下，父盒子設置高度不方便，子盒子浮動就不占有位置，最后父級盒子的高度為0，就影響了下面的標準盒子流
很多情況下，子盒子有多少內容就顯示多少自動撐開父盒子最合理
清除浮動不是真的把浮動效果清除了而是清除了浮動帶來的以上影響
1、浮動會影響布局
即影響下方標準盒子
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jmmbE1bP-1670653461121)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130154256390.png)]
2、清除浮動的本質
清除浮動主要是為了解決父級元素因為浮動引起的內部高度為0的問題。清除浮動之后父級就會根據子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流。
3、清除浮動的方法
1】clear語法：
clear:屬性值；[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-S9ArxQgO-1670653461122)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130154856127.png)]
工作中幾乎只用both
2】額外標簽法
在最后一個浮動元素末尾添加空標簽
<div class="clear" style="clear:both;"><div>3】父級添加overflow屬性方法
可以給父級元素添加overflow為hidden|auto|scroll都可以實現代碼簡潔，但是容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素怒。要慎重使用
4】使用after偽元素清除浮動
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VSdHnI2D-1670653461122)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130155947910.png)]
*zoom：1；ie6,7專門清除浮動的樣式
父級元素調用圖片中的樣式即可解決
4】雙偽元素清除浮動
.clearfix:before, .clearfix:after{content:"";display:table; } .clearfix:after{clear:both; } .clearfix{*zoom:1; }浮動元素的父級元素調用
清除浮動的情況
滿足下面三種情況需要清除
1、父級元素沒有高度
2、子盒子浮動
3、影響下面布局
十五、ps工具
1、ps切片工具
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-I2Xoa3pT-1670653461123)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130194932892.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-evXVrbL0-1670653461123)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130195009983.png)]
2、切圖插件cutterman
cutterman是運行在ps中的插件，能夠自動將你需要的圖層進行輸出，以替代傳統的手工導出web格式以及使用切片工具進行挨個切圖的繁瑣流程。它支持各種各樣的圖片尺寸、格式、形態輸出。
官網：http://www.cutterman.cn
需要ps為完整版現在需要付費了
案例：學成在線案例
1】準備
psd源文件
ps切圖+vscode+chrome
2、創建study文件夾
3、study內新建images、index.html首頁,style.css樣式文件
4、link鏈接樣式表，用清除內外邊距樣式測試是否成功
2】css書寫順序
1、布局屬性：display/position/float/clear/visibility/overflow
2、自身屬性
width/height/margin/padding/border/background
3、文本屬性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
4、其它屬性css3
content/cusor/boder-radius/box-shadow/text-shadow/background:linear-gradient等
3】布局流程
1、確定頁面的可視區（版心）
2、先行后列
3、先結構后樣式
4、運用盒子模型
4】頭部制作
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QlXnEJTt-1670653461123)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221201103323584.png)]
5】banner制作
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yTrGtfN2-1670653461124)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221201111855561.png)]
十六、定位
1、為什么要用定位
將盒子定在某一位置，自由的漂浮在其它盒子之上
2、定位
定位=定位模式+邊偏移
3、邊偏移
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-PJbWC1vy-1670653461124)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202120839126.png)]
4、定位模式position
選擇器{position:屬性值;}| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
5、靜態定位static-了解
-
元素默認定位方式，無定位的意思相當于none
-
按照標準流擺放位置，沒有邊偏移
-
布局基本不用
6、相對定位relative-重要
例：
div{position:relative;top:100px;left:100px; }相對定位：相對于原來在標準流的位置（即去掉定位屬性的位置）上進行偏移
特性：與浮動不同，它原先的位置繼續占有，后面的盒子仍然以原來標準流的方式對待他原先位置
7、絕對定位absolute-重要
絕對定位是元素以帶有定位的父級元素來移動位置
.father{width:350px;height:350px;background-color:pink;margin:100px;position:relative; } .son{width:200px;height:200px;background-color:purple;margin-left:100px;position:absolute;top:50px;left:50px; }特性：
1、完全脫標-完全不占位置
2、父級元素沒有定位，則以瀏覽器為準定位
.father{width:350px;height:350px;background-color:pink;margin:100px; } .son{width:200px;height:200px;background-color:purple;margin-left:100px;position:absolute;top:50px;left:50px; }注意：父級元素不一定是上一層的也可以是爺爺等祖先級
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-apYySXII-1670653461125)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202122935585.png)]
.yeye{width:500px;height:500px;background-color:skyblue;position:relative; } .father{width:350px;height:350px;background-color:pink;margin:100px; } .son{width:200px;height:200px;background-color:purple;margin-left:100px;position:absolute;top:50px;left:50px; }[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-tk3g4NhH-1670653461126)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202122919516.png)]
注意：絕對定位的盒子不占有位置
口訣：
子絕父相-子絕對定位，父相對定位
因為絕對定位不占有位置，父級用絕對定位就會引起頁面布局混亂
8、固定定位fixed-重要
固定定位是絕對定位的一種特殊形式
1、完全脫標–完全不占位置
2、只認瀏覽器的可視窗口–瀏覽器可視窗口+邊偏移 來設置元素的位置
- 跟父級元素沒有任何關系
- 不隨滾動條滾動
9、絕對定位的盒子居中
注意：絕對定位/固定定位的盒子不能通過設置margin設置水平居中
絕對定位時想要實現水平居中可以這樣設置：
1、left:50% 讓盒子的左側移動到父級元素的水平居中距離
2、margin-left:-60px;讓盒子向左移動自身寬度的一半
.son{width:120px;position:absolute;left:50%;margin-left:-60px; }垂直居中也同理
總結：相對靠自己，絕對靠父級，固定瀏覽器
10、堆疊順序
在使用定位布局時可能會出現盒子重疊的情況
遵循后來者居上的規則
z-index
此屬性可以改變盒子的堆疊順序
- 屬性值： 正整數、負整數或0，默認為0，數值越大，盒子越靠上
- 如果屬性值相同則按后來居上規則
- 數字后面不能加單位
注意：z-index只能用于相對定位、絕對定位和固定定位元素，其它標準流和浮動、靜態定位無效
11、定位改變display屬性
絕對定位和固定定位和浮動一樣改變為行內塊元素
行內塊不給寬度就是默認寬度，可以設置高寬
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Yj3AD4aS-1670653461126)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202140249327.png)]
十七、css高級技巧
1、元素的顯示與隱藏
目的：讓一個元素在頁面中消失但是不在文檔源代碼中刪除
1.1display顯示-重點
常用display，visibility使用較少
display:none 隱藏對象
特點：隱藏元素并不保留位置
block值除了轉為塊級對象外還有顯示元素的意思
1.2visibility可見性
| inherit | 繼承上一個父對象的可見性 |
| visible | 對象可視 |
| hidden | 對象隱藏 |
特點：可以隱藏元素，但是保留位置
1.3overflow溢出-重點
對超出的部分內容進行怎樣顯示
| visible | 超出部分正常顯示，不剪切內容也不添加滾動條**（默認）** |
| hidden | 不顯示超過對象尺寸的內容，超出的部分隱藏掉 |
| scroll | 不管超出內容否，總是顯示滾動條，一般不用不好看 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條，不好看一般不用 |
2、css用戶界面樣式
更改一些用戶操作樣式，以便提高更好的用戶體驗
2.1鼠標樣式cursor
| defualt | 默認 |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
2.2輪廓線outline
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QBFK3HNn-1670653461126)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202151251041.png)]
用于繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
outline:outline-color||outline-style||outline-width但是我們都不關心可以設置多少，我們平時都是去掉的
最直接的寫法是outline：0；或者outline:none;
常在css開頭初始化為outline：0；
因為輪廓線比較丑
2.3防止拖拽文本域resize
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CVjmRuTy-1670653461127)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202151200219.png)]
在實際開發中我們的文本域右下角是不可以拖拽的
<tecxtarea style="resize:none;"></tecxtarea>3、vertical-align垂直對齊
- 有寬度的塊級元素居中對齊，是margin：0 auto;
- 讓文字居中對齊，是text-align:center;
3.1vertical-align垂直對齊，只針對行內元素或者行內塊元素
vertical-align:baseline|top|middle|bottom[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sgt5qKEx-1670653461127)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202152044415.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-idpk1rLj-1670653461128)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202152137178.png)]
3.2去除圖片底側空白縫隙
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FjzXbjj7-1670653461128)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202152338152.png)]
原因:默認基線對齊
解決辦法：
img設置
vertical-align:bottom;或者middle、top等只要不基線對齊就行
或者給img添加display：block；轉為塊級元素就不會存在問題了
4、溢出文字省略號顯示
三部曲
/*1、先強制一行內顯示文本*/ white-space:nowrap; /*2、超出部分隱藏*/ overflow:hidden; /*3、文字用省略號替代超出部分*/ text-overflow:ellipsis;- white-space：normal默認處理方式|nowrap強制一行顯示直到文本結束或者遇到br才換行；
- text-overflow:clip不顯示省略標記，簡單裁剪|elipsis當對象內文本溢出時顯示省略標記;
5、css精靈技術sprite-重點
5.1為什么需要精靈技術
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Ke1lkhkw-1670653461129)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202153748345.png)]
為了有效的減少服務器接受和發送請求的次數，提高頁面加載速度
5.2精靈技術講解
實則將多長圖片整合到一張大圖
然而各個網頁元素通常只需要精靈圖中不同位置的某個小圖，需要精確定位到精靈圖中的某一小圖。
這樣只需要向服務器請求一次
background-position配合盒子尺寸來部分顯示大圖中的完整圖標
也就是用background-position定位到小圖的位置即可
5.3制作精靈圖-了解
將背景圖像整合到一張大圖
一般都是小的背景圖，不放插圖，且豎著排列擺放圖片，中間適當留有空隙
6、滑動門
為了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了css滑動門技術，它從新的角度構建了頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。
<a ><span></span></a>a設置左側背景
span設置右側背景
因為滑動塊左右推拉，更文字內容寬度有關所以設置為行內塊
a{display:inline-block;height:33px;background:url() norepeat;padding-left:15px;color:#fff; } a span{display:inline-block;height:33px;background:url() no-repeat right top; }總結
1、a設置背景左側，padding撐開合適寬度
2、span色湖之背景右側，padding撐開合適寬度，剩下由文字繼續撐開寬度
3、之所以a包含span就是因為整個導航都是可以點擊的
7、margin負值的運用
1】負邊距+定位：水平垂直居中
即前面提到的，一個絕對定位的盒子利用50%的父級盒子，然后往左走自己寬度的一半就可以實現水平居中，垂直居中同理
2】壓住盒子相鄰邊框
border:1px solid #ccc;
margin-left:-1px;
這樣兩個緊貼的相鄰邊框可以合并為一條也就不會顯得粗
缺點：后面的盒子會壓住前面的盒子邊框會導致前面邊框顯示不出，這時用hover就會有問題
解決缺點：利用相對定位，在hover時用相對定位可以把邊框到上層，若其它邊框元素也為相對定位，則可以再利用z-index解決
8、css三角形
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JroF7zil-1670653461129)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202165436738.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jqTcuAOs-1670653461129)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202165513240.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1kgLrDp4-1670653461130)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202165544322.png)]
9、網頁灰白色
html{
filter:grayscale(1);
}
rflow:hidden;
/3、文字用省略號替代超出部分/
text-overflow:ellipsis;
a設置左側背景
span設置右側背景
因為滑動塊左右推拉，更文字內容寬度有關所以設置為行內塊
a{display:inline-block;height:33px;background:url() norepeat;padding-left:15px;color:#fff; } a span{display:inline-block;height:33px;background:url() no-repeat right top; }總結
1、a設置背景左側，padding撐開合適寬度
2、span色湖之背景右側，padding撐開合適寬度，剩下由文字繼續撐開寬度
3、之所以a包含span就是因為整個導航都是可以點擊的
7、margin負值的運用
1】負邊距+定位：水平垂直居中
即前面提到的，一個絕對定位的盒子利用50%的父級盒子，然后往左走自己寬度的一半就可以實現水平居中，垂直居中同理
2】壓住盒子相鄰邊框
border:1px solid #ccc;
margin-left:-1px;
這樣兩個緊貼的相鄰邊框可以合并為一條也就不會顯得粗
缺點：后面的盒子會壓住前面的盒子邊框會導致前面邊框顯示不出，這時用hover就會有問題
解決缺點：利用相對定位，在hover時用相對定位可以把邊框到上層，若其它邊框元素也為相對定位，則可以再利用z-index解決
8、css三角形
[外鏈圖片轉存中…(img-JroF7zil-1670653461129)]
[外鏈圖片轉存中…(img-jqTcuAOs-1670653461129)]
[外鏈圖片轉存中…(img-1kgLrDp4-1670653461130)]
9、網頁灰白色
html{
filter:grayscale(1);
}
總結
- 上一篇： 身份证号升级
- 下一篇： 全国多省市推广盘扣脚手架，模架大咖怎么看