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

简介: <pre><span style="font-family:KaiTi_GB2312"><span style="font-size:18px; white-space:pre"> </span><span style="font-size:18px">文字样式,顾名思义,就是通过各种CSS去调整文字的样式,从而创造出各式各样的文字效果。</span><span style="font-
	文字样式,顾名思义,就是通过各种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,有着当时的感觉,简简单单的实例和代码,也是需要自己多去实践才行。
目录
打赏
0
0
0
0
1
分享
相关文章
|
4月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
45 6
|
4月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
53 6
|
4月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
37 1
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
24天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布

热门文章

最新文章