点击这里给我发消息 点击这里给我发消息

HTML 5与CSS 3权威指南:在字符串两边添加嵌套文字符号

添加时间:2013-12-6
    相关阅读: HTML CSS
 

20.3.7   在字符串两边添加嵌套文字符号

可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。

另外,在元素的样式中使用quotes属性来指定使用什么嵌套文字符号。

对于嵌套文字符号的添加功能,目前Firefox浏览器、Opera浏览器,Chrome浏览器与Safari浏览器均对其提供支持。

代码清单20-9为添加嵌套文字符号的一个示例,在该示例中有一个h1标题元素,文字为"标题",使用before选择器与after选择器在标题文字两边添加括号。

代码清单20-9   添加嵌套文字符号的示例

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>添加嵌套文字符号的示例</title>

  </head>

  <style type="text/css">

  h1:before{

  content: open-quote;

  }

  h1:after{

  content: close-quote;

  }

  h1{

  quotes:"(" ")";

  }

  </style>

  <body>

  <h1>标题</h1>

  </body>

  </html>

当需要添加双引号时,需要使用"\"转义字符,使用方法如下所示。

  h1{

  quotes:"\"" "\"";

  }

代码清单20-9的运行结果如图20-15所示。

图20-15   添加嵌套文字符号的示例

 

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册