当前位置: 首页 > 工具软件 > Java-Style > 使用案例 >

java中style的用法

甄煜
2023-12-01

在前面的两个单元里我们学习了基本的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

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

EEEEEEFF00CCFF66FFFF00FF
DDDDDDFFCCCCFF66CCFF00CC
CCCCCCFFCC99FF6699FF0099
BBBBBBFFCC66FF6666FF0066
AAAAAAFFCC33FF6633FF0033
999999FFCC00FF6600FF0000
888888CCCCFFCC66FFCC00FF
777777CCCCCCCC66CCCC00CC
666666CCCC99CC6699CC0099
555555CCCC66CC6666CC0066
444444CCCC33CC6633CC0033
333333CCCC00CC6600CC0000
22222299CCFF9966FF9900FF
11111199CCCC9966CC9900CC
00000099CC99996699990099
FF000099CC66996666990066
EE000099CC33996633990033
DD000099CC00996600990000
CC000066CCFF6666FF6600FF
BB000066CCCC6666CC6600CC
AA000066CC99666699660099
99000066CC66666666660066
88000066CC33666633660033
77000066CC00666600660000
66000033CCFF3366FF3300FF
55000033CCCC3366CC3300CC
44000033CC99336699330099
33000033CC66336666330066
22000033CC33336633330033
11000033CC00336600330000
FFFFFF00CCFF0066FF0000FF
FFFFCC00CCCC0066CC0000CC
FFFF9900CC99006699000099
FFFF6600CC66006666000066
FFFF3300CC33006633000033
FFFF0000CC00006600000000
CCFFFFFF99FFFF33FF00FF00
CCFFCCFF99CCFF33CC00EE00
CCFF99FF9999FF339900DD00
CCFF66FF9966FF336600CC00
CCFF33FF9933FF333300BB00
CCFF00FF9900FF330000AA00
99FFFFCC99FFCC33FF990099
99FFCCCC99CCCC33CC008800
99FF99CC9999CC3399007700
99FF66CC9966CC3366006600
99FF33CC9933CC3333005500
99FF00CC9900CC3300004400
66FFFF9999FF9933FF003300
66FFCC9999CC9933CC002200
66FF99999999993399001100
66FF669999669933660000FF
66FF339999339933330000EE
66FF009999009933000000DD
33FFFF6699FF6633FF0000CC
33FFCC6699CC6633CC0000BB
33FF996699996633990000AA
33FF66669966663366000099
33FF33669933663333000088
33FF00669900663300000077
00FFFF3399FF3333FF000066
00FFCC3399CC3333CC000055
00FF99339999333399000044
00FF66339966333366000033
00FF33339933333333000022
00FF00339900333300000011
0099FF0033FF0099CC0033CC
009999003399009966003366
009933

 类似资料: