行间样式、内部样式和外链样式
写在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>?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
