HTML的style属性


style的属性。

可以用它来对文字进行修饰,包括颜色,大小,位置等等。因为几乎所有的HTML Tag都可以使用style属性,可见其功能极其强大。

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

用 span 和 style 来表示<u>,<i>,<b> Tag:

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

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

分别介绍如下:

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分属性比较特别,不是简单的“属性:值”, 而是“属性:值 值 值”,里面的三个值分别是边框特性(虚线,实线),边框宽度,边框颜色。

 

转载:http://hi.baidu.com/yfq666/blog/item/7cc564374adaff390a55a93d.html

发表评论