在讲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 |
|
红色的代码是嵌入在tr标签内,输入内联形式。
2. 页面嵌入
思想:在Head标签内定义选择器,美化当前页面。
例子:
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
这回懂了上一节的遗留问题,其实看看就能知道,太简单了。
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技术诞生出好多综合技术,相当了得,敬请期待下一节吧。