CSS中quotes属性以及content的open（close）-quotes属性
定义和用法
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属性的更多相关文章
- CSS中font-size、font-family、line-height顺序以及简写属性
顺序: font-size line-height font-family body { font-size: 12px}; h1 { font: bold 200%/1.2 ...
- CSS中文本继承情况
无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align: 垂直文本对齐 CSS中文本可以继承父级样式 体 ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- 盘点CSS中可以和不可以继承的属性
CSS中可以和不可以继承的属性 一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...
- css 中可以继承的属性
CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...
- css中可以继承的属性
声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性 一.无继承性的属性 1.display:规定元素应该 ...
- css中伪元素before或after中content的特殊用法attr【转】
[原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- css中的一些属性解析
1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生 请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解 ...
随机推荐
- Beats：如何创建一个定制的Elastic Beat
Beats作为Elastic Stack家族中重要的部分.它可以和方便地让我们把我们的数据发送到Elasticsearch或Logstash之中.如果我们想要生成自己的Beat,请使用GitHub的b ...
- JavaScript用在哪里
<script> 标签 在HTML,JavaScript代码必须插入<script> 和 </script>之间的. document.getElementById ...
- 包装CGFloat和用NSNumber初始化的区别？
@(CGFloat)和[NSNumber numberWith:CGFloat]的区别?
- Windows系统安装教程
身边很多朋友电脑系统因为这样那样的问题不能开机,需要重装系统,但是又不知道从何下手.很不建议去电脑店重装系统,因为电脑店用的操作系统很多都有捆绑软件和主页捆绑,对电脑体验影响很坏.这篇教程只是针对新手 ...
- php compact()函数 语法
php compact()函数 语法 作用:创建包含变量名和它们的值的数组.大理石构件哪家好 语法:compact(var1,var2...) 参数: 参数 描述 var1 必需.可以是带有变量名的字 ...
- 第四章 QML语法
4.1 语法基础 import QtQuick 2.6 import QtQuick.Window 2.2 Rectangle { width: 400 height: 400 color: &quo ...
- BZOJ 3879: SvT 虚树 + 后缀自动机
Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始 ...
- 【HDOJ6664】Andy and Maze（color coding）
题意:给定一张n点m边的无向带权图,问从任意结点出发,不能走已经经过的点,共经过k个点的最长路径的值 n,m<=1e4,k<=6 思路:color coding算法 考虑每次给每个点随机编 ...
- GIS网络分析
https://wenku.baidu.com/view/297ec6a90029bd64783e2cb2.html 缓冲区分析 点线面的数据分析 分布式存储与分析 并行计算 #分布式存储与并行计算# ...
- 关于Calendar和Reminder（日历和提醒）编程指南
Event Kit框架使你能访问用户的Calendar.app和Reminders.app信息.虽然这是两个不同的app,但是他们使用相同的框架处理数据.类似地,存储这些数据的数据库,被称为日历数据库 ...