一、阿里巴巴矢量图标库
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"></i>
<i class="iconfont"></i>
<i class="iconfont"></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选择器
-
:focus选择器
选择获得焦点的输入字段,并设置其样式。接收键盘事件或其他用户输入的元素都允许:focus选择器
input:focus{
background: pink
}
-
标签::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;