首页 > 软件开发 > CSS >

html中如何导入css

来源:互联网 2023-03-16 19:10:54 141

在html页面中,主要使用link标签导入css样式。下面小编举例讲解html中如何导入css。pqc办公区 - 实用经验教程分享!

html中如何导入csspqc办公区 - 实用经验教程分享!

工具/原料

  • html css
  • 代码编辑器:Dreamweaver CS5

方法/步骤

  • 1

    新建一个html文件,命名为test.html,用于讲解html中如何导入css。pqc办公区 - 实用经验教程分享!

    html中如何导入csspqc办公区 - 实用经验教程分享!

  • 2

    在test.html文件内,使用div创建一个模块,下面将对该div进行css样式的定义。pqc办公区 - 实用经验教程分享!

    html中如何导入csspqc办公区 - 实用经验教程分享!

  • 3

    在test.html文件内,设置div的class属性为mydiv,主要用于css文件对该类名进行样式定义。pqc办公区 - 实用经验教程分享!

    html中如何导入csspqc办公区 - 实用经验教程分享!

  • 4

    新建一个css文件夹,在文件夹内创建一个css文件,命名为test.css,用于编写css样式。pqc办公区 - 实用经验教程分享!

    html中如何导入csspqc办公区 - 实用经验教程分享!

  • 5

    在test.css文件内,使用div的类名进行样式定义,设置div的宽度、高度均为200px,背景颜色为黄色。pqc办公区 - 实用经验教程分享!

    html中如何导入csspqc办公区 - 实用经验教程分享!

  • 6

    在test.html文件内,使用link标签导入test.css样式文件,href为css路径。pqc办公区 - 实用经验教程分享!

    html中如何导入csspqc办公区 - 实用经验教程分享!

  • 7

    在浏览器打开test.html文件,查看实现的效果。

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

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

    html中如何导入csspqc办公区 - 实用经验教程分享!

  • 7本页面未经许可获取自百度经验
  • 注意事项

    • 导入css的link标签不仅支持相对路径,也支持绝对路径。

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


    标签: CSS

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