创建外部样式表
样式表的作⽤是控制⽹页样式，只有创建样式表，并把它应⽤到⽹页中，才能发挥样式表的作⽤。
创建外部样式表
外部样式表，是在⽹页外部的样式表⽂件中定义的样式。由于这些样式并不是HTML⽂档的⼀部分，⽽是在HTML⽂档的外部独⽴存在，故称外部样式表。
样式表⽂件是纯⽂本⽂件，可以使⽤任何⽂本编辑器来编辑，这⾥使⽤Windows⾃带的记事本，来创建外部样式表。步骤如下：
1）在Windows系统中，点击开始→所有程序→附件→记事本，打开记事本。并在记事本中编写CSS代码，可以根据需要在CSS代码添加注释。如图 1‑7 所⽰：
图1-7 使⽤记事本创建样式表
2）点击菜单栏中的⽂件→保存命令，或直接在键盘上按Ctrl + s，来保存⽂件。
保存⽂件时，保存类型选择“所有⽂件”；编码，选UTF-8；⽂件名可以随意填写，但⽂件的后缀名必须是 .
css，表明这⼀个层叠样式表。再选择保存位置，建议为⽹站创建 css ⽬录，来专门存放样式表⽂件。如图 1‑8 所⽰：
图1-8 保存样式表⽂件
说明：
可以使⽤你喜欢的任何名称为样式表⽂件命名，如果⽹站只有⼀个样式表⽂件，通常会命名为 style.css 或 styles.css。
更⼤的⽹站通常会拥有多个样式表⽂件，reset.css、base.css、global.css 和main.css 是常见的样式表名称，它们通常包含应⽤于⽹站⼤多数页⾯的样式规则。
⽹站制作者通常会为某些区块创建特有的 CSS ⽂件，来作为对基本样式的补充。如，对于⼀个商业⽹站，products.css可能是为产品相关页⾯准备的样式表。
创建了样式表之后，需要将它加载到HTML页⾯中，从⽽为内容应⽤这些样式规则。可以使⽤链接或导⼊的⽅式，来为HTML页⾯加载外部样式表。
链接外部样式表
在HTML⽂档头部，使⽤ link 元素来链接外部的CSS⽂件。link 元素为空元素，它只有开始标签，没有结束标签，要在开始标签的结尾处加上 / 来结束该元素。
在 link 元素中，通过rel 属性来定义本HTML⽂档与被链接⽂档之间的关系，rel = "stylesheet" 表明引⼊的⽂件是样式表；通过href 属性定义样式表⽂件的URL，可以使⽤相对路径，也可以使⽤相对路径，相对路径是相对于本HTML⽂档⽽⾔的。如：
1. <!DOCTYPE HTML>
switch是什么意思 sm
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>链接样式
6. <link rel="stylesheet"href="style.css"/>
7. </head>
8. <body>
淄博少儿编程培训机构9. </body>
10. </html>selenium ide教程
上述代码表⽰，为本⽂档引⼊⽂件名称为 style.css 的外部样式表，该样式表⽂件与本HTML⽂档位于相同⽬录下。
⼀个页⾯可以包含多个 link 元素，浏览器会加载多个样式表，合并它们的规则，将其全部应⽤于页⾯。但是，加载样式表会影响页⾯的加载速度。
导⼊外部样式表
也可以在HTML⽂档头部的 style 元素中，使⽤ @import 指令导⼊⼀个外部样式表⽂件。如：
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>导⼊样式
invalidated6. <style>
7. @import url(style.css);
8. </style>
9. </head>
10. <body>
11. </body>
jquery下载文件请求12. </html>
这种⽅式是通过 @import 指令，把外部样式导⼊到当前页⾯。⼀个⽂档中，也可以包含多个，来导⼊多个样式表。
由于 @import 指令效率低下，不但会增加额外的请求次数，还会导致不可预料的问题，故不推荐使⽤。因此，对于⼤多数情况，还是推荐使⽤链接外部样式表的⽅式。
外部样式表⾮常适合给⽹站上的⼤多数页⾯或者所有页⾯设置⼀致的外观。可以在⼀个外部样式表中
js怎么分割字符串定义全部样式，并让⽹站上的每个页⾯都加载这个外部样式表，来确保每个页⾯都有相同的设置。
对于有很多页⾯的⽹站，外部样式表能够做到CSS代码最⼤限度的重⽤。⽇后，如果要改变页⾯的外观，只需编辑CSS⽂件，⽽⽆需修改HTML⽂件，真正实现表现和内容的分离。
使⽤外部样式表的另⼀个好处是，⼀旦浏览器在某个页⾯加载了它，在随后浏览引⽤它的页⾯时，通常⽆需再向Web 服务器请求该⽂件。浏览器会将它保存到缓存中，也就是保存到⽤户的计算机⾥，并使⽤这个版本的⽂件。这样做可以提供页⾯的加载速度。
如果随后对样式表作了修改，再将它传到Web 服务器，浏览器就会下载更新后的⽂件，⽽不是使⽤缓存的⽂件。
关于作者
歪脖先⽣，⼗五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《》、《》、《》、《》、《》、《》，并全部在上开源。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。