CSS设置文字样式——模拟Google

	文字样式,顾名思义,就是通过各种CSS去调整文字的样式,从而创造出各式各样的文字效果。
	在看完这部分的视频后,一个很明显的感觉:这好像是网页版的word一样。我们平时在Word中调整文字样式,现在是在CSS中调整各种在网页上显示的文字样式。
	先看看在哪些方面可以做出调整:
	1.字体
		
	2.文字大小
		
	3.文字颜色
		
	4.文字粗细
		
	5.斜体
		
	6.下划线、顶划线和删除线
		
	7.英文字母大小写
		
	【实例应用】
	最后,就不妨看看Google的标签是如何做出来的吧。
	1.页面框架
		
	2.调整字体
		
	3.调整颜色
		
	【具体代码】	
<html>
<head>
	<title>Google</title>   /*标题*/
<style>
p{
	font-size:80px;
	letter-spacing:-2px; /*字母间距*/
	font-family:Arial,Helvetica,sans-serif;   /*字体*/
}
.g1,.g2{color:#184dc6;}      /*各字母颜色设置*/
.o1,.e{color:#c61800;}
.o2{color:#efba00;}
.l{color:#42c34a;}
</style>

</head>

<body>
	<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
</body>
</html>

	在做实例的时候,想起来以前敲百例的时候,也是很简单的代码,自己一边实现一边学习。现在学习CSS,有着当时的感觉,简简单单的实例和代码,也是需要自己多去实践才行。
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值