当前位置：网站首页 > 创业 > 正文

Html基础案例之结合css样式

张子豪 2025-10-11 21:59 1

连系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样式，可以对各类样式进行复用。