HTML调用CSS的四种方法 1. 链接单独CSS文件（外联样式（链接外部样式表）） 此方法是在HTML文档中加载CSS规则的最常用方法。通过此方法，所有Style规则将会被保存到后缀名为.CSS文本文件中。此文件常存储于Server端，且由你在HTML文件中直接链接它。此链接仅仅在HTML文件中单独的一行，如： <link rel=”stylesheet” type=”text/css” href=”https://www.cnblogs.com/Bokeyan/p/mystyles.css” media=”screen” /> 你需要确认在href中包含正确的CSS文件。如果CSS文件与HTML文件位于相同路径，则无需路径；反之，按照的方式指明路径。其中，media参数指明CSS规则在何时被使用。“screen”表明用于计算机屏幕。如果指明“print”，规则只有在页面打印时才会被使用。你可按照需要包含若干CSS文件。 链接单独CSS文件有许多优势。如果需要修改整个网站的一个Style，只需要在CSS文件中修改一次。如果需要修改整个网站的外观，则只需要升级一个文件。也许使用单独CSS文件的重要原因是为了访问加速。当用户第一次访问网站时，浏览器下载当前页面以及链接的CSS文件。当导航到另一网页时，浏览器只需要下载HTML页面，CSS文件因已被缓存故无需再次下载。这可以显著提升网页浏览速度。 2. HTML嵌入CSS（内联样式） <style media=”screen” type=”text/css”> Add style rules here </style> 所有CSS规则存放在style标签中。media素的值可以像上文所述的“screen”/“print”。 这种方法的缺点是每次用户访问网页时Style文件都需要重新下载，这将导致轻微慢的浏览体验。相对的，这种方法也有一些优点。因为CSS是HTML文档的一部分，整个页面只以一个文件的方式存在。在向他人发送邮件页面时或者HTML页面作为类似博客模板时，此方式将会被使用。另一个使用此方法的优点是动态内容。如果你通过数据库来生成页面内容，你同时也能产生动态Style。Blogger采用了这种方法——它动态地插入HTML标题颜色到嵌入在HTML中的CSS规则。这使得用户可以通过Admin页面改变颜色而非在Blog模板中修改CSS。 在<head>标签中加入<style>标签将CSS样式表写到该标签中。格式：.class{ 属性1 : 值； 属性2 : 值；属性3 : 值 ；}，值后跟分号。 <head> <meta charset=”utf-8″> <title>js测试</title> <!– 内部样式表开始 –> <style > .box{ background-color:#000; color:#fff; } <!– 内部样式表结束 –> </style> </head> <body> <div class=”box”> <h1>这是一个DIV</h1> </div> </body> 3. HTML标记加入内联CSS（行内样式） Style规则也可以直接加入HTML素中。你只需要在素中加入一个style参数，同时输入Style规则作为其值。下面是一个标题文本为红色、背景为黑色的示例： <h2 style=”color:red;background:black;”>This is a red heading with a black background</h2> 这是一种不好的方法，因为它将使网页膨胀，使得网页维护变得头疼。但是它在一些条件下，仍然有些用途。一个例子便是：假如你在使用一个你没有CSS文件权限时，对应的只需简单地在素中加入Style规则。 在素标签有个style属性，将样式写到该属性中。格式 style=” 属性1 : 值； 属性2 : 值；属性3 : 值；”多个属性用分号“ ; ”隔开。 <!– 在div 后跟style属性，等号后面写上css样式 –> <div style=”background-color:#000;color:#fff;”> <h1>这是一个DIV标签为</h1> </div> 4. 在CSS文件中导入CSS文件 另外一种有趣的在HTML页面加入CSS的方式是导入规则。这种方式让我们从CSS内部附加一个新的CSS文件。 为了在内部导入CSS文件，只需简单地用下面规则： @import “newstyles.css”; 只需将”newstyles”改成你的CSS文件名，同时确定包含正确的文件路径。记住，文件路径是相对于现在我们所在的CSS文件而言的，如果CSS文件是嵌入到HTML页面中，则路径是相对于HMTL文件而言。 让我们想像：我们有一个1000张页面的网站，并且我们在网站的每一个页面都链接到一个CSS文件。现在我们想像：我们需要加入第二个CSS文件到所有页面中。我们可以编辑这1000个页面，增加第二个CSS链接或者一个更好的方式即是在第一个文件中导入新的CSS文件。我们可以节约自己许多小时的工作量。
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/72798.html
