java中style的用法

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

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

我喜欢<u>顶顶华闻</u>网站
我喜欢<i>顶顶华闻</i>网站
我喜欢<b>顶顶华闻</b>网站

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

我喜欢<span style="text-decoration:underline;">顶顶华闻</span>网站
我喜欢<span style="font-style:italic">顶顶华闻</span>网站
我喜欢<span style="font-weight:bold">顶顶华闻</span>网站

上面的几个例子用 text-decoration来说明下划线；用font-style来说明斜体，用font-weight 来修饰成为黑体。

下面简单介绍一下style属性来修饰的项目：color, width, height, position, border, background，line-height....

 

style属性来修饰的项目

color

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

<div style="color:#7f3f00">这行文字的颜色是棕色<div>
<div style="color:#00ff00">这行文字的颜色是绿色<div>

“#7f3f00”和“#00ff00” 前面是一个“#”后面跟了6个数字或者字母，用来表示不同的颜色。

width，height，background

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

<div style="width:223px; height:43px; background: #ff0000; color:#00ff00">看看这会如何显示</div>

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

border

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

<div style="border:solid 3px #0000ff;color:#000000;background:#ff0000;">看看这会如何显示</div>

这里 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）

<div style="border:solid 1px #ff0000;color:#0000ff;line-height:30px">报道批驳了将中国产品定位成廉价产品的看法，认为中国在很多领域已对西方工业国形成了强大竞争。在电子技术、电子工业方面，中国已居世界领先地位，国际市场份额达18.5%。中国出口质量高、价格诱人的钢铁制品，今年上半年出口额达260亿美元，同比增长125%。但在化工和机械制造领域，中国尚需数年时间，才能成为国际市场强大的竞争对手。中国仅占国际汽车市场0.3%份额，远远落后于德国（22%）和日本（18%），还需要走很长的路，才能和德日竞争。</div>

 

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

 

附录：颜色列表

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

白色：#FFFFFF

黑色：#000000

红色：#FF0000

蓝色：#0000FF

绿色：#00FF00

黄色：#FFFF00

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

EEEEEE	FF00CC	FF66FF	FF00FF
DDDDDD	FFCCCC	FF66CC	FF00CC
CCCCCC	FFCC99	FF6699	FF0099
BBBBBB	FFCC66	FF6666	FF0066
AAAAAA	FFCC33	FF6633	FF0033
999999	FFCC00	FF6600	FF0000
888888	CCCCFF	CC66FF	CC00FF
777777	CCCCCC	CC66CC	CC00CC
666666	CCCC99	CC6699	CC0099
555555	CCCC66	CC6666	CC0066
444444	CCCC33	CC6633	CC0033
333333	CCCC00	CC6600	CC0000
222222	99CCFF	9966FF	9900FF
111111	99CCCC	9966CC	9900CC
000000	99CC99	996699	990099
FF0000	99CC66	996666	990066
EE0000	99CC33	996633	990033
DD0000	99CC00	996600	990000
CC0000	66CCFF	6666FF	6600FF
BB0000	66CCCC	6666CC	6600CC
AA0000	66CC99	666699	660099
990000	66CC66	666666	660066
880000	66CC33	666633	660033
770000	66CC00	666600	660000
660000	33CCFF	3366FF	3300FF
550000	33CCCC	3366CC	3300CC
440000	33CC99	336699	330099
330000	33CC66	336666	330066
220000	33CC33	336633	330033
110000	33CC00	336600	330000
FFFFFF	00CCFF	0066FF	0000FF
FFFFCC	00CCCC	0066CC	0000CC
FFFF99	00CC99	006699	000099
FFFF66	00CC66	006666	000066
FFFF33	00CC33	006633	000033
FFFF00	00CC00	006600	000000
CCFFFF	FF99FF	FF33FF	00FF00
CCFFCC	FF99CC	FF33CC	00EE00
CCFF99	FF9999	FF3399	00DD00
CCFF66	FF9966	FF3366	00CC00
CCFF33	FF9933	FF3333	00BB00
CCFF00	FF9900	FF3300	00AA00
99FFFF	CC99FF	CC33FF	990099
99FFCC	CC99CC	CC33CC	008800
99FF99	CC9999	CC3399	007700
99FF66	CC9966	CC3366	006600
99FF33	CC9933	CC3333	005500
99FF00	CC9900	CC3300	004400
66FFFF	9999FF	9933FF	003300
66FFCC	9999CC	9933CC	002200
66FF99	999999	993399	001100
66FF66	999966	993366	0000FF
66FF33	999933	993333	0000EE
66FF00	999900	993300	0000DD
33FFFF	6699FF	6633FF	0000CC
33FFCC	6699CC	6633CC	0000BB
33FF99	669999	663399	0000AA
33FF66	669966	663366	000099
33FF33	669933	663333	000088
33FF00	669900	663300	000077
00FFFF	3399FF	3333FF	000066
00FFCC	3399CC	3333CC	000055
00FF99	339999	333399	000044
00FF66	339966	333366	000033
00FF33	339933	333333	000022
00FF00	339900	333300	000011
0099FF	0033FF	0099CC	0033CC
009999	003399	009966	003366
009933