1216 状态伪类、css优先级提权、字体和字体图标、盒模型常用属性

1. 状态伪类

<head>
    <style>
        /* 链接的四种状态，按照顺序执行 */
/* 默认状态，未点击 */
a:link {
    color: red;
}
/* 已访问状态 */
a:visited {
    color: red;
}
/* 鼠标悬停状态 */
a: hover{
    color: red;
}
/* 激活状态：当鼠标点击按下时 */
a:active {
    color: red;
}
/* ------------------------------------------- */
        input:read-only {
            background-color: yellow;
        }
        input:required {
            background-color: lightgreen;
        }
        input:disabled {
            background-color: #eee;
        }
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
    <a herf="#">点击链接</a>
   <form action="">
        <p>用户名:<input type="text" name="" value="admin" readonly autofocus></p>
        <p>邮箱:<input type="email" name="" value="" required></p>
        <p>密码:<input type="password" name="" value="123456" disabled></p>
        <p><button>提交</button></p>
    </form>
</body>

2.css提权

选择器优先级规则：

当选择器相同的时,与书写顺序有关,后面的样式覆盖前面的
当选择器不同时,与优先级相关,级别高的覆盖级别低
优先级排序：id > class > tag
!important: 不是选择器

权重计算公式:
[id选择器的数量, class选择器的数量, tag选择器的数量]

<style>
/* [0,0,1] */
h1 {
    color:red;
}
/* [0,0,2] */
div h1 {
    color:red;
}
/* [0,1,0] */
.b1 {
    color:red;
}
/* [0,2,0] */
.b1.b2 {
    color:red;
}
/* [1,0,0] */
#a1 {
    color:red;
}
/* [2,0,0] */
#a1#a2 {
    color:red;
}
/* [2,2,3] */
body div#a2.b2 h1#a1.b1 {
    color:red;
}
</style>
<body>
    <div id='a2' class='b2'>
        <h1 id='a1' class='b1'>hello world!</h1>
    </div>
</body>

3.字体和字体图标

步骤：

进入www.iconfont.cn阿里巴巴矢量图标网
下载图标素材
放入项目中，并引入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
       <link rel="stylesheet" href="icon-font/iconfont.css">
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('icon-font/iconfont.eot');
            src: url('icon-font/iconfont.eot?#iefix') format('embedded-opentype'),
                url('icon-font/iconfont.woff2') format('woff2'),
                url('icon-font/iconfont.woff') format('woff'),
                url('icon-font/iconfont.ttf') format('truetype'),
                url('icon-font/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 38px;
            color: skyblue;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .iconfont.icon-xiangmu {
            color: blue;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-xiangmu"></span>
</body>
</html>

演示结果

3.盒模型

盒模型：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

margin边距/外边距：指元素与相邻同级元素的距离
border边框：指元素显示边界
padding填充/内边距：指元素内容与边框的距离
内容：显示的文本和图像等

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型的属性缩写</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            box-sizing: border-box;
        }
        .box {
            /* 边框 */
            /* 每个边框可以设置三个属性: 宽度,样式,颜色 */
            /* border-top-width: 5px;
            border-top-color: red;
            border-top-style: solid; */
            /* border-top: 5px red solid; */
            border-top: rgb(255, 0, 255) solid 5px;
            border-bottom: 10px red dashed;
            border: 5px solid #000;
        }
        .box {
            /* 内边距 */
            /* padding: 上 右 下 左; 按顺时针方向*/
            padding: 5px 10px 15px 20px;
            /* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
            /* 将背景色裁切到到内容区 */
            background-clip: content-box;
            /* 当左右相等，而上下不相等，使用三值语法 */
            padding: 10px 20px 15px;
            /* 当左右相等，上下也相等，使用二值语法 */
            padding: 10px 30px;
            /* 如果四个方向全相等，使用单值语法 */
            padding: 10px;
            /* 总结,当使用三值和二值时,只需要记住第二个永远表示左右就可以了 */
        }
        .box {
            /* 外边距:控制多个盒子之间的排列间距 */
            /* 四值,顺时针,上右下左 */
            margin: 5px 8px 10px 15px;
            /* 三值,左右相等，上下不等 */
            margin: 10px 30px 15px;
            /* 二值,左右相等,上下也相等 */
            margin: 10px 15px;
            /* 单值,四个方向全相等 */
            margin: 8px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果演示：

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1208-插件安装和html标签

2020-12-10 14:44:40