css小技巧

网页一键变灰

给body标签设置样式

取值0-1 //0就是不灰

grayscale灰度

style{
filter: grayscale(1);
}

content 属性 content设置文本 2伪元素

::after{

content: ' ' //即使没有内容，也必须写这个属性，不然无效

}

1.设置字体图标

1.下载 放项目目录中
2.引入
<link rel="stylesheet" type="text/css" href="./font/icomoon/style.css">
3.使用（当然也可以直接写在HTML标签中，这里我们写在CSS里
可以配合content用

字体图标使用

1.把fonts文件夹引入目录中

2.声明

```@font-face {`

font-family: 'icomoon';

src: url('fonts/icomoon.eot?namj4l');

src: url('fonts/icomoon.eot?namj4l#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf?namj4l') format('truetype'),

url('fonts/icomoon.woff?namj4l') format('woff'),

url('fonts/icomoon.svg?namj4l#icomoon') format('svg');

font-weight: normal;

font-style: normal;

font-display: block;

`}``

使用

div{

`font-family: 'icomoon';`

}
##### 2.与counter-increment:[name] 属性配合用   ==》实现文本排序
counter-increment属性设置某个选取器每次出现的计数器增量。默认增量是 1。

``` .main .container h2 {
  counter-increment: first-title;
  font-weight: 400;
  letter-spacing: 2px;
  color: #535353;
  margin-bottom: 15px;}  

  .main .container h2:before {
  content: counter(first-title, simp-chinese-informal) ".";

simp-chinese-informa 转为中文

  counter-increment: order;}
  .main .container ul li:before {
content:counter(order) ".";
  color: #535353;
  font-size: 20px;
  font-weight: bold;
}