您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 quotes

2019-3-28 13:48| 作者: admin| 查看: 473| 评论: 0|来自: 蚂蚁部落

quotes属性可能在实际项目中较少用到,因为它的功能并不是不可替代。

当然也不能太绝对,也许在某些功能中能够起到比较好的效果。

下面通过代码实例介绍一下它的用法,首先从其名字入手。

quote翻译成汉语具有"引号"的意思,引号都是成对出现的,用于包裹指定内容。

名副其实,此属性可以用于定义元素内使用的嵌套标记,所谓嵌套标记就是我们所说的"引号"。

这个引号是广义的,并不仅仅指通常意义上的单引号或者双引号,后面会有代码演示。

语法结构:

[CSS] 纯文本查看 复制代码
quotes:none | [<string> <string>]

参数解析:

(1).none:当属性值为none的时候,不会生成任何标记。

(2).<string>:规定嵌套标记,两个为一组,组之间用空格隔开,可以有多个组。

特别说明:每一个嵌套标记用引号包裹,嵌套标记必须成对的出现。

此属性通常与content属性配合使用,还有一些细节后面会通过实例展示。

浏览器支持:

(1).IE8+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
li{list-style:none}
li > q{quotes:"'" "'"} 
</style> 
</head>
<body> 
<ul> 
  <li><q>蚂蚁部落</q></li> 
</ul> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/134939m0vf3zxzcvnfzuox.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).字符串用<q>标签包裹,这个很重要,当前如果换做其他标签不会有任何效果。

(2).目的是使用单引号包裹字符串,所以将前后单引号分别使用双引号包裹,之间用空格分隔。

(3).如果想用双引号包裹字符串,那么可以用单引号分别包裹双引号,大家可以自行演示。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
li{list-style:none}
li > q{quotes:"[" "]" '<' '>'} 
</style> 
</head> 
<body> 
<ul> 
<li><q>蚂蚁部落<q>青岛市南区</q></q></li> 
</ul> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/135003wl5zzdyayhxhp5c0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).包裹字符串的标记比一定非要是单引号或者双引号也可以是其他字符。

(2).可以一次定义多组标记,组与组之间使用空格分隔。

(3).多组标记之间会形成嵌套关系,从上述代码的表现可以很清晰的观察到。

特别说明:上述两个代码中,quotes属性只会对<q>标签有效,其他标签没有任何效果。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
li{list-style:none}
li > span{quotes:"'" "'"} 
</style> 
</head>
<body> 
<ul> 
  <li><span>蚂蚁部落</span></li> 
</ul> 
</body> 
</html>

上面代码就不截图了,没有嵌套效果,这时候,可以使用content属性解决此问题。

content属性非常强大,CSS中很多效果都要借助于它,更多内容参阅CSS content 属性一章节。

它有两个属性值与quotes属性相关,分别是open-quote和close-quote,分别对应quotes规定标记的起始标记与闭合标记。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
li{list-style:none}
li > span{quotes:"'" "'"} 
li > span:before { content: open-quote; }
li > span:after { content: close-quote; }
</style> 
</head>
<body> 
<ul> 
  <li><span>蚂蚁部落</span></li> 
</ul> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/135059afo4c8oogrgzido8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到字符串又一次被单引号包裹。

通过利用conent属性可以让quotes属性更加强大灵活,虽说实际应用中出现相对较少。

难保在某些时候会发挥奇效,多学点知识没有任何坏处只有好处,大厦是由千万块砖头垒砌。

看起来每一块砖都很渺小,但是谁知道关键时刻那块砖会起到决定性作用,不要轻视任何知识点。


鲜花

握手

雷人

路过

鸡蛋
上一篇:display:flex 弹性布局下一篇:CSS flex

最新评论

返回顶部