【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键
生活随笔
收集整理的這篇文章主要介紹了
【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
行間樣式、內部樣式和外鏈樣式
寫在style屬性中的樣式叫行間樣式
寫在style標記的樣式叫內部樣式
寫在css文件里的樣式叫外鏈樣式，需要link鏈入html文件
內部樣式和外鏈樣式需要用選擇器找到要設置樣式的元素
?
?選擇器
通配符選擇器：* 選中所有的元素
標記名選擇器：div 選中所有標記名為div的元素
類名選擇器：.d1 選中所有類名為d1的元素
id選擇器：#a 選中id值為a的唯一元素
?
偽類?
元素的一種狀態，激活時其css會生效
hover偽類：鼠標與元素發生接觸
active偽類：鼠標擊中元素觸發
?
樣式 ?
width：寬度
height：高度
transition：過渡動畫：樣式 運動曲線 動畫時長
?
開發者工具
?
?
在瀏覽器中按F12鍵或fn+F12，打開開發者工具，選擇元素，點擊對應元素，顯示對應樣式 ?
快捷鍵
?
/* width: 200px; */
/* w200px寬度的簡寫 */
/* h200px */
/* bgc背景顏色 */
/* fz20px字體大小簡寫 */
? ? <!-- 撤銷（ctrl+z）和重做（ctrl+y） -->
? ? <!-- div.box：創建一個class為box的div元素 -->
? ? <!-- div#div1：創建一個id為div1的div元素 -->
? ? <!-- div*5：創建5個div元素 -->
? ? <!-- div.box#div$*5：$代表遞增的意思 -->??
代碼展示：?
<!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><link rel="stylesheet" href=""><style>.day{background-color: hotpink;color: black;font-size: 70px;transition: all linear 0.5s;}.day:hover{width: 1000px;height: 100px;background-color: rgb(105, 255, 173);color: rgba(0, 0, 0, 0.315);font-size: 80px;}.week{background-color: hotpink;color: black;font-size: 70px;transition: all linear 0.5s;}.week:hover{width: 700px;height: 100px;background-color: rgb(105, 255, 173);color: rgba(0, 0, 0, 0.315);font-size: 80px;}.time{background-color: hotpink;color: black;font-size: 70px;transition: all linear 0.5s;}.time:hover{width: 700px;height: 100px;background-color: rgb(105, 255, 173);color: rgba(0, 0, 0, 0.315);font-size: 80px;}.time:active{width: 90px;background-color: greenyellow;color: brown;font-size: 90px;}</style> </head> <body><div class="day">今天是2022年1月25日</div><div class="week">星期二</div><div class="time">下午</div> </body> </html>?
總結
以上是生活随笔為你收集整理的【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我的检讨
- 下一篇： HTML做個無法拒絕的表白，女神都不會拒