php老师 发表于 2014-11-28 09:20:40

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

本帖最后由 php老师 于 2014-11-28 09:48 编辑


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

怎样改变字体的颜色?

什么是<span>标签,它具体有什么用?

同一行的字体,如何设置两种颜色?

怎样既把字体加粗,又加上颜色,怎么操作?

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


<!--我们用这个<span></span>标签是用来规范文本的排练方式的-----就是不换行也不换段洛-->
那么我们可以给这个span标签添加样式,如下:
<span style="color:#F00;">道勤教育让我们一起学习如何制作网站设计.</span> 这样我们就给这个span添加了 样式为style="color:#F00;"

同样的道理,我们继续给span标签添加一个变粗的属性:如下:
<span style="color:#6FF;"><b>美工学习教程</b></span>那么这个<b>......</b>标签指的就是,加粗的属性哦,效果如下:



那么我们来尝试下把<b></b>标签换位 <u></u>标签,代码如下:
<span style="color:#6FF;"><u>美工学习教程</u></span>这个<u></u>表示的是 加下划线
效果如下:


好,那么我们在看换个标签,把这个<u></u>换做<i></i>标签代码如下:<span style="color:#6FF;"><i>美工学习教程</i></span>
此时效果如下:

好,那么此时我们总结一下:
<b></b>标签的作用是给内容加粗,
<u></u>标签的作用是给内容加下划线
<i></i>标签的作用是给内容倾斜
好,此时我们在上一部的基础上在给这个<span>标签添加属性,代码如下:<span style="color:#6FF; background:#000; font-size:45px;"><i>美工学习教程</i></span>那么此时我们在<span>当中添加了一个background 和font-size的属性;
效果如下:

好那么此时我们在加一个行高
代码如下:
<p style="color:#C00; line-height:40px; background:#666;">欢迎大家的的光临,让我们一起学习吧,思密达啊啊哈哈阿阿啊啊哈哈哈哈哈哈哈哈哈哈哈啊啊哈哈阿
哈哈哈哈哈哈哈哈</p>效果如下:


好在上一部的基础上,我们在给其添加一个font-family的属性和font-weight的属性看看有什么变化
代码如下;
<p style="color:#C00; line-height:40px; background:#666; font-family:Verdana, Geneva, sans-serif; font-weight:500;">欢迎大家的的光临,让我们一起学习吧,思密达啊啊哈哈阿阿啊啊哈哈哈哈哈哈哈哈哈哈哈啊啊哈哈阿哈哈哈哈哈哈哈哈</p>
页: [1]
查看完整版本: 05 html当中文字常用到的标签以及其属性的设置