学习css3笔记——字体对齐方式text-align

用这个故事发生在某天,到华南植物园周边喝完早茶回公司,上网收集有趣的文字,整理修订多年前写好的《JavaScript》教程,并创作汉语SEO要用的《CSS语言》教程,存起来以后当文化传播作品使用。(图1)

一边整理《JavaScript》教程,一边在网上和女粉丝侃大山。突然间,一个说自已是从海南琼中来广州学现代汉语的女粉丝问:“陈老师,最近文化传播教程又打算教点什么新东西?”。
我问:“你们都想学啥?”。
女粉丝说:“陈老师!我想知道字体对齐方式text-align用法。“下面就给大家讲下。

使用css语言控制字体的对齐方式,要用到text-align属性实现字体对齐方式,内容如语法1。

text-align:...属性值...

text-align属性值 值描述
left 默认值,左对齐
center 居中对齐
right 右对齐

使用css语言中的text-align属性,控制h4元素标签文字居中显示,内容如css语言1。

h4
{
text-align: center
}

使用css语言中的text-align属性,控制h5元素标签文字靠左显示,内容如css语言2。

h5
{
text-align: left
}

使用css语言中的text-align属性,控制h6元素内容靠右显示,内容如css语言3。

h6
{
text-align: right
}

使用html语言,设计h4~h6三个元素标签配合试验使用,内容如html语言1。

微信公众号:design-Rabbit

微信公众号:design-Rabbit
微信公众号:design-Rabbit

把css语言1~3和html语言1,移植或嵌入到html5基础框架中,内容如综合代码1。




学习html5笔记,水平对齐align,微信公众号:design-Rabbit



微信公众号:design-Rabbit

微信公众号:design-Rabbit
微信公众号:design-Rabbit

运行综合代码1,就可以看到图1的效果,如果还不会运行方法,可以看我以前写的Html5,学习代码运行方法。

注:看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。有的浏览器会阻止脚本运行,这时请大家换下浏览器例如用IE浏览器或看下防火墙或看下杀毒软件有没报错。

图1

看到图1中的字体,左,中,左排列效果,那么我们这次的字体对齐试验就成功了。

好!杰哥CSS3学习笔记分享到这里,要知后事如何请关注、分享、收藏,如果喜欢请打赏。

你可能感兴趣的:(学习css3笔记——字体对齐方式text-align)