web前端入门学习 css（2）
生活随笔
收集整理的這篇文章主要介紹了
web前端入门学习 css（2）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver
文章目錄
- css引入方式總結
- 綜合案例：新聞頁面
- chrome調試工具的使用
- Emmet語法（快速生成class、id等）
- Emmet語法（快速生成css樣式）
- vscode快速格式化文檔（alt+shift+f）如何設置保存時自動格式化代碼？
- 復合選擇器（更方便選擇元素進行修改）
- 后代選擇器（重要）（后級包含的全選）
- 子選擇器（親兒子選擇器）（只選擇后一級）（重要）
- 并集選擇器（重要）（快速選擇多組標簽修改樣式）
- 鏈接偽類選擇器a:link a:visited a:hover a:active（就是鼠標經過改變顏色，或者點擊過改變顏色之類的）
- 鏈接偽類選擇器注意事項（必須按照lvha【愛恨】順序）（鏈接不能被其外部包裹改變樣式，需要單獨指定）
- focus偽類選擇器（把獲得光標的input表單元素選擇出來）
- css復合選擇器總結（紅色為重點）
- 元素顯示模式（什么是塊元素和行內元素？）
- 塊級元素（h1-h6 p div ul ol li等）
- 行內元素 a strong b em i del s ins u span
- 行內塊元素（既具有行內塊元素特點，也具有行內元素特點）
- css元素的顯示模式總結（塊級元素、行內元素、行內塊元素）
- 行內元素、塊級元素、行內塊元素相互轉換
- 行內元素轉換為塊級元素（增加選擇或點擊范圍）、塊級元素轉換成行內元素（display:block;）(display:inline;)
- 將塊級元素轉換成行內塊元素（既能行內顯示，又能改變寬高）（display:inline-block）
- 將行內元素轉換成行內塊元素
- snipaste前端開發工具的使用
- 簡單小米側邊欄制作
- 如何讓文字垂直居中
css引入方式總結
綜合案例：新聞頁面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {font: 16px/28px 'Microsoft YaHei';}h1 {/* 文字不加粗 */font-weight: 400; /* 讓h1里面的文字水平居中對齊 */text-align: center;}a {text-decoration: none;}.gray {color: #888888;font-size: 12px;text-align: center;}.search {color: #666;/* #666666 #666#ff00ff #f0f */width: 170px;}.btn {font-weight: 700;}p {/* 首行縮進2個字的距離 */text-indent: 2em;}.pic {/* 想要圖片居中對齊,則是讓它的父親 p標簽添加 水平居中的代碼 */text-align: center;}.footer {color: #888888;font-size: 12px;}</style> </head> <body><h1> 北方高溫明日達鼎盛 京津冀多地地表溫度將超60℃</h1><div class="gray"> 2019-07-03 16:31:47 來源: <a href="#">中國天氣網</a> <input type="text" value="請輸入查詢條件..." class="search"> <button class="btn">搜索</button></div><hr> <p>中國天氣網訊 今天（3日），華北、黃淮多地出現高溫天氣，截至下午2點，北京、天津、鄭州等地氣溫突破35℃。預報顯示，今后三天（3-5日），這一帶的高溫天氣將繼續發酵，高溫范圍以及強度將在4日達到鼎盛，預計北京、天津、石家莊、濟南等地明天的最高氣溫有望突破38℃，其中北京和石家莊的最高氣溫還有望創今年以來的新高。</p><h4>氣溫41.4℃！地溫66.5！北京強勢迎七月首個高溫日</h4><p class="pic"><img src="images/pic.jpeg" alt=""></p><p>今天，華北、黃淮一帶的高溫持續發酵，截至今天下午2點，陜西北部、山西西南部、河北南部、北京、天津、山東西部、河南北部最高氣溫已普遍超過35℃。大城市中，北京、天津、鄭州均迎來高溫日。</p><p>在陽光暴曬下，地表溫度也逐漸走高。今天下午2點，華北黃淮大部地區的地表溫度都在50℃以上，部分地區地表溫度甚至超過60℃。其中，河北衡水地表溫度高達68.3℃，天津站和北京站附近的地表溫度分別高達66.6℃和66.5℃。</p><h4>明日熱度再升級！京津冀攜手沖擊38℃+</h4><p>中國天氣網氣象分析師王偉躍介紹，明天（4日），華北、黃淮地區35℃以上的高溫天氣還將繼續升級，并進入鼎盛階段，高溫強度和范圍都將發展到最強。 明天，北京南部、天津大部、河北中部和南部、山東中部和西部、山西南部局地、河南北部、東北部分地區的最高氣溫都將達到或超過35℃。</p><p> 不過，專家提醒，濟南被雨水天氣完美繞開，因此未來一周，當地的高溫還會天天上崗。在此提醒當地居民注意防暑降溫，防范持續高溫帶來的各種不利影響。（文/張慧 數據支持/王偉躍 胡嘯 審核/劉文靜 張方麗）</p><p class="footer"> 本文來源：中國天氣網 責任編輯：劉京_NO5631</p> </body> </html>chrome調試工具的使用
Emmet語法（快速生成class、id等）
例：
結果：
<body><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </body>例：
<body>ul>li </body>結果：
<body><ul><li></li></ul> </body>例：
<body>div>span </body>結果：
<body><div><span></span></div> </body>例：
<body>div+p </body>結果：
<body><div></div><p></p> </body>例：（生成class）
<body>.nav </body>結果：（默認生成div）
<body><div class="nav"></div> </body>例：
<body>p.nav </body>結果：（點前面加標簽名就能生成指定標簽的樣式）
<body><p class="nav"></p> </body>例：
<body>#two </body>結果：
<body><div id="two"></div> </body>例：
<body>p#two </body>結果：
<body><p id="two"></p> </body>例：（批量生成，自增符號$）
<body>.demo$*5 </body>結果：
<body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div> </body>例：
<body>div{我不喜歡男人}*5 </body>結果：
<body><div>我不喜歡男人</div><div>我不喜歡男人</div><div>我不喜歡男人</div><div>我不喜歡男人</div><div>我不喜歡男人</div> </body>Emmet語法（快速生成css樣式）
大概就是這個樣子，輸入首字母就行了
vscode快速格式化文檔（alt+shift+f）如何設置保存時自動格式化代碼？
挺好的，誰用誰知道，就不上圖了
或者可以這樣（點上?就好了）
復合選擇器（更方便選擇元素進行修改）
后代選擇器（重要）（后級包含的全選）
例：
例：
例：
結果：
子選擇器（親兒子選擇器）（只選擇后一級）（重要）
并集選擇器（重要）（快速選擇多組標簽修改樣式）
鏈接偽類選擇器a:link a:visited a:hover a:active（就是鼠標經過改變顏色，或者點擊過改變顏色之類的）
鏈接偽類選擇器注意事項（必須按照lvha【愛恨】順序）（鏈接不能被其外部包裹改變樣式，需要單獨指定）
https://www.bilibili.com/video/BV1pE411q7FU?p=102&spm_id_from=pageDriver
focus偽類選擇器（把獲得光標的input表單元素選擇出來）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>input:focus {background-color: rgb(235, 136, 8);color: red;}</style> </head><body><input type="text"><input type="text"><input type="text"> </body></html>css復合選擇器總結（紅色為重點）
元素顯示模式（什么是塊元素和行內元素？）
塊級元素（h1-h6 p div ul ol li等）
行內元素 a strong b em i del s ins u span
行內塊元素（既具有行內塊元素特點，也具有行內元素特點）
css元素的顯示模式總結（塊級元素、行內元素、行內塊元素）
行內元素、塊級元素、行內塊元素相互轉換
行內元素轉換為塊級元素（增加選擇或點擊范圍）、塊級元素轉換成行內元素（display:block;）(display:inline;)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a {color: red;width: 500px;height: 80px;background-color: rgb(140, 20, 219);display: block;}div {/* 將塊級元素div修改成行內元素后，寬高設置就失效了，因為行內元素無法修改寬高 */width: 100px;height: 300px;background-color: seagreen;display: inline;}</style> </head><body><a href="#">星際穿越</a><hr><div>我是天線寶寶</div><div>我是天線寶寶</div> </body></html>將塊級元素轉換成行內塊元素（既能行內顯示，又能改變寬高）（display:inline-block）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {/* 將塊級元素div修改成行內元素后，寬高設置就失效了，因為行內元素無法修改寬高 */width: 100px;height: 300px;background-color: seagreen;display: inline-block;}</style> </head><body><div>我是天線寶寶</div><div>我是天線寶寶</div> </body></html>將行內元素轉換成行內塊元素
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>span {width: 200px;height: 200px;background-color: rgb(236, 236, 5);display: inline-block;}</style> </head><body><span>我是鎧甲勇士</span><span>我是鎧甲勇士</span> </body></html>snipaste前端開發工具的使用
簡單小米側邊欄制作
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>簡單版小米側邊欄</title><style>/* 1. 把a轉換為塊級元素 */a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;line-height: 40px;}/* 2 鼠標經過鏈接變換背景顏色 */a:hover {background-color: #ff6700;}</style> </head><body><a href="#">手機 電話卡</a><a href="#">電視 盒子</a><a href="#">筆記本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 兒童</a><a href="#">耳機 音響</a> </body></html>如何讓文字垂直居中
https://www.bilibili.com/video/BV1pE411q7FU?p=114&spm_id_from=pageDriver
總結
以上是生活随笔為你收集整理的web前端入门学习 css（2）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vscode 如何实时显示html文件？
- 下一篇： web前端入门学习 css（3）（背景相