HTML与CSS链接方法详解：从基础到实践

如何将css与html连接起来

link在html中链接css？

1.使用link标签导入

使用link标签导入外部样式表文件：

linkhref="Jumin001.css"rel="stylesheet"type="text/css"/

各属性说明：

href属性定义了外部样式表文件的地址，可以是相对地址，也可以是绝对地址。

rel属性定义关联文档，这里表示关联文档是样式表。

type属性定义导入文件的类型。
与style元素一样，text/css表示CSS文本文件。

一般来说，定义link标签时，需要定义三个基本属性，其中href是必须具备的属性。

您还可以将title属性添加到link元素来定义可选样式表的标题。
也就是说，当Web文档导入多个样式表时，您可以选择应用哪个样式表文件。
通过title属性的值。

外部样式是CSS应用程序的最佳解决方案。
一个样式表文件可以被多个网页文件引用，一个网页文件可以通过重复使用link元素导入不同的样式表文件来导入多个样式表。
。

2.使用@import关键字导入

在style标签中使用@import关键字导入外部样式表文件：

styletype="text/css"

@importurl("001.css");

/style

@import关键字后，使用url()函数包含特定的外部sheet文件的地址风格。

比较

两种样式表导入方式的比较：

link是一个HTML标签，而@import是由CSS提供的。

页面加载时，链接会同时加载，@import引用的CSS会等到页面加载完成后才加载。
Pannazhi

@import只能被IE5以上版本识别，而且链接是HTML标签，所以不存在兼容性问题。

链接样式的样式权重大于@import权重。

一般建议使用链接导入样式表，@import可以作为附加方法。

1首先在软件中创建一个站点，并在站点中新建一个CSS文件夹和html。
文档。
（您可以点击下方引用您的经验并了解如何创建网站）

2.点击右上角的【CSS设计器】，点击下方的【+】号，然后选择【创建新站点.CSS文件】。

3、在设计窗口中，点击【浏览】]按钮。

4.然后选择在站点中创建的名为JiaoqinCSS的文件夹，然后输入您要创建的CSS的名称（必须是英文），然后单击[保存]。
。

5、然后将“添加为”设置为“链接”，点击“确定”按钮，添加后即可在右侧站点CSS文件夹中看到新建的CSS样式。

7.在左侧的[head]标签中，在顶部选项卡标签中还可以看到链接到链接样式表的附加代码行。
简单网页查看CSS样式表是否链接正确打开HTML网页编辑页面，在[body]标签中输入一个div。
如图所示如下：

9.然后在顶部选项卡标签中选择刚刚创建的CSS样式表，在样式表中编写样式，将其命名为[aaa]并保存样式表[热键Ctrl+S]。

10.然后返回html编辑页面，在div标签中引入类，输入刚才写的样式名称【aaa】并保存网页【快捷键Ctrl+S】。

11.点击顶部的设计按钮即可实时查看效果。

12.也可以按郑三两F12热键直接用浏览器打开看看实际效果。
这证明我们的CSS链接到HTML是没有问题的。

1.首先打开DreamweaverCC2018软件新建一个HTML文件，点击右上角的CSS设计器，然后点击下面的加号，然后选择创建CSS文件。
新的CSS文件：

2.在设计窗口中，单击“浏览”按钮。

3.然后选择站点创建CSS文件夹，然后输入创建的CSS名称，点击保存插件文件：

4.作为链接并单击“确定”按钮：

5.添加完成后，可以在右侧站点CSS文件夹中看到新创建的CSS样式表文件。
错误：

6.目前，在HTML文件的head标签中，有一行额外的代码链接到CSS文本文件。
您还可以在顶部选项卡标签中看到链接的样式表：

7。
然后，在HTML网页编辑页面，在body标签中输入一个div：

8。
然后在顶部tab标签中选择刚刚创建的CSS样式表，并在样式表中写入样式，命名为aaa并按热键Ctrl+S保存样式表：

9最后返回俏禅HTML编辑页面，在div标签中引入class，输入刚刚写的样式名aaa并保存。
网页：

10.最后点击顶部的设计按钮即可实时查看效果。
至此，CSS文件链接成功。
连接：

1.当我们不引入外部CSS样式表的时候，一般都是用HTML来编写样式，智研辉有两种方式让我们通用，第一种：

head

metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/

标题时间元素/标题

/head

正文

divstyle="高度：300px；宽度：500px；背景：#999；"/div

/body

2.第二种写法：

head

metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/

titletime/标题元素

样式

.all{

高度:300px;

宽度:500px;

背景：#999;}

/风格

/头

正文

3.创建CSS样式表文件

4.将其存储在css文件夹中

5.将链接代码写入html文件中。
代码，代码如下：

linkrel="stylesheet"type="text/css"href="css/index.css"/

6.稍后的HTML文件我们可以在源码中看到我们连接的CSS文件，连接成功。