html基础系列教程Ⅵ:美化段落文本Ⅱ

2016-01-29 11:44 15 1 收藏

html基础系列教程Ⅵ:美化段落文本Ⅱ,本系列教程主要介绍web标准知识,作者将从最基本的标签开始讲解,对初学网页制作的朋友有一定的帮助,如果您对此感兴趣请关注本系列教程,今天讲解:web标准知识——美化段落文本Ⅱ~~

【 tulaoshi.com - Html 】

上一节:美化段落文本Ⅰ

web标准知识美化段落文本Ⅱ

懒,可能是唯一解释为什么这么长时间才写这一篇的主要原因。不述详情,以此责心。

上一篇讲了如何美化段落的基本形式,通过段距、首行缩进、首行突出以及字体、大小、色彩等也作了简要的讲述。由于很多知道在一些已有的资料里已经有了,所以我这里就不多说了,主要还是要讲一些应用的技巧。今天要讲的内容是如何实现首字下沉,也就是我博客首页上的效果,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,但是在网页中不那么常见。那么如何实现呢?其实很简单,只有一句CSS就可以了。下面列出,不喜欢读很多文字的朋友可以就此句细细研究不用向下读了。

如果你觉得还不是很清楚,那么这里就细细讲述一下:

首先要在HTML中有一段自己的文本,是在<p</p中的也好,在其它块标签中都可以。给他个ID也好,class也好,直接的标签也可以,先找到这个选择符,这里假设一段文字的id为article,那么给这段的CSS一开始就写成

:first-letter 是个伪类,用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》

这里再细说语句中的一个个属性,首先我们要让这个字大于正文中的字,那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍,4倍,这个根据自己的需要来作修改。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

为什么要用em这个单位呢?因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小,如果设为一个具体的大小,那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了,但是字体不对,那么这里应增加字体与字体加粗

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

看过上一篇的朋友一定知道这样的写法是比较冗长的,有比较简单的简写方式。那么如何简写请根据上篇提示动手修改一下。我们发现这里还有一个line-heihgt:1.2em; 为什么要用这个?这是因为我们通常会给这段文字设置一个行高,而这个行高通常是超过1.5em的,那就是说这样的行高会使得首字离正文内容有点远,并且不好看,那么自然要给这个首字一点特别的对待,当然是1em还是1.1em都要根据自己的实际需要来修改调整。这里的数字不是一定的。

好了,到现在为此这个首字似乎还并没有打算下沉的意思,那么这里的关键点就是 float:left; 对的,就是左浮动。我们要知道,当一个对象被设为浮动属性之后,不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。

动手试试看,是不是已经看到首字下沉了?当然或许你看出来了,有点不那么整齐上面是不是多了一点出来?不用担心,用padding来设置一下让这个字顶部多点空间出来,让这个首字和第一行齐平。


当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下:
Selector : first-line { sRules }
Selector1 Selector2 : first-child { sRules }

来源:http://www.tulaoshi.com/n/20160129/1483154.html

延伸阅读
      用于艺术体文本编辑的许多选项都适用于段落文本的编辑,包括字体设置、应用粗 斜体、排列对齐、添加下划线等等。下面我们将介绍专用于段落文本编辑的一些选项。   单击 (减少缩进量)或 (增加缩进量)按钮,可以使选定的段落文本整段向左或向右缩进。 单击 ...
标签: Web开发
上一个教程中我们已经讲了如何在浏览器中输出文本,以及文本输出的格式,这个教程中我们将谈一谈文本输出的字体,如斜体、黑体字、下加一划线等等。在本教程的最后给出了一个文本标志的综合示例,希望读者能认真阅读。 1.pre/pre pre/pre标志对用来对文本进行预处理操作。 2.h1/h1……h6/h6 Html语言提供了一系列对文本中的标题进行操作的标...
基础护肤系列 初夏,每个女人都应该开始给自己选购基本的护肤常备物资。那如何选购护肤品系列呢? 1、洗面奶 一切从肌肤的清洁开始,洗面奶是最最基本的护肤必需品,洗面奶这个概念还根据不同的情况包括卸妆水、营养水等清洁型护肤品。环境污染的严重,每天我们的肌肤都要接触许多的灰尘和细菌,加上电子化时代使用电...
标签: Web开发
有一系列属性可以改变网页文字的大小和形状,概要如下: font-family 文字使用的字体,比如宋体,Times New Roman,Arial等等 这个属性必须详细制定,不能使用偏僻的字体,要使用安全字体(比如arial,verdana和times new roman和宋体),可以同时指定许多字体,只要使用逗号分开即可。这样的用意是,如果用户...
标签: Web开发
HTML的基本结构 超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。 HTML HEAD 头 部 信 息 /HEAD BODY 文 档 主 体, 正 文 部 分 /BODY /HTML 其中HTML在最外层, 表示这对标记间的内容是HTML文 档。我们还会看到一...

经验教程

952

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部