精通CSS+DIV网页样式与布局CSS文字效果_html/css_WEB-ITnose
接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例。
文字的字体
在CSS中,我们采用了font-family来控制文字的字体,接着,我们来看一个例子,以及运行效果:
效果如下:文字字体 送别
长亭外,古道边,芳草碧连天。晚风拂柳笛声残,夕阳山外山。天之涯,地之角,知交半零落。一瓠浊酒尽余欢,今宵别梦寒。长亭外,古道边,芳草碧连天。问君此去几时来,来时莫徘徊。天之涯,地之角,知交半零落。人生难得是欢聚,惟有别离多。
作者: 李叔同
分析上面的这段代码,我们先看h2里边,有“font-family:黑体,幼圆;"这个的意思是:h2标记的里边,若是有黑体就用黑体,没有黑体就用幼圆,下面的P标签和作者也是一样,效果如上图所示。
文字的大小
学习完了文字的字体,我们来看一下文字的大小,例子代码以及运行效果如下:
文字大小
文字大小,0.5in
文字大小,0.5cm
文字大小,4mm
文字大小,12pt
文字大小,2pc
效果如下:
上面的小例子,一共采用了无行来做对比,第一行.05in,第二行0.5cm,第三行4mm,第四行12pt,第五行2pc,从上面的代码我们可以看出来CSS控制文字大小是通过font-size来实现的。
文字的颜色
例子的代码和运行效果如下所示:
文字颜色
冬至的由来
冬至过节源于汉代,盛于唐宋,相沿至今。《清嘉录》甚至有“冬至大如年”之说。这表明古人对冬至十分重视。人们认为冬至是阴阳二气的自然转化,是上天赐予的福气。汉朝以冬至为“冬节”,官府要举行祝贺仪式称为“贺冬”,例行放假。《后汉书》中有这样的记载:“冬至前后,君子安身静体,百官绝事,不听政,择吉辰而后省事。”所以这天朝庭上下要放假休息,军队待命,边塞闭关,商旅停业,亲朋各以美食相赠,相互拜访,欢乐地过一个“安身静体”的节日。
唐、宋时期,冬至是祭天祭祀祖的日子,皇帝在这天要到郊外举行祭天大典,百姓在这一天要向父母尊长祭拜,现在仍有一些地方在冬至这天过节庆贺。
运行效果如下所示:
文字颜色的表示方法有很多种,看h2里边的color:rgb(0%,0%,80%),采用了百分比来显示,P标志采用了十六进制来表示,span标志则直接是blue。
文字的粗细
我们继续看文字的另外一个效果:粗细效果,我们为了一一显示文字的粗细,采用了非常多行来进行对比,例子代码和运行效果如下所示:
文字粗体
文字粗体
文字粗细:100 文字粗细:200 文字粗细:300 文字粗细:400 文字粗细:500 文字粗细:600 文字粗细:700 文字粗细:800 文字粗细:900 文字粗细:bold 文字粗细:normal
运行效果如下:
100、200、300、400都没有太大的区别,一直到500开始,他们的显示效果跟bold粗体是一样的,而100~400在直观上看跟normal是一样的。
文字斜体
文字的斜体,在CSS中控制斜体是通过font-style来控制的,如果是italic则表示是斜体,normal则表示是常规的。我们看例子代码以及运行效果:
文字斜体
文字斜体
文字斜体
文字斜体
运行效果如下:
下划线,顶划线,删除线
例子代码和效果如下所示:
文字下划线、顶划线、删除线
下划线文字,下划线文字
顶划线文字,顶划线文字
删除线文字,删除线文字
文字闪烁
正常文字对比
运行效果如下:
从上面的代码我们很明显的可以看出,text-decoration的属性里边,通过underline、overline、line-through、blink.进行效果显示。
英文字母大小写
例子代码和运行效果如下所示
英文字母大小写
quick brown fox jumps over the lazy dog.
quick brown fox jumps over the lazy dog.
QUICK Brown Fox JUMPS OVER THE LAZY DOG.
运行效果如下:
text-transform属性里边,capitalize(单词首字母大写)、uppercase(全部大写)、lowerca(全部小写)。我们的效果图进行了很好的对比。我们通过一个简单的实例来模拟google公司的logo,例子代码和运行效果如下所示:
Google
Google
运行效果如下:
小编寄语:该博文,小编主要介绍了CSS的文字效果,包括文字的字体,文字的大小, 文字的颜色,文字的粗细,文字斜体,下划线、顶划线、删除线,以及英文字母的大小写,这些知识都是基本的CSS设置文字的一些知识,不难,关键就在于多动手,多实践,CSS让我们的界面活了起来,动了起来,BS学习,未完,待续......
推荐阅读
-
精通CSS+DIV网页样式与布局CSS文字效果_html/css_WEB-ITnose
-
【原】《DIV+CSS商业案例与网页布局开发精讲》读书笔记(2)_html/css_WEB-ITnose
-
【急】如何快速高效地复制某个网页的一部分?使这一部分的布局与样式和原网站一样_html/css_WEB-ITnose
-
CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版
-
精通CSS+DIV网页样式与布局CSS文字效果_html/css_WEB-ITnose
-
看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose
-
CSS+DIV:实现炫酷网页样式与布局_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose