首页 > 软件开发 > HTML >

Html基础案例之结合css样式

来源:互联网 2023-03-16 19:11:29 317

结合css样式,编写Html案例N6Z办公区 - 实用经验教程分享!

工具/原料

  • 电脑
  • Notepad编辑器

方法/步骤

  • 1

    1、打开notepad文本编辑器,新建空白文档,并另存为2.html;N6Z办公区 - 实用经验教程分享!

    Html基础案例之结合css样式N6Z办公区 - 实用经验教程分享!

  • 2

    2、再次新建空白文档,并另存为main.css文件;N6Z办公区 - 实用经验教程分享!

    Html基础案例之结合css样式N6Z办公区 - 实用经验教程分享!

  • 3

    3、编写main.cs文件,输入内容:N6Z办公区 - 实用经验教程分享!

    p{color:red;font-size:40};N6Z办公区 - 实用经验教程分享!

    保存该文档;N6Z办公区 - 实用经验教程分享!

  • 4

    4、在test.html输入基本的内容:N6Z办公区 - 实用经验教程分享!

    html>N6Z办公区 - 实用经验教程分享!

    title>测试/title>N6Z办公区 - 实用经验教程分享!

    body>N6Z办公区 - 实用经验教程分享!

    加油!/N6Z办公区 - 实用经验教程分享!

    /body>N6Z办公区 - 实用经验教程分享!

    /html>N6Z办公区 - 实用经验教程分享!

    5、保存后运行,得到输出结果;N6Z办公区 - 实用经验教程分享!

    Html基础案例之结合css样式N6Z办公区 - 实用经验教程分享!

  • 5

    接下来测试按钮事件:N6Z办公区 - 实用经验教程分享!

    6、输入内容:N6Z办公区 - 实用经验教程分享!

    html>N6Z办公区 - 实用经验教程分享!

    title>测试/title>N6Z办公区 - 实用经验教程分享!

    body>N6Z办公区 - 实用经验教程分享!

    script type="text/javascript">N6Z办公区 - 实用经验教程分享!

    function change(){N6Z办公区 - 实用经验教程分享!

    document.getElementById("myHeader_1").innerHTML="you have clicked";N6Z办公区 - 实用经验教程分享!

    }N6Z办公区 - 实用经验教程分享!

    /script>N6Z办公区 - 实用经验教程分享!

    N6Z办公区 - 实用经验教程分享!

    h1 id="myHeader_1">Hello/h1>N6Z办公区 - 实用经验教程分享!

    努力,坚持/N6Z办公区 - 实用经验教程分享!

    button onclick="change()">点击/button>N6Z办公区 - 实用经验教程分享!

    /body>N6Z办公区 - 实用经验教程分享!

    /html>N6Z办公区 - 实用经验教程分享!

    7、保存后运行,得到结果如下图所示;N6Z办公区 - 实用经验教程分享!

    Html基础案例之结合css样式N6Z办公区 - 实用经验教程分享!

  • 6

    8、点击按钮,得到如下图结果;文字发生了变化;N6Z办公区 - 实用经验教程分享!

    Html基础案例之结合css样式N6Z办公区 - 实用经验教程分享!

  • 7

    接下来,引用样式文件;N6Z办公区 - 实用经验教程分享!

    9、在test.html中加入语句:N6Z办公区 - 实用经验教程分享!

    link rel="stylesheet" type="text/css" href="main.css"/>;N6Z办公区 - 实用经验教程分享!

    即最终代码为:N6Z办公区 - 实用经验教程分享!

    html>N6Z办公区 - 实用经验教程分享!

    title>测试/title>N6Z办公区 - 实用经验教程分享!

    body>N6Z办公区 - 实用经验教程分享!

    link rel="stylesheet" type="text/css" href="main.css"/>N6Z办公区 - 实用经验教程分享!

    N6Z办公区 - 实用经验教程分享!

    script type="text/javascript">N6Z办公区 - 实用经验教程分享!

    function change(){N6Z办公区 - 实用经验教程分享!

    document.getElementById("myHeader_1").innerHTML="you have clicked";N6Z办公区 - 实用经验教程分享!

    }N6Z办公区 - 实用经验教程分享!

    /script>N6Z办公区 - 实用经验教程分享!

    N6Z办公区 - 实用经验教程分享!

    h1 id="myHeader_1">Hello/h1>N6Z办公区 - 实用经验教程分享!

    努力,坚持/N6Z办公区 - 实用经验教程分享!

    button onclick="change()">点击/button>N6Z办公区 - 实用经验教程分享!

    /body>N6Z办公区 - 实用经验教程分享!

    /html>N6Z办公区 - 实用经验教程分享!

    10、保存并运行;如下图所示,p对应的标签文字属性发生了变化。N6Z办公区 - 实用经验教程分享!

    Html基础案例之结合css样式N6Z办公区 - 实用经验教程分享!

  • 7该信息未经授权抓取自百度经验
  • 8

    综上所述,通过引用css样式,可以对各种样式进行复用。N6Z办公区 - 实用经验教程分享!

  • 注意事项

    • 样式编写合适和引用正确

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!N6Z办公区 - 实用经验教程分享!


    标签: CSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码