Html基础案例之结合css样式 _电脑

连系css样式，编写Html案例

需要这些哦
电脑
Notepad编纂器
方式/
11、打开notepad文本编纂器，新建空白文档，并另存为2.html；

文章插图

22、再次新建空白文档，并另存为main.css文件；

文章插图

33、编写main.cs文件，输入内容：
p{color:red;font-size:40}；
保留该文档；

44、在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、保留后运行，获得成果如下图所示；

文章插图

68、点击按钮，获得如下图成果；文字发生了转变；

文章插图

7接下来，引用样式文件；
9、在test.html中插手语句：
<link rel="stylesheet" type="text/css" href=https://vvvtt.com/article/"main.css"/>；
即最终代码为：
<html>
<title>测试</title>
<body>
<link rel="stylesheet" type="text/css" href=https://vvvtt.com/article/"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对应的标签文字属性发生了转变。