【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键
生活随笔
收集整理的这篇文章主要介绍了
【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
行间样式、内部样式和外链样式
写在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做個無法拒絕的表白，女神都不會拒