热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

将内联样式移动到外部CSS

如何解决《将内联样式移动到外部CSS》经验,为你挑选了1个好方法。

我有一个学校项目,要求我不要使用内联样式或嵌入式样式。我已经完成了整个工作,并弄清楚了,所以现在我需要将内容移动到外部CSS。我什至将其上传到我的学校CWP页面,但无法正常工作。



1> EGC..:

这有几个部分:

    首先,创建一个外部样式表('style.css'-或其他)

    您必须在HTML文档的开头引用此.css文件

    您必须准确地将所有内联样式引用/移动到外部.css文件


首先,创建一个外部样式表('style.css'-或其他)

您可以通过创建新的记事本解决方案并点击“另存为”来做到这一点。确保使用扩展名“ .css”保存它。如果不确定如何执行此操作,请参考此处:另存为其他文件类型记事本


您必须在HTML文档的开头引用此.css文件

可以这样完成:



  




有关更多信息,请参见此处:参考外部样式表。

请注意,如果'style.css'文件与.html文件不在同一文件夹中,并且位于名为“ Folder”的文件夹中,则需要像这样引用它:


您必须准确地将所有内联样式引用/移动到外部.css文件中。

您可以在标签中添加标识符,即可以在任何标签中添加“ id”或“ class”属性,这将有助于在CSS中引用您的项目。

您可以像这样在标签中添加一个id:
您可以像这样在标签 中添加一个类:

您可以像这样在css中引用一个id:#lblMyLabel { font-weight:bold; }
您可以像这样在css 中引用一个类:.lblMyLabel { font-weight:bold; }

有关如何引用ID的更多示例参见此处:CSS ID选择器
有关如何引用类的更多示例,请参见此处:CSS类选择器

本文还对转换进行了很好的概述:如何添加CSS


以下是转换前后的示例,供您参考:


之前



  





推荐阅读
  • 本文介绍如何在Windows 7操作系统中配置支持HTML5多点触控功能的设备,同时探讨了HTML5在开发Windows桌面应用程序中的可能性。 ... [详细]
  • Vue 中实现 ECharts 组件的动态刷新与分页
    本文介绍了如何在 Vue 项目中使用 ECharts 组件实现数据的动态刷新和分页显示。通过合理的数据处理和页面逻辑设计,提升用户体验。 ... [详细]
  • 本文介绍了在使用SQL Server的数据库邮件功能时,如何处理因文件附件或查询结果过大而导致的错误,并提供了解决方案。 ... [详细]
  • 使用Python模拟登录教务系统抓取成绩并分析存储
    本文详细介绍如何使用Python编程语言模拟登录学校教务系统,抓取学生的成绩信息,并进行数据分析和可视化处理,最终将数据存储到MySQL数据库中。 ... [详细]
  • 如何清空Layui树结构
    本文将详细介绍如何使用Layui框架清空树形结构,包括创建树、添加节点以及实现清空功能的具体步骤。通过本文,您将能够掌握Layui树的管理技巧。 ... [详细]
  • Hibernate入门指南:单表数据库操作详解
    本文介绍了Hibernate作为全面的ORM框架的基础知识,并详细讲解了在MyEclipse环境中配置Hibernate以及进行基本的数据库单表操作的方法,包括增删改查等常见操作。 ... [详细]
  • HTML5 拖拽功能实现
    本文通过一个简单的示例,展示了如何利用 HTML5 的拖放 API 实现元素之间的拖拽功能。示例包括 HTML 结构、CSS 样式以及 JavaScript 逻辑,旨在帮助开发者快速理解和应用拖拽技术。 ... [详细]
  • 浏览器、中间件与服务器的交互机制
    本文详细探讨了浏览器、中间件和服务器之间的交互过程,特别是HTTP请求的完整流程,包括DNS解析、TCP连接建立及数据传输等关键步骤。 ... [详细]
  • Sass 是一种 CSS 的预处理器,通过使用变量、嵌套、继承等高级功能,使得 CSS 的编写更加灵活和高效。本文将介绍 Sass 的基本语法及其安装使用方法。 ... [详细]
  • TunnelWarfareTimeLimit:1000MS MemoryLimit:131072KTotalSubmissions:7307 ... [详细]
  • 电子与正电子的相互作用
    本文探讨了电子与正电子之间的基本物理特性及其在现代物理学中的应用,包括它们的产生、湮灭过程以及在粒子加速器和宇宙射线中的表现。 ... [详细]
  • 查找数组中的重复元素
    问题描述:给定一个长度为n的数组,其中所有元素值位于0至n-1之间。数组中存在一些重复的数字,但具体哪些数字重复以及重复了多少次未知。本文章将探讨如何高效地找到数组中的任一重复数字。 ... [详细]
  • 本文详细探讨Java中Scanner类的两个重要方法——nextInt()和nextDouble(),并通过实例代码演示如何使用这些方法来处理用户输入。 ... [详细]
  • 本文介绍了FTP(文件传输协议)的基础知识,包括其定义、如何通过TCP建立控制和数据连接,以及主动模式与被动模式的区别。FTP作为一种重要的文件传输协议,在互联网数据交换中扮演着关键角色。 ... [详细]
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
author-avatar
拍友2502881913
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有