设计网页正文样式-盈岚科技

设计网页正文样式

2019-08-02 12:45:35
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

本例着重介绍在网页设计时对正文文本样式的设置，并进一步制作网页时讲述CSS文字和段落的排版方法。

【操作步骤】

第1步，构建网页结构。

使用<h1>标签定义文章的标题，同时增加了3个<p>标签，添加段落文本。

<p>盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>

<p>桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。花下成千成百的蜜蜂嗡嗡的闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛像星星，还眨呀眨的。“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你，风里带着些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴的卖弄清脆的歌喉，唱出婉转的曲子，跟清风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮的响着。雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑着伞慢慢走着的人，地里还有工作的农民，披着蓑戴着笠。他们的房屋稀稀疏疏的，在雨里静默着。天上的风筝渐渐多了，地上的孩子也多了。城里乡下，家家户户，老老小小，也赶趟似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事儿去。“一年之计在于春”，刚起头儿，有的是功夫，有的是希望。春天像刚落地的娃娃，从头到脚都是新的，它生长着。</p>

<p>春天像小姑娘，花枝招展的，笑着走着。</p>

<p>春天像健壮的青年，有铁一般的胳膊和腰脚，领着我们向前去。</p>

此时的显示效果极其简单，仅仅是简单的文字和标题。

第2步，定义网页基本属性、标题属性，与上一节示例基本相同。

body {

margin:20px; /*边界*/

background:url(images/bg.jpg); /*背景图片*/

font-size:14px; /*网页字体大小*/

font-family:"宋体", Arial, Helvetica, sans-serif; /*网页字体默认类型*/}h1{

font-family:"黑体";

color:#086916;

padding-bottom:24px;

text-align:center;

border-bottom:2px solid #cecaca;}img{

position:relative;

bottom:-24px;

有读者可能会产生这样的疑问，在<body>标签中设置了字体为宋体，为什么在<h1>标签中又设置为黑体呢？到底页面会显示出哪种字体呢？

CSS是这样规定的，在网站建设中，下级标签的属性可以继承其父级的属性，在<.body>标签中定义了字体为宋体，如果<h1>标签中没有再定义字体属性，那么<h1>标签的字体属性会继承<body>中的属性，其内容将会以宋体显示，在此例中<h1>标签又重新定义了字体为黑体，那么标题将会以黑体显示。第3步，设置正文样式，即<p>标签中的段落内容。

line-height:1.6em; /*行间距*/

font-size:13px; /*字体大小*/

color:#000; /*字体颜色*/

text-indent:2em; /*定义首行缩进2个字*/ margin:0; /*四周补白为0*/

此时<p>标签加入了CSS设置，包括字体大小和字体颜色和行间距等，但是并没有设置字体类型，所以<p>将会继承其父级属性，显示为宋体。