定义和用法

quotes 属性设置嵌套引用(embedded quotation)的引号类型。

可能的值

描述
none 规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。
string string string string

定义要使用的引号。

前两个值规定第一级引用嵌套,后两个值规定下一级引号嵌套。

inherit 规定应该从父元素继承 quotes 属性的值。

例子

<html lang="en">
<head>
<style type="text/css">
//quotes结合<q>标签使用
q:lang(en)//:lang选择器用于选取带有以指定值开头的 lang 属性的元素。
{
quotes: '"' '"' "'" "'"
}
</style>
</head>
<body> <p><q>This is a <q>big</q> quote.</q></p>
</body>
</html>

输出:

未使用quotes属性输出效果:

 quotes属性结合content:open-quote、close-quote属性使用:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ask {
quotes: '提问: "' '"';
}
.answer {
quotes: '回答: "' '"';
}
.ask:before,
.answer:before {
content: open-quote;
}
.ask:after,
.answer:after {
content: close-quote;
}
</style>
</head>
<body>
<p class="ask">你问我爱你有多深?</p>
<p class="answer">月亮代表我的心</p>
</body>
</html>

输出结果:

取消quotes属性使用

<head>
<meta charset="UTF-8">
<title>content生成技术</title>
<style type="text/css">
/*.ask {
quotes: '提问: "' '"';
}
.answer {
quotes: '回答: "' '"';
}*/
.ask:before,
.answer:before {
content: open-quote;
}
.ask:after,
.answer:after {
content: close-quote;
}
</style>
</head>
<body>
<p class="ask">你问我爱你有多深?</p>
<p class="answer">月亮代表我的心</p>
</body>

输出结果:

CSS中quotes属性以及content的open(close)-quotes属性的更多相关文章

  1. CSS中font-size、font-family、line-height顺序以及简写属性

    顺序: font-size       line-height       font-family body { font-size: 12px}; h1 { font: bold 200%/1.2 ...

  2. CSS中文本继承情况

    无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html   vertical-align:  垂直文本对齐   CSS中文本可以继承父级样式   体 ...

  3. CSS中content属性的妙用

    前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...

  4. 盘点CSS中可以和不可以继承的属性

    CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...

  5. css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

  6. css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

  7. css中伪元素before或after中content的特殊用法attr【转】

    [原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...

  8. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  9. css中的一些属性解析

    1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生            请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解 ...

随机推荐

  1. Codeforces 750E 线段树DP

    题意:给你一个字符串,有两种操作:1:把某个位置的字符改变.2:询问l到r的子串最少需要删除多少个字符,使得这个子串含有2017子序列,并且没有2016子序列? 思路:线段树上DP,我们设状态0, 1 ...

  2. hInstWtsapi32 = LoadLibrary("Wtsapi32.dll");

    https://www.cnblogs.com/beawesome/p/6473668.html 进程枚举 之类

  3. ps:不规则选区

    尽管我们学会了如何添加减去或是交叉选区,但选取出来的选区还是比较规则,不是矩形就是圆形,这样的形状很难胜任在实际制作中的需要.现在我们就要学习如何建立一个任意形状的选区.建立任意选区的工具是套索工具. ...

  4. ps:图像格式的选择

    从上面点阵与矢量两者的对比中,似乎矢量格式有优势,那为什么不都使用矢量格式呢? 这是因为矢量图像是基于线段的.因此它不适合记录色彩较为复杂的图像.如下图, 如果使用点阵方式来记录,只要按照顺序扫描并记 ...

  5. $[WC2018]$通道(虚树,边分练习)

    \([WC2018]\)通道(虚树,边分练习) 感受码题的快感 这段时间真的是忙忙忙忙忙,省选之前还是露个脸,免得以后没机会了. 但是我感觉我的博客真的没啥人看,虽然我挺想要有人看的,但是自己真的没啥 ...

  6. [CF846E]Chemistry in Berland题解

    这题乍一看是一道水树形DP(其实事实上它确实是树形DP),然后设f[i]表示第i个点所多余/需要的材料,然后我们愉快的列出了式子: if(f[v]<0) f[u] += f[v] * edges ...

  7. linux文件软链接操作

    cd /etc/alternatives ll php* lrwxrwxrwx 1 root root 15 Oct 23 15:24 php -> /usr/bin/php7.3* lrwxr ...

  8. 20180809-Java继承

    // A.java public class A{ private int i; protected int j; public void func(){ }} // B.javapublic cla ...

  9. Oracle dmp文件(表)导入与导出

    dmp文件是作为oracle导入和导出表使用的文件格式dmp文件导出dmp文件导出用的比较多的一般是三种,他们分别是:1.导出整个数据库实例下的所有数据2.导出指定用户的所有表3.导出指定表. 打开命 ...

  10. 学习日记4、datagrid多行删除

    1.前台展现单选框datagrid代码 $('#List').datagrid({ url: '@Url.Action("GetList")', width: $(window). ...