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

       上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定的往下走,今天这篇博文,小编主要简单总结一下CSS的文字效果,首先,我们来看一张图:

         技术分享

        接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例。

        文字的字体

        在CSS中,我们采用了font-family来控制文字的字体,接着,我们来看一个例子,以及运行效果:

        

<html>
<head>
	<title>文字字体</title>
<style>
<!--
h2{
	font-family:黑体, 幼圆;
}
p{
	font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{
	font-family:楷体_GB2312, "Times New Roman";
}
-->
</style>
   </head>

<body>
	<h2>送别</h2>
	<p>长亭外,古道边,芳草碧连天。晚风拂柳笛声残,夕阳山外山。
天之涯,地之角,知交半零落。一瓠浊酒尽余欢,今宵别梦寒。
长亭外,古道边,芳草碧连天。问君此去几时来,来时莫徘徊。
天之涯,地之角,知交半零落。人生难得是欢聚,惟有别离多。</p>
	<p class="kaiti">作者: 李叔同</p>
</body>
</html>
        效果如下:

        技术分享

        分析上面的这段代码,我们先看h2里边,有“font-family:黑体,幼圆;"这个的意思是:h2标记的里边,若是有黑体就用黑体,没有黑体就用幼圆,下面的P标签和作者也是一样,效果如上图所示。

        文字的大小

        学习完了文字的字体,我们来看一下文字的大小,例子代码以及运行效果如下:

        

<span style="font-size:18px;"><html>
<head>
	<title>文字大小</title>
<style>
<!--
p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }
-->
</style>
   </head>

<body>
	<p class="inch">文字大小,0.5in</p>
	<p class="cm">文字大小,0.5cm</p>
	<p class="mm">文字大小,4mm</p>
	<p class="pt">文字大小,12pt</p>
	<p class="pc">文字大小,2pc</p>
</body>
</html></span>
        效果如下:

        技术分享

        上面的小例子,一共采用了无行来做对比,第一行.05in,第二行0.5cm,第三行4mm,第四行12pt,第五行2pc,从上面的代码我们可以看出来CSS控制文字大小是通过font-size来实现的。

        文字的颜色

        例子的代码和运行效果如下所示:

        

<span style="font-size:18px;"><html>
<head>
	<title>文字颜色</title>
<style>
<!--
h2{ color:rgb(0%,0%,80%); }
p{
	color:#333333;
	font-size:13px;
}
p span{ color:blue; }
-->
</style>
   </head>

<body>
	<h2>冬至的由来</h2>
	<p><span>冬至</span>过节源于汉代,盛于唐宋,相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说。这表明古人对<span>冬至</span>十分重视。人们认为<span>冬至</span>是阴阳二气的自然转化,是上天赐予的福气。汉朝以<span>冬至</span>为“冬节”,官府要举行祝贺仪式称为“贺冬”,例行放假。《后汉书》中有这样的记载:“<span>冬至</span>前后,君子安身静体,百官绝事,不听政,择吉辰而后省事。”所以这天朝庭上下要放假休息,军队待命,边塞闭关,商旅停业,亲朋各以美食相赠,相互拜访,欢乐地过一个“安身静体”的节日。</p>
	<p>唐、宋时期,<span>冬至</span>是祭天祭祀祖的日子,皇帝在这天要到郊外举行祭天大典,百姓在这一天要向父母尊长祭拜,现在仍有一些地方在<span>冬至</span>这天过节庆贺。</p>
</body>
</html></span>
       运行效果如下所示:

       技术分享

       文字颜色的表示方法有很多种,看h2里边的color:rgb(0%,0%,80%),采用了百分比来显示,P标志采用了十六进制来表示,span标志则直接是blue。

       文字的粗细

       我们继续看文字的另外一个效果:粗细效果,我们为了一一显示文字的粗细,采用了非常多行来进行对比,例子代码和运行效果如下所示:

       

<span style="font-size:18px;"><html>
<head>
	<title>文字粗体</title>
<style>
<!--
h1 span{ font-weight:lighter;}
span{ font-size:28px; }
span.one{ font-weight:100; }
span.two{ font-weight:200; }
span.three{ font-weight:300; }
span.four{ font-weight:400; }
span.five{ font-weight:500; }
span.six{ font-weight:600; }
span.seven{ font-weight:700; }
span.eight{ font-weight:800; }
span.nine{ font-weight:900; }
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }
-->
</style>
   </head>

<body>
	<h1>文字<span>粗</span>体</h1>
	<span class="one">文字粗细:100</span>
	<span class="two">文字粗细:200</span>
	<span class="three">文字粗细:300</span>
	<span class="four">文字粗细:400</span>
	<span class="five">文字粗细:500</span>
	<span class="six">文字粗细:600</span>
	<span class="seven">文字粗细:700</span>
	<span class="eight">文字粗细:800</span>
	<span class="nine">文字粗细:900</span>
	<span class="ten">文字粗细:bold</span>
	<span class="eleven">文字粗细:normal</span>
</body>
</html></span>
        运行效果如下:

        技术分享

       100、200、300、400都没有太大的区别,一直到500开始,他们的显示效果跟bold粗体是一样的,而100~400在直观上看跟normal是一样的。

        文字斜体

        文字的斜体,在CSS中控制斜体是通过font-style来控制的,如果是italic则表示是斜体,normal则表示是常规的。我们看例子代码以及运行效果:

        

<span style="font-size:18px;"><html>
<head>
	<title>文字斜体</title>
<style>
<!--
h1{ font-style:italic; }			/* 设置斜体 */
h1 span{ font-style:normal; }		/* 设置为标准风格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
-->
</style>
   </head>

<body>
	<h1>文字<span>斜</span>体</h1>
	<p class="one">文字斜体</p>
	<p class="two">文字斜体</p>
</body>
</html></span>

        运行效果如下:

       技术分享
       下划线,顶划线,删除线

       例子代码和效果如下所示:

       

<span style="font-size:18px;"><html>
<head>
	<title>文字下划线、顶划线、删除线</title>
<style>
<!--
p.one{ text-decoration:underline; }			/* 下划线 */
p.two{ text-decoration:overline; }			/* 顶划线 */
p.three{ text-decoration:line-through; }	/* 删除线 */
p.four{ text-decoration:blink; }			/* 闪烁 */
-->
</style>
   </head>

<body>
	<p class="one">下划线文字,下划线文字</p>
	<p class="two">顶划线文字,顶划线文字</p>
	<p class="three">删除线文字,删除线文字</p>
	<p class="four">文字闪烁</p>
	<p>正常文字对比</p>
</body>
</html></span>

        运行效果如下:

        技术分享
        从上面的代码我们很明显的可以看出,text-decoration的属性里边,通过underline、overline、line-through、blink.进行效果显示。

        英文字母大小写

        例子代码和运行效果如下所示

        

<span style="font-size:18px;"><html>
<head>
	<title>英文字母大小写</title>
<style>
<!--
p{ font-size:17px; }
p.one{ text-transform:capitalize; }		/* 单词首字大写 */
p.two{ text-transform:uppercase; }		/* 全部大写 */
p.three{ text-transform:lowercase; }	/* 全部小写 */
-->
</style>
   </head>

<body>	
	<p class="one">quick brown fox jumps over the lazy dog.</p>
	<p class="two">quick brown fox jumps over the lazy dog.</p>
	<p class="three">QUICK Brown Fox JUMPS OVER THE LAZY DOG.</p>
</body>
</html></span>

        运行效果如下:

        技术分享
       text-transform属性里边,capitalize(单词首字母大写)、uppercase(全部大写)、lowerca(全部小写)。我们的效果图进行了很好的对比。我们通过一个简单的实例来模拟google公司的logo,例子代码和运行效果如下所示:

        

<span style="font-size:18px;"><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></span>

        运行效果如下:

        技术分享

       小编寄语:该博文,小编主要介绍了CSS的文字效果,包括文字的字体,文字的大小, 文字的颜色,文字的粗细,文字斜体,下划线、顶划线、删除线,以及英文字母的大小写,这些知识都是基本的CSS设置文字的一些知识,不难,关键就在于多动手,多实践,CSS让我们的界面活了起来,动了起来,BS学习,未完,待续......

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。