首页 > 软件开发 > HTML >

如何在html结构中引入css样式

来源:互联网 2023-03-16 19:11:18 416

css是层叠样式列表,我们看到的网页样式都是通过css来呈现出来的,所以学好css对于一个前端工程师来说是非常重要的。现在开始,带一些新手朋友来引入css并且简单运用css。af9办公区 - 实用经验教程分享!

工具/原料

  • 电脑
  • 前端编辑器(Dreamweaver或者sublime)

引入CSS/添加CSS标签

  • 1

    一、CSS介绍:给html加各种各样的样式----html结构和css样式样式分离---便于维护更新。af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • 2

    二、行内样式表:临时做测试用,每一个标签都有style属性,格式:标签 style=”属性名:属性值;”> 内容 /标签>。行内样式,只能应用当前文档中的当前对应的html标签加样式,或者里面包含的标签加该样式。af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • 2相关内容未经许可获取自百度经验
  • 3

    三、 内嵌样式表: 常用的一种格式:在head标签中输入 xhtml,style type=”text/css”>选择器{属性名:属性值; }/style>。内嵌样式:在当前的文档可以使用该样式,需要的时候可以使用。af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • 4

    四、外部样式表 常用的一种,格式:link rel=”stylesheet”href=”外部样式表文件xx.css”/>保存的时候扩展名为.css文件。第一步,建立一个css页面,保存为扩展名为.css文件。af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • 5

    五、在不同的页面引入 link rel=”stylesheet”href=”外部css文件的地址 ”/>。af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • 6

    六、导入样式表:管理css样式,格式:@import url(另外一个css样式)。注意 @import是css样式标签,所以必须放到css文件中,必须放到css样式表的最上面 例如:af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • CSS常用属性

  • 1

    一、文本属性。af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • 2

    二、背景属性。af9办公区 - 实用经验教程分享!

    如何在html结构中引入css样式af9办公区 - 实用经验教程分享!

  • 注意事项

    • 行内样式,只能应用当前文档中的当前对应的html标签加样式,或者里面包含的标签加该样式。
    • 内嵌样式:在当前的文档可以使用该样式,需要的时候可以使用。

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


    标签: CSSHTML网页设计

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