1、在图像页面中,我们可以看到样式中的样式列表以及显示的渲染图。
2、选择样式中的所有CSS样式,然后复制或剪切。
3、然后ctrl+N创建一个新的CSS样式文件,如图所示,然后创建。
4、在创建的css样式文件中,粘贴刚刚复制到此处的文件。
5、导出时,您需要将其放在与上一个网页相同的文件夹位置。您可以创建一个新的css文件夹以便于导入。
6、然后返回到html文件,删除所有以前的样式,然后输入链接链接标记,链接以前保存的CSS样式,然后保存。
7、链接完成后,在浏览器中预览它以查看链接是否成功。
html引用css方法如下1、直接在HTML标签中内嵌css样式
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推荐此方法
方法说明:
1、直接在html标签元素内嵌入css样式
我是div css测试内容
效果如下图
1.jpg
2、在html头部head部分内style声明插入
代码如下:
<!--
.ceshi {font-size:14pxcolor:#FF0000}/*这里是设置CSS的样式内容*/
-->
我是div css测试内容
效果同上。
3、使用@import引用外部CSS文件方法
HTML代码:
css引用方法实例
<!--
@import url(wcss.css)/*这里是通过@import引用CSS的样式内容*/
-->
我是div css测试内容
Wcss.css文件内代码.ceshi {font-size:14pxcolor:#FF0000}
4、使用link来调用外部的css文件
在head放置
来调用外部的wcss.css文件来实现html引用css文件
此方法就不需要style标签,而是直接通过link一个样式来引用外部样式,一般推荐使用link来引用外部的css样式方法。
1,直接在html标签元素内嵌入css样式,如<div style="font-size:14pxcolor:#FF0000">2,在html头部head部分内style声明插入代码如下:
<style type="text/css">
<!-- 这里是设置CSS的样式内容*/ -->
</style>
3,使用@import引用外部CSS文件方法
<style type="text/css">
<!-- @import url(wacss.css)/*这里是通过@import引用CSS的样式内容,必须要有wacss.css这个文件*/ -->
</style>
4、使用link来调用外部的css文件
在head放置<link rel="stylesheet" href="wacss.css" type="text/css" />来调用外部的wacss.css文件来实现html引用css文件
第三种很少用到,实际的开发中常用的是1跟4,具体用哪种看你自己的需要