web标准知识——美化段落文本 Ⅱ
作者:振之 来源:毅博客 发布时间:2008-07-22 12:12:00
阅读上一节:美化段落文本 Ⅰ
web标准知识——美化段落文本 Ⅱ
懒,可能是唯一解释为什么这么长时间才写这一篇的主要原因。不述详情,以此责心。
上一篇讲了如何美化段落的基本形式,通过段距、首行缩进、首行突出以及字体、大小、色彩等也作了简要的讲述。由于很多知道在一些已有的资料里已经有了,所以我这里就不多说了,主要还是要讲一些应用的技巧。今天要讲的内容是如何实现“首字下沉”,也就是我博客首页上的效果,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,但是在网页中不那么常见。那么如何实现呢?其实很简单,只有一句CSS就可以了。下面列出,不喜欢读很多文字的朋友可以就此句细细研究不用向下读了。
Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}
如果你觉得还不是很清楚,那么这里就细细讲述一下:
首先要在HTML中有一段自己的文本,是在<p></p>中的也好,在其它块标签中都可以。给他个ID也好,class也好,直接的标签也可以,先找到这个选择符,这里假设一段文字的id为article,那么给这段的CSS一开始就写成
#article:first-letter {……}
:first-letter 是个伪类,用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》
这里再细说语句中的一个个属性,首先我们要让这个字大于正文中的字,那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍,4倍,这个根据自己的需要来作修改。
#article:first-letter { font-size:2.5em }
为什么要用em这个标签呢?因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小,如果设为一个具体的大小,那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了,但是字体不对,那么这里应增加字体与字体加粗
#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; }
看过上一篇的朋友一定知道这样的写法是比较冗长的,有比较简单的简写方式。那么如何简写请根据上篇提示动手修改一下。我们发现这里还有一个line-heihgt:1.2em; 为什么要用这个?这是因为我们通常会给这段文字设置一个行高,而这个行高通常是超过1.5em的,那就是说这样的行高会使得首字离正文内容有点远,并且不好看,那么自然要给这个首字一点特别的对待,当然是1em还是1.1em都要根据自己的实际需要来修改调整。这里的数字不是一定的。
好了,到现在为此这个首字似乎还并没有打算下沉的意思,那么这里的关键点就是 float:left; 对的,就是左浮动。我们要知道,当一个对象被设为浮动属性之后,不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。
#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; }
动手试试看,是不是已经看到首字下沉了?当然或许你看出来了,有点不那么整齐上面是不是多了一点出来?不用担心,用padding来设置一下让这个字顶部多点空间出来,让这个首字和第一行齐平。
最后我还能说点什么?我想到了,有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。
当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下:
Selector : first-line { sRules }
Selector1 Selector2 : first-child { sRules }
猜你喜欢
- <?php function getDerivativeByFormulaAndXDATA($formula, $x_data){ $
- 介绍UliPad是一个国人开发的python轻量级编辑器,导向和灵活的编程器。它如类浏览器,代码自动完成许多功能,如:HTML查看器,目录浏
- 代码如下:--获取当前时间 Select getdate() --获取当前年月日 YY代表年,MM代表月,DD代表日,hh代表时
- 如下所示:#! usr/bin/python#coding=utf-8 import numpy as npimport matplotli
- 头疼的挂马事件申请了个免费空间弄了个小站空间还可以二年多了挺稳定的只是从今年年初开始网页老莫名奇妙的被人挂马仔细检查了网站 不存在什么漏洞应
- 如果你经常浏览网页一定见过很多网站在form表单中的文本域(textarea)中添加了的背景图片,一般是使用网站的logo,我记得我最早注意
- 可视化对于大家来说确实是有关的,因为确实是直观的,每一组大数据如果可以用可视化进行展示的话可以让大家豁然开朗。但在另外一些场景中,辅之以少量
- 异常详细信息: System.Web.HttpException: 无法向会话状态服务器发出会话状态请求。请确保已启动 ASP.NET St
- MySQL分页分析原理及提高效率PERCONA PERFORMANCE CONFERENCE 2009上,来自雅虎的几位工程师带来了一篇”E
- 问:假如我的一个表里含有(a,b,c,d)和(a,b)形成组合键。我能在列值中写这个查询吗?例如: select a,c,d from my
- 01、介绍在 Golang 语言项目开发中,变量操作不当就会触发空指针引发程序 panic。空指针就是未分配内存的指针类型的变量,变量的值是
- 前言: 在刚解决jupyter notebook打不开网页的问题后,我迫不及待地写了P
- SQL Server数据库查询速度慢的原因有很多,常见的有以下几种:1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)
- 在pytorch的CNN代码中经常会看到x.view(x.size(0), -1)首先,在pytorch中的view()函数就是用来改变te
- 导语:哈喽,哈喽~小编不知道你有没有经历过,想联系一位很长时间没有联系的朋友,发现对方很早以前已经把你删除了,而你还一无所知。反正小编经历过
- 网页路径问题可以说是在页面设计或程序中比较典型的问题,处理得不好会给你的带来很大的麻烦,如何才能彻底解决路径问题呢!asp之家为你特别准备了
- 本文实例讲述了vue组件定义,全局、局部组件,配合模板及动态组件功能。分享给大家供大家参考,具体如下:一、定义一个组件定义一个组件:1. 全
- 前言对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会
- 客户端从服务端下载文件的流程分析: 浏览器发送一个请求,请求访问服务器中的某个网页(如:down.php),该网页的代码如下。 服务器接受到
- 本文实例讲述了Python计算已经过去多少个周末的方法。分享给大家供大家参考。具体如下:def weekends_between(d1,d2