本篇将介绍几个css小技巧，目录如下：

1. 自定义引用标签的符号
2. 重置所有标签样式
3. 禁止文本选择
4. 制作小三角形

自定义引用标签的符号

默认q标签引用符号是浏览器根据不同语言环境自动设置的，当然我们也可以使用quotes属性自定义符号，如下实例：

html：

  

    不乱于心，不困于情。不畏将来，不念过往。如此，安好
  
  

    听君一席话，胜读十年书
  
  

    理想的人物不仅要在物质需要的满足上,还要在精神旨趣的满足上得到表现
  
  

    学问是经验的积累,才能是刻苦的忍耐
  
  

css：

q{
  font-size: 30px; /*默认*/
}
div.q1 q{
  quotes:"#" "#";
}
div.q2 q {
  quotes: none; /*无符号*/
}
div.q3 q {
  quotes: "“" "?" "?" "?"; /*嵌套引用，第三、四符号用于嵌套q标签*/
}

效果如下：

重置所有标签样式

仅使用一个属性将所有样式重置为默认值。

• 使用该属性将所有样式（继承或不继承）重置为其默认值。
• 注意：这不会影响 direction 和 unicode-bidi 属性。

代码如下：

html：

  
Title
  

  《书·大禹谟》：“名言兹在兹，允出兹在兹，惟帝念功。”孔传：“名言此事，必在此义。”
  

css：

.reset-all-styles {
  all: initial;
}

禁止文本被选择

如果不想某些文字被选择，可以使用如下代码：

html：

你选不中我！

css：

.unselectable {
  user-select: none;
}

创建一个三角形

使用纯 CSS 创建一个三角形。

• 使用三个边框创建一个三角形。
• 所有边框都设置相同的 border-width。
• 三角形朝向的反方向border-color：color 设置颜色，其它方向的 border-color：transparent 设置透明。
• 更改border-width值将更改三角形的比例。

html:

上

右

下

左

css:

.triangle {
  width: 0;
  height: 0;
  border-style:solid;
  border-width:20px;
}
/*上*/
.up{
  border-color:transparent transparent #9C27B0 transparent;
}
/*右*/
.right{
  border-color:transparent #9C27B0 transparent transparent;
}
/*下*/
.down{
  border-color:transparent transparent #9C27B0;
}
/*左*/
.left{
  border-color:transparent transparent transparent #9C27B0;
}

热门文章推荐：

css中4种方法使内容居中

前端入门——css 盒子模型

前端入门——css颜色和背景

前端入门——css边框和圆角

前端入门——css 选择器

前端入门——css字体和文本