[翻译]标记语言和样式手册 Chapter 13 为文字指定样式（3）
作者：zhaozy 来源：3user.com 发布时间：2008-02-15 16:08:00
标签：文字,样式,标记,css,手册
首字大写
首字大写在印刷界十分常见,这能为段落加上华丽而优雅的效果,而且不必用上图片就能办到这种效果,只用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制作的首字大写效果.
0
投稿猜你喜欢
- 单表的唯一查询用：distinct多表的唯一查询用：group bydistinct 查询多表时，left join 还有效，全连接无效，在
- 代码如下: function astro(birth) astro="" if birth=""
- 今天给大家讲的是ASP给图片加水印的知识ASP给图片加水印是需要组件的…常用的有aspjpeg和中国人自己开发的wsImage…前者有30天
本文主要介绍了python opencv 找出图像中的最大轮廓并填充，分享给大家，具体如下：import cv2import numpy a- 开发工具**Python版本：**3.6.4相关模块：scikit-learn模块；jieba模块；numpy模块；以及一些Python自带
- 前言上一篇介绍了服务端流式RPC，客户端发送请求到服务器，拿到一个流去读取返回的消息序列。 客户端读取返回的流的数据。本篇将介绍客户端流式R
- 首先，与其他语言不同，JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外，引擎自己也会为一些特殊的代码模式采取一些优化
- 大家在使用PyCharm的过程中，肯定会遇到各种各样的问题，其中一个问题就是很多第三方的包安装不了。在使用过程中，我对这种情况进行了总结，现
- Jupyter notebook 更改文件打开的默认路径第一步：修改图标- 找到 Jupyter notebook 桌面图标- 对着 Jup
- 本文实例为大家分享了python遍历文件目录、批量处理同类文件的具体代码，供大家参考，具体内容如下目录操作1、获取当前目录import os
- 这篇文章主要介绍了Python读取表格类型文件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 可以任意转载，但转载时必须标明原作者charlee、原始链接http://tech.idv2.com/2008/11/03/python-m
- 一、前言对很多人来说，将PDF转换为可编辑的文本是个刚需，却苦于没有简单的方法。发现 pdf 幻灯片，效果还不错。传统的讲座通常伴随有很多p
- 最近开始学习Python编程，遇到scatter函数，感觉里面的参数不知道什么意思于是查资料,最后总结如下：1、scatter函数原型2、其
- 我的世界小游戏使用方法：移动前进：W，后退：S，向左：A，向右：D，环顾四周:鼠标，跳起：空格键，切换飞行模式:Tab;选择建筑材料砖：1，
- 今天，跟大家聊聊gin框架中是如何实现分片输出的。主要分以下4点：分片输出的效果图gin实现分片传输代码http分片传输的基础：transf
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 本文实例讲述了Django中实现点击图片链接强制直接下载的方法。分享给大家供大家参考。具体分析如下：当用户点击图片连接时，默认为在浏览器中直
- 我就废话不多说了，大家还是直接看代码吧！a1 = raw_input("please input a number")a
- 网页广告 Banner 设计图文手册：采用以下要点来改善你的BANNER。广告并不便宜。 确信你的广告被第一时间读到。使用像这样的Sans
