从零开始自学入门CSS(4):css文本

Html网页文档中使用最多也最不可或缺的就是文本,像我们前面介绍过的<h1>-<h6>、<p><a>等等一系列只要是文字就属于文本Text,网页中没有文本就没人明白你的网页是用来干什么的,所以我们在这一章中简单介绍下关于文本的css样式属性。

文本颜色

上一节中介绍过背景颜色,文本也有背景颜色,背景颜色会将文字整个包含起来,而文本颜色指的则单纯是文本中每一个字的颜色。

使用color来为文本设置颜色属性,颜色值一般使用英文如:red(红色)或16进制值如:#FF0000(红色),还有一种是rgp值不过一般不使用。

样式表:

#bgcol { background-color:red; }
#coll { color:red;}

html代码:

<p id="bgcol">背景颜色</p>
<p id="coll">文本颜色</p>

代码展示:

背景颜色

文本颜色

从上面可以看到背景颜色和文本颜色的区别!

文本对齐

word文档在办公室中属于必修技能,文本排版也是重中之重,一个美观大气的word文档标题必定是居中的,结尾的日期必定在文档的右下角。在word中文本的对齐只要点点鼠标就行了,那么网页中文本又是如何对齐的呢?猜对了,还是用css样式。

使用text-align来为文本设置对齐方式。对齐方式一般有默认left(左)、right(右)、center(居中)等。

样式表:

h1.cen { text-align:center; }
p.rg{ text-align:right; }

html代码:

<h1 class="cen">无梦博客</h1>
<p>无梦博客汇聚全网资源,全部免费获取,关注就送,666。另有各类教程实时更新,Web前端开发,Python or PHP后台编程语言,搞机系列。在不学习就老了!</p>
<p class="rg">2018年6月29日</p>

代码展示:

无梦博客

无梦博客汇聚全网资源,全部免费获取,关注就送,666。另有各类教程实时更新,Web前端开发,Python or PHP后台编程语言,搞机系列。在不学习就老了!

2018年6月29日

另有文本转换用来将文本转换为大写或小写,文本缩进用来使文本首行缩进,文本间隔用来改变文字之间的间隔等等。使用方法同上方的属性,不在赘述。

记住:师傅领进门,修行在个人!

© 版权声明
THE END
喜欢就支持以下吧
点赞3 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容