[翻译]标记语言和样式手册 Chapter 13 为文字指定样式(3)

作者:zhaozy 来源:3user.com 时间:2008-02-15 16:08:00 

首字大写

首字大写在印刷界十分常见,这能为段落加上华丽而优雅的效果,而且不必用上图片就能办到这种效果,只用CSS就够了.

首先,必须为标记源代码加上一个"样式锚点"让我们有办法调用第一段的第一个字母.我们将 "I" 用一组<span>标签包起来并给它指定class=drop,如果我们才能在页面或整个网站里重复使用首字大写效果.

<p><span class="drop">I</span>f you're painting with latex paints, and the job ...

在某些完全支持CSS2规范的现代浏览器中,我们可以用:first-letter伪类设定段落首字效果,而不必加上额外的<span>标签,虽然语义上非常棒,不幸的是许多浏览器都不支持这个效果.

现在我们能完全控制第一段的 "I" 字母了,让我们加上CSS声明,以便把字体放大,同时将它浮动到左侧(这样,其他的文字才不会包围它显示),我们也会加上装饰用的背景,边框.

.drop {
  float: left;
  font-size: 400%;
  line-height: 1em;
  margin: 4px 10px 10px 0;
  padding: 4px 10px;
  border: 2px solid #ccc;
  background: #eee;
  }

结合我们现在为示例内容加上的所有样式,图13-6是浏览器显示首字大写的效果,它完全没有用上图片,只靠简单的CSS与标记语法完成.


图13-6 用CSS制作的首字大写效果.

标签:文字,样式,标记,css,手册
0
投稿

猜你喜欢

  • python计算机视觉opencv矩形轮廓顶点位置确定

    2022-06-07 16:30:44
  • ASP防盗链及防下载的方法

    2007-09-19 12:22:00
  • SQL Server子查询的深入理解

    2024-01-15 14:09:46
  • python 中xpath爬虫实例详解

    2021-06-08 08:51:46
  • python判断元素是否存在的实例方法

    2021-02-24 23:20:08
  • python实现读取excel表格详解方法

    2023-03-12 04:48:37
  • PyQt Qt Designer工具的布局管理详解

    2023-09-21 04:44:17
  • 浅谈keras中的batch_dot,dot方法和TensorFlow的matmul

    2023-04-08 07:21:28
  • Python实现的简单线性回归算法实例分析

    2021-06-05 17:16:12
  • Python实现句子翻译功能

    2023-11-20 20:07:28
  • Python实战整活之聊天机器人

    2022-10-13 09:57:50
  • mysql共享锁与排他锁用法实例分析

    2024-01-20 15:15:26
  • Python画图实现同一结点多个柱状图的示例

    2021-04-21 23:26:04
  • python多进程使用apply_async的使用方法详解

    2022-11-14 16:08:50
  • 解决Python requests 报错方法集锦

    2023-05-05 20:21:27
  • OpenCV图像缩放resize各种插值方式的比较实现

    2023-03-18 13:31:45
  • 互联网产品设计师自我介绍

    2009-04-16 12:45:00
  • 使用PHP 5.0创建图形的巧妙方法

    2023-10-27 00:59:07
  • asp的分词技术

    2007-08-25 17:50:00
  • Go如何实现HTTP请求限流示例

    2023-07-21 00:40:27
  • asp之家 网络编程 m.aspxhome.com