CSS+DIV网页样式与布局——文字样式&段落(一)

本文深入探讨了CSS如何用于设置网页中的文字样式和段落布局,包括字体、颜色、对齐方式、行高和段落间距等关键元素,帮助读者掌握CSS在网页设计中的应用。
        一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字。让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩。
一、文字样式
       文字样式主要包括文字的大小、颜色、字体等,具体包括如下

写一个小例子,综合运用上述所有的文字效果样式:
代码:
<html>
<head>
	<title>文字字体</title>
<style>
body{background-color:#99CCFF;}
h2{font-family:楷体_GB2312, "Times New Roman";}
h3{
	font-family:"宋体";
}
p.bigsize {font-size: 0.5in;}
p.smallsize {font-size: 0.5cm;}
p.bluecolor {
	color:#00CCFF;
}
p.yellowcolor {
	color:#FFFF66;
}
p.bold{
	font-weight:bold;
}
p.Italic{
	font-weight:bold;
	font-style:italic;
}
.line{
	text-decoration:underline;
}
.line1{
	text-decoration:blink;
}
.line3{
	text-decoration:line-through;
}
.line4{
	text-decoration:overline;
}
.zuozhe1{
	text-transform:capitalize;/* 单词首字大写 */  
}
.zuozhe2{
	text-transform:uppercase; /* 全部大写 */ 
}
.zuozhe3{
	text-transform:lowercase; /* 全部小写 */  
}
.joy{
	color:#CC33CC;
}
</style>
   </head>

<body>
	<h2>人群中哭着-----楷体</h2> <h3>你只想变成透明的颜色-----宋体</h3>
	<p class="bigsize">五月天        <span class="joy">你不是真正的快乐</span></p>      
	<p class="smallsize">        阿信</p>
	<p class="bluecolor">你再不回梦或痛或心动了-----蓝色</p>   
	<p class="yellowcolor">你已经决定了 你已经决定了-----黄色</p>
	<p class="bold">你已经决定了-----文字粗细:粗体</p>  
	<p class="Italic">你静静忍着-----文字粗细+斜体</p>
	<span class="line">紧紧把昨天在拳心握着-----下划线</span><br><span class="line1">而回忆越是甜就是越伤人-----文字的闪烁</span><br><span class="line3">  文字的删除线</span><br><span class="line4">越是在手心留下密密麻麻深深浅浅的刀割-----顶划线</span>
	<br><br><span class="zuozhe1">作者: Claribel (英文字母首字母大写)</span><span class="zuozhe2">   作者: Claribel (英文字母全部大写)</span><span class="zuozhe3">   作者: Claribel (英文字母全部小写)</span>
</body>
</html>

运行效果:


二、文字段落
          对于文字的段落来说,一篇文章要想清晰有条理的展示给读者,有一个条理分明的段落样式是非常必要的,接下来就说明一下文字段落的一些常用样式。具体详情请参考下篇博客:  

CSS+DIV网页样式与布局——文字样式&段落 (二)

http://blog.youkuaiyun.com/xdd19910505/article/details/43566515


评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值