2.3.1 使用行内样式表


2.3   实验二:你的第1个样式表


在熟悉了Dreamweaver里有关CSS的相关界面后,我们就可以通过实验二自己来创建第1个样式表了。由于样式表有3种:外部样式表、内部样式表和行内样式表,实验中将分别用这3种方式来实现同一种显示效果,并从中体会下面这句话的含义。


外部样式表、内部样式表和行内样式表3种方法都能够实现相同的显示效果,它们之间的区别在于写法、应用场合和个人偏好的不同。


我们以第1章中创建的html.html文件为蓝本,控制文字内容的显示。


2.3.1   使用行内样式表


行内样式表,顾名思义,它和样式所定义的内容在同一代码行内,如代码2.1所示。


代码2.1   应用了行内样式表的HTML页面:html.html





<html>
<head>
<title>一个简单网页</title>
</head>
<body style="font-size:28px">
你好!HTML!(行内样式表)
</body>
</html>

在IE7浏览器中打开该文档,显示页面如图2.10所示。


注意


和第1章中代码1.1不同,在代码2.1的<body>标签内还有一句特别的语句,style= “font-size: 28px”,我们把类似这样的写法叫做属性,style就是body标签的一个属性。当然,有关属性我们在后面会重点提及。


前述这样一句额外代码就是行内样式表的书写方式,它出现在要控制其格式的标签内部,以Style=“”开始,引号中间则是样式控制的命令。可以看出,图2.10显示“你好!







 
图2.10   利用行内样式表修改内容显示

HTML!”这句话的文字比一般的网页要大些,这正是代码2.1中行内样式表所产生的效果。通过设置style,对包含style=“”这句话的<body>和</body>标签之间内容进行样式上的改变,具体的改变就是内容如果为文字的话,大小改变为28像素。


们将在第3章具体介绍style=“”一句中更多样式设置的含义。




标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2