精通CSS+DIV网页样式与布局——CSS文字效果

最新推荐文章于 2023-03-25 17:26:45 发布

weixin_30598225

最新推荐文章于 2023-03-25 17:26:45 发布

阅读量152

点赞数

原文链接：http://www.cnblogs.com/iplus/archive/2012/12/29/4490445.html

版权

一、文字样式

1.1字体

font-family:黑体;

1.2字体大小。

font-size: 0.5px;

1.3字体颜色。

color:#333333;

1.4文字粗细。

font-weight:bold;

1.5文字斜体，下划线，删除线，顶划线。

text-decoration:underline; /* 下划线 */

text-decoration:overline; /* 顶划线 */

text-decoration:line-through; /* 删除线*/

font-style:italic; /* 设置斜体 */

二、段落

2.1 段落实例——百度搜索结果

<html>
<head>
<title>段落实例:Baidu搜索</title>
<style>
<!--
p{
	margin:0px;
	font-family:Arial;			/* 定义所有字体 */
}
p.title{
	padding-bottom:0px;
	font-size:16px;
}
p.content{
	padding-top:3px;			/* 标题与内容的距离 */
	font-size:13px;				/* 内容的字体大小 */
	line-height:18px;
}
p.link{
	font-size:13px;
	color:#008000;				/* 网址颜色 */
	padding-bottom:25px;
}
span.search{
	color:#c60a00;				/* 关键字颜色 */
}
span.quick{
	color:#666666;				/* 快照颜色 */
	text-decoration:underline;	/* 快照下划线 */
}
p.title span.search{
	text-decoration:underline;	/* 标题处关键字的下划线 */
}
-->
</style>
   </head>
<body>
	<p class="title"><a href="#">中国<span class="search">春节</span>网</a></p>
	<p class="content">欢迎光临中国<span class="search">春节</span>网,您现在的位置是中国<span class="search">春节</span>网首页! "年"兽的传说 熬年的传说 万年创建历法说 中国古代历法发展 <span class="search">春节</span>:传统和现代 元宵灯节源于何时? 猜灯谜的来由 十二生肖的源流、排列与信仰 祭灶 扫尘 贴春联 年画 倒贴福字 除夕夜 ...</p>
	<p class="link">www.chunjie.net.cn/ 46K 2006-12-18 - <span class="quick">百度快照</span></p>
	
	<p class="title"><a href="#">喜迎2004<span class="search">春节</span>_TOM新闻</a></p>
	<p class="content">•<span class="search">春节</span>流行三类“拜年短信”:猴、祝福、个性 •<span class="search">春节</span>期间电视节目早知道(1月19日-1月25日) •猴年贺岁:短信 彩信...•TOM游戏与大家同过快乐<span class="search">春节</span> 一起来玩免费网游! •“对对联 贺新春” 玩乐吧强档推荐 许个愿吧 •<span class="search">春节</span>听觉搜爆-...</p>
	<p class="link">news.tom.com/hot/2004year/ 82K 2004-1-25 - <span class="quick">百度快照</span></p>
	
	<p class="title"><a href="#"><span class="search">春节</span> 我把money献给你_阿里巴巴</a></p>
	<p class="content">编者按:新年、<span class="search">春节</span>、情人节,一年中时尚男女血拼的最佳时节。商家借节造势,推出的揽客“花招”也是层出不穷…… 新春最受欢迎的开...•<span class="search">春节</span>期间:这些生意好赚钱(一)(图)01/20 •鼎大祥“红腰带吉祥裤”销售红火01/18 <span class="search">春节</span> 这些生意好...</p>
	<p class="link">info.china.alibaba.com/news/subject/v3000 ... 33K 2006-12-10 - <span class="quick">百度快照</span></p>
</body>
</html>

效果图：

2.2垂直对齐

vertical-align:top;                       /* 顶端对齐 */

vertical-align:bottom;                /* 底端对齐 */

vertical-align:middle;                 /* 中间对齐*/

2.3首字母放大

	<html>
<head>
<title>首字放大</title>
<style>
<!--
body{
	background-color:black;		/* 背景色 */
}
p{
	font-size:15px;				/* 文字大小 */
	color:white;				/* 文字颜色 */
}
p span{ /*首字的样式*/
	font-size:60px;				/* 首字大小 */
	float:left;					/* 首字下沉 */
	padding-right:5px;			/* 与右边的间隔 */
	font-weight:bold;			/* 粗体字 */
	font-family:黑体;			/* 黑体字 */
	color:yellow;				/* 字体颜色 */
}
-->
</style>
   </head>
<body>
	<p><span>这</span>几天提高班里装windows8的人很多，大家都想赶时髦弄上windows8尝尝鲜，我也想弄但是好多人装了windows8以后还得把所有软件重新装，我现在的电脑是windows7，我有一个移动移动硬盘。</p>
</br>
</br>
<p>我想也就是尝尝鲜没有必要大刀阔斧的重装系统吧这样的话如果觉得windows8用的不习惯我还得重新删了重新装windows7我就想要不我装在我的移动硬盘里面。我就上网找了很多资料一开始我</p>
</body>
</html>

效果图：