【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键

本文链接：https://blog.youkuaiyun.com/yangdingyu/article/details/122685899

行间样式、内部样式和外链样式

写在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字体大小简写 */

代码展示：

<!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>