css-20201217css03(伪类选择器状态、css优先级，css背景图片，盒子模型初步） -

伪类状态与选择器优先级

一般状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器：状态匹配</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <a href="https://www.php.cn/">php中文网</a>
</body>
</html>

01 默认状态


a:link {
    color: aqua;
    text-decoration: none;
}

02已访问状态

a:link {
    color: aqua;
    text-decoration: none;
}
a:visited{
    color: bisque;
}

03悬停状态

a:link {
    color: aqua;
    text-decoration: none;
}
a:hover{
    color: hsl(0, 75%, 49%);
    text-decoration: underline;
}

04 激活状态

a:link {
    color: aqua;
    text-decoration: none;
}
a:active{
    color: blue;
}

选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <h2>hello</h2>
</body>
</html>

选择器相同，与顺序有管

h2 {
    color: #d3d62b;
}
h2 {color: rgb(25, 211, 25);
}

类选择器大于标签选择器(id>class>tag)

h2 {
    color: #d3d62b;
}
h2 {color: rgb(25, 211, 25);
}
.on {
    color: rgb(228, 40, 65);
}

css优先级

[id,css,tag]

h2 {
    color: #d3d62b;
}
body h2 {color: rgb(25, 211, 25);
}
html body h2 {
    color: rgb(228, 40, 65);
}

/* [0,1,0] */
.on {
    color: #d3d62b;
}
/* [0.1,1] */
h2.on {color: rgb(25, 211, 25);
}
/* [0,0,3] */
html body h2 {
    color: rgb(228, 40, 65);
}

字体属性

/* 属性写法 */
.on {
    font-family: sans-serif;
    font-size: 26px;
}
/* 简写 */
h2.on {
    font:  italic lighter 36px sans-serif;
}

导入图片

body {
    background-color: cornflowerblue;
    background-image:url('https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png') ;
    /* 图片不重复 */
    background-repeat: no-repeat;
    /* 图片尺寸 */
    background-size: 300px;
    /* 图片位置 */
    background-position: top;
}

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 盒子尺寸 */
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            box-sizing: border-box;
        }
        .box {
            /* 边框 */
            border-top: crimson solid 10px;
            /* 边距 */
            border: cyan solid 10px;
            /* 内边距 */
            padding: 10px;
            /* 外边距 */
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>