Html基础案例之结合css样式
连系css样式，编写Html案例
东西/原料
- 电脑
- Notepad编纂器
方式/步调
- 1
1、打开notepad文本编纂器，新建空白文档，并另存为2.html；
- 2
2、再次新建空白文档，并另存为main.css文件；
- 3
3、编写main.cs文件，输入内容：
p{color:red;font-size:40}；
保留该文档；
- 4
4、在test.html输入根基的内容：
<html>
<title>测试</title>
<body>
<p>加油！</p>
</body>
</html>
5、保留后运行，获得输出成果；
- 5
接下来测试按钮事务：
6、输入内容：
<html>
<title>测试</title>
<body>
<script type="text/javascript">
function change(){
document.getElementById("myHeader_1").innerHTML="you have clicked";
}
</script>
<h1 id="myHeader_1">Hello</h1>
<p>尽力，对峙</p>
<button onclick="change()">点击</button>
</body>
</html>
7、保留后运行，获得成果如下图所示；
- 6
8、点击按钮，获得如下图成果；文字发生了转变；
- 7
接下来，引用样式文件；
9、在test.html中插手语句：
<link rel="stylesheet" type="text/css" href="main.css"/>；
即最终代码为：
<html>
<title>测试</title>
<body>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script type="text/javascript">
function change(){
document.getElementById("myHeader_1").innerHTML="you have clicked";
}
</script>
<h1 id="myHeader_1">Hello</h1>
<p>尽力，对峙</p>
<button onclick="change()">点击</button>
</body>
</html>
10、保留并运行；如下图所示，p对应的标签文字属性发生了转变。
- 8
综上所述，经由过程引用css样式，可以对各类样式进行复用。
注重事项
- 样式编写合适和引用准确
- 发表于 2018-06-22 00:00
- 阅读 ( 648 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章