Css提权、字体图标、常用模型属性简写

伪类选择器 a链接状态匹配

顺序无法打乱，会无法显示

默认没有访问/点击
a：link
以访问过的状态
a:visited
鼠标悬停状态
a:hover
激活.当鼠标点击压下去的时候
a:active

<!DOCTYPE html>
<html>
    <head>
        <meta chaser="utf-8>
        <title>a链接状态匹配</title>
        <style>
            /*默认没有访问点击状态*/
            a:link{
                color:red;
            }
            /*访问过的状态*/
            a:visitde{
                color:#000;
            }
            /*鼠标悬停状态*/
            a:hover{
                color:red;
                width:20px;
            }
            /*点击按压下去的时候的状态*/
            a:active{
                color:#0f0f0f;
            }
        </style>
    </head>
    <body>
        <a href="https:www.baidu.com">百度一下</a>
    </body>
</html>

表单的选取方案

form p:first-of-type input：first-of-type
直接使用属性来获取如 input：required

<!DOCTYPE html>
<html>
    <head>
    <meta chaset="utf-8">
    <title>表单的选取方案</title>
    <style>
    /*使用 first-of-type 太过麻烦 一般不推荐*/
    form p:first-of-type inpyt:first-of-type{
        background-color:red;
    }
    /*使用input中的属性来直接获取*/
    input:required{
        background-color:blue;
    }
    </style>
    </head>
    <body>
        <form action="" method="">
            <p><input type="text" disabled></p>
            <p><input type="text" required></p>
        </form>
    </body>
</html>

优先级提权

浏览器自上而下来审查元素，所以优先级也是自上而下，当以级别时，最下面的会覆盖掉上一层的样式
id>class>标签
换算单位是【0(id).0(class).1(标签)】
@important 不是选择器它可以强制提权

<!DOCTYPE html>
<html>
    <head>
        <meta chaset="utf-8">
        <title>优先级的提权方式</title>
        <style>
            /*当只有标签时 会显示红色*/
            h2{
                color:red;
            }
            /*使用clss 属性时 会显示蓝色*/
            .on{
                color:blue;
            }
            /*使用id 时 会显示黑色*/
            #demo{
                color:#000;
            }
            /*当级别够高时 不会因为位置的影响而被覆盖*/
            /*不考虑id 时 这个会比 .on 级别高 根据换算方式【0，1，1】>[0,1,0]*/
            .on h2{
                color:#333;
            }
        </style>
    </head>
    <body>
        <h2 id="demo" class="on">优先级提权方式</h2>
    </body>
<html>

属性的简写

最常用的时是字体属性

应用	属性	属性值
字体	font-family	sans-serif
大小	font-size	20px
样式	font-style	itallic
加粗	font-weight	normal(数值：500)

简写方式 font: 样式加粗大小字体可以自定义字体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>font属性值的缩写</title>
        <style>
            /*平常使用时*/
            .demo{
                font-size:16px;
                font-family:sans-serif;
                font-style:itallic;
                font-weight:normal;
            }
            /*现在使用缩写形式*/
            .demo{
                font:itallic normal 20px sans-serif;
            }
        </style>
    </head>
    <body>
        <div class="demo">你好，中文网</div>
    </body>
</html>

使用阿里云矢量图标

1.下载阿里云矢量图标到本地
2.将文件移动到我们自己的样式文件夹中
3.引入文件
4.拷贝项目下面生成的font-face
@font-face {font-family: ‘iconfont’;
src: url(‘iconfont.eot’);
src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘iconfont.woff’) format(‘woff’),
url(‘iconfont.ttf’) format(‘truetype’),
url(‘iconfont.svg#iconfont’) format(‘svg’);
}
5.定义使用iconfont的样式
.iconfont{
font-family:”iconfont” !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
6.<i class="iconfont">3</i>
7.类的引用<i class="iconfont icon-xxx"></i>

盒模型的属性缩写

应用	属性	值
宽	width	200px
高	height	200px
背景颜色	background-color	red
上边框的宽	border-top-width	5px
上边框的颜色	border-top-color	blue
上边框的样式	border-top-style	solid

简写方式 border-top: 5px solid red; 属性值的顺序无关

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框属性的缩写</tltle>
        <style>
            /*边框的缩写形式*/
            .box{
                border:red 5px solid;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>