连系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样式,可以对各类样式进行复用。
注重事项
- 样式编写合适和引用准确







