• 序言
• 第一单元 HTML基本知识
• 第二单元 HTML Tag的属性
• 第三单元 style属性
• 第四单元 HTML 表格
• 第五单元 HTML 中的特殊字符
• 第六单元 列表、滚动文字、音频、视频
• 第七单元 关于论坛编辑器
• 第八单元 实例分析
• 工具

第三单元 style属性

在前面的两个单元里我们学习了基本的HTML Tag并且了解了HTML Tag可以有属性。有些Tag，比如说<A>, <IMG> Tag等必须使用属性。属性的存在让HTML Tag更有活性，功能更强大！在这一单元里，我们着重介绍一个很有用的属性——style。

其实，在上一单元中，我们谈到了style的属性。可以用它来对文字进行修饰，包括颜色，大小，位置等等。因为几乎所有的HTML Tag都可以使用style属性，可见其功能极其强大。在第一单元里，我们学了<u>, <b>, <i> Tag。其实，他们可以用style结合<span>或者<div> Tag来表示。

用 span 和 style 来表示<u>，<i>，<b> Tag：

上面的几个例子用 text-decoration来说明下划线；用 font-style来说明斜体，用 font-weight 来修饰成为黑体。下面简单介绍一下style属性来修饰的项目：color, width, height, position, border, background，line-height....

分别介绍如下：

color

color: 表示修饰文字颜色。用法为：color:#ff0000  （表示红色）， color:#7f3f00 （表示棕色）

“#7f3f00”和“#00ff00” 前面是一个“#”后面跟了6个数字或者字母，用来表示不同的颜色。在本单元最后，我们给出常用不用颜色的值。

width，height，background

width: 表示修饰部分的宽度。用法为：width:123px （表示宽度为123 pixels）
height: 表示修饰部分的高度。用法为 height:33px  （表示高度为33  pixels）
background: 表示修饰部分的背景颜色。用法为 background:#ff0000 （表示背景颜色为红色）

注意，属性style的值为 width:223px; height:43px; background: #ff0000; color:#00ff00，而这个值又是由一系列“属性:值”表示。每一项“属性:值”用“;”分隔开。

border

border：表示修饰部分的边框，它比较特别。用法为：border:solid 1px #f0f0f0 （表示边框为实心直线，边框的宽度为1px，边框个颜色为#f0f0f0）

这里 style的值为 border:solid 3px #0000ff;color:#000000;background:#ff0000； 第一个说明border（边框），solid表示实心的边框，3px表示边框的宽度为3px，#0000ff 表示边框的颜色为#0000ff（蓝色）。接下来说明color（文字的颜色）为#000000（黑色）。最后一项是background （背景），颜色为#ff0000（红色）

font-weight，line-height

font-weight:表示文字是否用黑体，可以用它来代替<B> Tag。用法为：font-weight:bold（表示黑体） 或者 font-weight:normal（表示正常显示，不用黑体）

line-height：表示修饰部分的行间距。用法为：line-height:24px（表示文字的行间距为24px）

总结：本单元学习了style属性的基本用法，我们可以用它来修饰文字的颜色，大小，位置，背景颜色。也可以用来修是文字的行间距，边框等。style的值包含一系列的“属性:值”，而每一个“属性:值”用“;”来分隔。style中的border分属性比较特别，不是简单的“属性:值”， 而是“属性:值 值 值”，里面的三个值分别是边框特性（虚线，实线），边框宽度，边框颜色。

附录：颜色列表

首先介绍几个最常用的颜色值（颜色数值中的字幕无大小写之分）：

请注意，在使用下面的表格颜色数值时，不要忘记前面加上一个“#”