行间样式、内部样式和外链样式
- 写在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>
