DHTML【8】--CSS
在讲HTML时说过，有个Style标签是在CSS里用的，是的，在HTML中添加CSS样式必须要用到Style，在标签里单独定义标签属性时用的是Style属性。上一节我们也说过，先不用管那个Style标签，那么这一节，我们就单独来解决这个Style标签。
看一看帮助文档，他是怎么说Style的，指定页面的样式表，Style 元素只能在 HTML 文档的 Head节内使用，那么究竟该怎么指定呢？
有三种方式，看下图：
最常用的要数第一层，外部引用，这样的化程序员和美工设计者分工非常明确，便于分开操作，也可以增加代码的复用性，后来需要补充的属性可以页面嵌入，很少用内联的形式。其实除了外部引入方式，我们没有接触过，页面嵌入和内联形式都接触过了，就再都介绍介绍吧。
1. 内联引入
思想：通过标签的Style属性设置当前标签的样式。
例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head>
</head>
<body>
<table align=
"center"
border=
"10px"
bordercolor=
"#0000FF"
cellspacing=
"0"
>
<
caption
>DHTML技术</
caption
>
<tr style="background-color:#FF0000; font-size:18px">
<th>名称</th><th>HTML</th><th>CSS</th><th>JavaScript</th><th>DOM</th><th>Jquery</th><th>Ajax</th></tr>
<tr style=
"background-color:#00FF00; font-size:36px"
><td>难易程度</td><td>非常容易</td><td>特别容易</td><td>比较容易</td><td>较容易</td><td>容易</td><td>相当容易</td></tr>
<tr style=
"background-color:#FF0000; font-size:18px"
><td>独立新技术</td><td>是</td><td>是</td><td>是</td><td>是</td><td>否</td><td>否</td></tr>
<tr style=
"background-color:#00FF00; font-size:36px"
><td>深度要求</td><td>很深</td><td>深一点</td><td>更深一点</td><td>深</td><td>较深</td><td>最深</td></tr>
<tr style=
"background-color:#FF0000; font-size:18px"
><td>是否学过</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>
</table>
</body>
</html>
|
红色的代码是嵌入在tr标签内，输入内联形式。
2. 页面嵌入
思想：在Head标签内定义选择器，美化当前页面。
例子：
| 1 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<style type=
"text/css"
>
div{
background
:
#00ff00
}
.Waring{
background
:
#ff0000
;
cursor
:
help
}
#OnePerson{
font-size
:
36px
;
color
:
#F0F
}
</style>
</head>
<body>
<div>半路</div>
<hr/>
<p class=
"Waring"
>薛凯琪</p>
<hr/>
<input id=
"OnePerson"
type=
"text"
value=
"一个人失忆"
/>
</body>
</html>
|
这回懂了上一节的遗留问题，其实看看就能知道，太简单了。
3. 外部引入
思想：单独建立一个Css文件，在Css文件中写Css代码样式，在HTML代码中通过Link标签导入，效果和页面嵌入一样。
例子：
Css文件名css1.css，文件代码：
p{ font-size:24px;color:#00ff00}
div{font-size:xx-large;background-color:#F0F;color:#FFF}
a:active{color:Green}
a:hover{cursor:move}
a:link{color:Red}
a:visited{color:#FF0}
HTML页面代码：
<html>
<head>
<link type="text/css"rel="Stylesheet" href="css1.css"/>
</head>
<body>
<div>如烟</div>
<hr/>
<p class="Waring">五月天</p>
<hr/>
<a href="www.baidu.com">百度首页</a>
</body>
</html>
Css文件代码和页面嵌入类型代码格式一样。注意link标签的引入。
按照我的进度，今天应该是CSS的最后一节了，下一节将介绍JavaScript，JavaScript在目前非常火，具有跨平台性，甚至因为JavaScript技术诞生出好多综合技术，相当了得，敬请期待下一节吧。