day12阿里矢量图标

一、阿里巴巴矢量图标库

1.在线使用方式

<link rel="stylesheet" href="http://at.alicdn.com/t/font_2703510_cdobiurozpu.css">

<i class="iconfont icon-zhifubao"></i>
<!-- 第一个iconfont是固定的 不能修改 第二个是你需要修改的类名 -->

2.离线方式

2.1 unicode方式

    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.woff2?t=1627372218660') format('woff2'),
                url('font/iconfont.woff?t=1627372218660') format('woff'),
                url('font/iconfont.ttf?t=1627372218660') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 30px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: pink;
        }
    </style>

    <!-- 习惯性的使用i标签引入阿里巴巴矢量图标库 -->
    <i class="iconfont">&#xe602;</i>
    <i class="iconfont">&#xe657;</i>
    <i class="iconfont">&#xe600;</i>

2.2 fontclass方式

与在线类似，只是路径换一下

2.3 symbol方式

<script src="font/iconfont.js"></script>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>

    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-meinv"></use>
    </svg>

二、选择器

1.属性选择器

​ 1.重要的选择器

​ 标签名称[attr] 只选中了属性

​ 标签名称[attr=“value”] 选中了属性和属性值

​ 2了解的选择器

​ 标签名称[attr ~=”value”] 包含都可以选中

​ 标签名称[attr ^=“value”] 选中属性,属性值也存在 以…开头的

​ 标签名称[attr $=“value”] 选中属性,属性值也存在 以…结尾的

​ 标签名称[attr *=“value”] 选中属性,属性值也存在 只要含有任意字符都可以被选择中

​ 标签名称[attr |=“value”] 选中属性,属性值也存在

​ - 选择到属性值的全部

​ - 要以value-xxx 开头才可以

2.结构选择器

1.当标签名称是一样的时候

​ - 标签名称的集合:first-child{} 集合下面的第一个

​ - 标签名称的集合:last-child{} 集合下面的最后一个

​ - 标签名称的集合:nth-child(序号){} 集合下面的第几个(从前往后)

​ - 标签名称的集合:nth-last-child(序号){} 集合下面的第几个(从后往前)

​ - n 选择全部(切记不要装杯)

​ - 2n/3n 公式

​ - odd/even 奇数/偶数

​ - 了解:标签名称:only-child{} 只有一个子级元素的时候被选择中

2.当标签名称是不一样的时候: 先筛选出相同的标签名称,再从集合中选择到想到的标签

​ - 标签名称的集合:first-of-type{} 集合下面的第一个

​ - 标签名称的集合:last-of-type{} 集合下面的最后一个

​ - 标签名称的集合:nth-of-type(序号){} 集合下面的第几个(从前往后)

​ - 标签名称的集合:nth-last-of-type(序号){} 集合下面的第几个(从后往前)

​ - 了解:标签名称:only-of-type{} 只有一个子级元素的时候被选择中

​ 有趣:

​ - X:root 表示选中根元素

​ - X:empty

​ 总结

​ - 当标签名称相同的时候 标签名称集合:nth-child(){}

​ - 当标签名称不一样的时候 标签名称集合:nth-of-type(){}

3.目标选择器

锚点链接

​ - 点击:

​ - 地址:

​ 目标选择器: 点击事件、改变谁就给谁添加目标选择器

​ - 语法 选择器:target

div:target{
            color: red;
            font-size: 30px;
        }

	<div id="box1">灯1</div>
    <a href="#box1">开关1</a>

    <div id="box2">灯2</div>
    <a href="#box2">开关2</a>

    <div id="box3">灯3</div>
    <a href="#box3">开关3</a>

4.ui选择器

1. :focus选择器

   选择获得焦点的输入字段，并设置其样式。接收键盘事件或其他用户输入的元素都允许:focus选择器

input:focus{
            background: pink
        }

2. 标签::selection

   使被选中的文本会成为改变样式

p::selection{
            background: green;
            color: red;
        }

3.input:disabled{}

4.input:checked{}

5.div:not(.box){}

5.层级选择器

1.子代选择器,表示在父级下面的所有都可以被选择中

ul li

2.> 表示只有直接子级被选中

ul>li

3+ 表示同级的下一个元素

4~表示同级的下面所有元素

div:hover~p{
            color: red
        }

<div>哥哥</div>
    <p>弟弟</p>
    <p>妹妹</p>

注意：通过这种方法，可以实现hover 同级控制同级

三、阴影属性

1.文本阴影

​ 属性:text-shadow

​ 属性值:常用的有4个

​ - 第一个属性值是水平方向

​ - 第二个属性值是垂直方向

​ - 第三个属性值是模糊程度

​ - 第四个属性值是颜色值

​ - 后面可以添加多个属性值 属性值需要用逗号隔开

2.盒子阴影

​ 属性:box-shadow

​ 属性值:常用的4个

​ - 第五个属性值 inset 向内的

 /* text-shadow: 20px 20px 2px green,10px -10px 2px red; */
            box-shadow: 20px 20px 2px red inset

四、单行、多行文本隐藏

1.单行文本隐藏

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis

2.多行文本隐藏

display: -webkit-box; /* 形成盒子布局 */
-webkit-line-clamp: 4; /* 省略号出现的行数 */
-webkit-box-orient: vertical; /* 垂直 */
overflow: hidden;