行间样式、内部样式和外链样式
写在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.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |