精通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学习，未完，待续......
精通CSS+DIV网页样式与布局--CSS文字效果的更多相关文章
- 精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- CSS+DIV网页样式与布局：第二章：CSS的基本语法
第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
- 精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
- 精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
随机推荐
- 存储单位的换算（KB, MB, GB）
关于存储单位的换算,大家一般会想到下面的换算方法. 1GB=1024MB 1MB=1024KB 1kb=1024字节 但实际生活中,这种换算方法并不准确. 例如在商家生产销售的硬盘, U盘中就不是这样 ...
- C语言程序设计第三次作业——选择结构（一）
(一)改错题 错误信息: 错误原因:y=1/x后没加分号 改正方法:在其后加上分号 错误信息: 错误原因:if语句后接了:,使else语句找不到对应的if 改正方法:删掉if后的分号 错误信息: 错误 ...
- 以太坊区块链Java（EthereumJ）学习笔记：概述
本系列文章介绍以太坊区块链基于Java语言的解决方案.通过介绍EthereumJ定义的主要模块和Class,希望为大家学习和使用EthereumJ提供一些帮助. 整体架构 以太坊的Java解决方案主要 ...
- Redis学习汇总
[Redis教程目录] 1.redis是什么 2.redis的作者何许人也 3.谁在使用redis 4.学会安装redis 5.学会启动redis 6.使用redis客户端 7.redis数据结构 – ...
- 深入理解SpringCloud之引导程序应用上下文
tips:我希望通过这篇文章来给对于bootstrap还不理解的朋友带来帮助.当然这篇文章不仅仅是讲解知识,我更希望给广大朋友带来学习与理解官方文档的一种思路.阅读本文前,建议大家对SpringBoo ...
- PHP 包含
PHP 包含文件 PHP include 和 require 语句 在 PHP 中,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容. include 和 require 语句用于在执 ...
- Python3 标准库概览
操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...
- oo第二阶段总结
第五次作业--多线程电梯 一.设计策略 本次作业是我们第一次接触多线程,给程序添加多线程功能后最大的挑战是实现共享数据的安全.避免冲突,由于这次作业是第一次尝试多线程方法,因此采用了将所有方法都加上s ...
- 20160214.CCPP体系详解(0024天)
程序片段(01):CGI.c 内容概要:CGI-cloud #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main01(vo ...
- [系统运维]Supervisord安装和启动程序
supervisord 是client/server 系统 把不是守护进程的进程变成守护进程 监控它自己启动的进程,类似于看门狗 可以作为开机启动的一种封装 可以精确控制进程的状态,而不是pidfil ...