顶顶华闻:java中style的用法 2024-03-30 11:03:14 0 0 在前面的两个单元里我们学习了基本的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 请注意,在使用下面的表格颜色数值时,不要忘记前面加上一个“#”EEEEEEFF00CCFF66FFFF00FFDDDDDDFFCCCCFF66CCFF00CCCCCCCCFFCC99FF6699FF0099BBBBBBFFCC66FF6666FF0066AAAAAAFFCC33FF6633FF0033999999FFCC00FF6600FF0000888888CCCCFFCC66FFCC00FF777777CCCCCCCC66CCCC00CC666666CCCC99CC6699CC0099555555CCCC66CC6666CC0066444444CCCC33CC6633CC0033333333CCCC00CC6600CC000022222299CCFF9966FF9900FF11111199CCCC9966CC9900CC00000099CC99996699990099FF000099CC66996666990066EE000099CC33996633990033DD000099CC00996600990000CC000066CCFF6666FF6600FFBB000066CCCC6666CC6600CCAA000066CC9966669966009999000066CC6666666666006688000066CC3366663366003377000066CC0066660066000066000033CCFF3366FF3300FF55000033CCCC3366CC3300CC44000033CC9933669933009933000033CC6633666633006622000033CC3333663333003311000033CC00336600330000FFFFFF00CCFF0066FF0000FFFFFFCC00CCCC0066CC0000CCFFFF9900CC99006699000099FFFF6600CC66006666000066FFFF3300CC33006633000033FFFF0000CC00006600000000CCFFFFFF99FFFF33FF00FF00CCFFCCFF99CCFF33CC00EE00CCFF99FF9999FF339900DD00CCFF66FF9966FF336600CC00CCFF33FF9933FF333300BB00CCFF00FF9900FF330000AA0099FFFFCC99FFCC33FF99009999FFCCCC99CCCC33CC00880099FF99CC9999CC339900770099FF66CC9966CC336600660099FF33CC9933CC333300550099FF00CC9900CC330000440066FFFF9999FF9933FF00330066FFCC9999CC9933CC00220066FF9999999999339900110066FF669999669933660000FF66FF339999339933330000EE66FF009999009933000000DD33FFFF6699FF6633FF0000CC33FFCC6699CC6633CC0000BB33FF996699996633990000AA33FF6666996666336600009933FF3366993366333300008833FF0066990066330000007700FFFF3399FF3333FF00006600FFCC3399CC3333CC00005500FF9933999933339900004400FF6633996633336600003300FF3333993333333300002200FF003399003333000000110099FF0033FF0099CC0033CC009999003399009966003366009933 收藏(0)