05 html当中文字常用到的标签以及其属性的设置

php老师

这里主要为大家讲解：html常用的文字属性。

怎样改变字体的颜色？

什么是<span>标签，它具体有什么用？

同一行的字体，如何设置两种颜色？

怎样既把字体加粗，又加上颜色，怎么操作？

如何让我们实现自由操作！！


<!--我们用这个<span></span>标签是用来规范文本的排练方式的-----就是不换行也不换段洛-->
那么我们可以给这个span标签添加样式，如下：

1. <span style="color:#F00;">道勤教育让我们一起学习如何制作网站设计.</span>

复制代码

这样我们就给这个span添加了 样式为style="color:#F00;"

同样的道理，我们继续给span标签添加一个变粗的属性：如下：

1. <span style="color:#6FF;"><b>美工学习教程</b></span>

复制代码

那么这个<b>......</b>标签指的就是，加粗的属性哦，效果如下：



那么我们来尝试下把<b></b>标签换位 <u></u>标签，代码如下：

1. <span style="color:#6FF;"><u>美工学习教程</u></span>

复制代码

这个<u></u>表示的是 加下划线
效果如下：


好，那么我们在看换个标签，把这个<u></u>换做<i></i>标签代码如下：

1. <span style="color:#6FF;"><i>美工学习教程</i></span>

复制代码

此时效果如下：

好，那么此时我们总结一下：
<b></b>标签的作用是给内容加粗，
<u></u>标签的作用是给内容加下划线
<i></i>标签的作用是给内容倾斜
好，此时我们在上一部的基础上在给这个<span>标签添加属性，代码如下：

1. <span style="color:#6FF; background:#000; font-size:45px;"><i>美工学习教程</i></span>

复制代码

那么此时我们在<span>当中添加了一个background 和font-size的属性；
效果如下：

好那么此时我们在加一个行高
代码如下：

1. <p style="color:#C00; line-height:40px; background:#666;">欢迎大家的的光临，让我们一起学习吧，思密达啊啊哈哈阿阿啊啊哈哈哈哈哈哈哈哈哈哈哈啊啊哈哈阿
   
2. 哈哈哈哈哈哈哈哈</p>

复制代码

效果如下：


好在上一部的基础上，我们在给其添加一个font-family的属性和font-weight的属性看看有什么变化
代码如下;

1. <p style="color:#C00; line-height:40px; background:#666; font-family:Verdana, Geneva, sans-serif; font-weight:500;">欢迎大家的的光临，让我们一起学习吧，思密达啊啊哈哈阿阿啊啊哈哈哈哈哈哈哈哈哈哈哈啊啊哈哈阿哈哈哈哈哈哈哈哈</p>

复制代码

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！