在前面的两个单元里我们学习了基本的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 (表示背景颜色为红色)
注意,属性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分属性比较特别,不是简单的“属性:值”, 而是“属性:值 值 值”,里面的三个值分别是边框特性(虚线,实线),边框宽度,边框颜色。
附录:颜色列表
首先介绍几个最常用的颜色值(颜色数值中的字幕无大小写之分):
请注意,在使用下面的表格颜色数值时,不要忘记前面加上一个“#”
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 |