HTML中CSS引入方法解析

在html中导入css

如何在html中引用css

1.在html标签中直接插入css样式

2.html使用内置样式

1直接在HTML标签中插入css样式部分

Idivcss试用内容我是

效果如下图

1.jpg

2在head部分，插入htmlhead样式声明

代码如下：

!--

.ceshi{font-size:14px;color:#FF0000;}/*这里是配置CSS的样式内容*/

--

我我是divcss测试内容

效果和上面一样。
3.使用@import引用外部CSS文件

HTML代码：

css引用方法示例

@importurl.css);/*用@import导入css*/

--

我是DVCS测试内容

这里是Wcss引用的样式内容.css代码文件。
i{字体大小：14px;颜色：#FF0000;}

4.使用link调用外部css文件

开销调用外部wcss.css文件，用于实现html引用css文件

该方法不需要style标签，直接引用外部样式通过将样式链接到外部css请参阅样式。

示例：

h1style="color:red;"样式属性/h1实现

p?style="font-size:14px;color:green"直接在HTML标签中编写页面时不建议使用styles/p

，但在测试时可以使用。

例如：

!DOCTYPE

html

self

metacharset="utf-8"/

heading内联样式/heading

/head

body

！--使用内联样式引入CSS--

pstyle="color:red;font-size:30px;"我是p标签/p

/body

/html

2style标签写在head标签里面。

示例：

self

styletype="text/css"

h3{

颜色：红色;

/style

/self

例如：

!DOCTYPE

html

self

metacharset="utf-8"/

标题内部sheet/title

!--使用内部sheet引入CSS--

styletype="text/css"

div{

背景：绿色；

}

/style

/self

body

diviDIV/div

/body

/html

3是外部样式工作表

CSS代码以扩展名保存样式表中的css

扩展名为.css的HTML文件查看样式表有两种方式：链接式导入式。
语法：

2.导入样式

styletype="text/css"

@importurl("css文件路径");

/style

对于示例：

!DOCTYPE

html

self

metacharset="utf-8"/

标题外部样式表/标题

！--链接类型：推荐--

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

！--导入。
--

styletype="text/css"

@importurl("css/style.css");

/style

身体

ol

li1111/li

li2222/li

/ol

/html

连接和导入的区别

链接

是1。
XHTML

2首先将CSS文件加载到页面中

@import

1是CSS2.1

2HTML首先构造为加载CSS文件。
4.CSS优先级

1。
样式优先级>例如：

比较内联样式与内联样式的优先级：

!DOCTYPE

html

self

metacharset="utf-8"/

!--内部示例样式表格--

styletype="text/css"

p{

颜色：蓝色；

}

/样式

/头部

正文

!--inline--

pstyle="color:red;"我在文章/页面

/html

运行浏览器输出：

摘要：内联样式优先于内部样式表。

比较内部样式表和外部样式表之间的优先级：

self

metacharset="utf-8"/

标头内部样式表和外部样式表/标头优先级

!--内部样式工作表-

styletype="text/css"

p{

颜色：蓝色;

}

/head

body

div我是div/div

ol

li1111/li

li2222/li

/ol

/html

浏览器运行结果：

b．外部样式表覆盖内部样式

!DOCTYPE

html

self

metacharset="utf-8"/

!--外部样式纸--

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

！--内饰风格工作表--

styletype="text/css"

p{

color:blue;

}

/style

/head

body

div我是div/div

ol

li1111/li

li2222/li

/ol

/html

总结：内部样式表和外部样式表采用就近原则：谁写在下面谁就获胜。

注意：导入和链接类型首先使用邻近原则。

2.选择器优先级

优先级：ID选择器类选择器标签选择器

!DOCTYPE

html

Head

元字符集="utf-8"/

标题选择器/标题优先级

styletype="text/css"

#a{

颜色：绿色；

.b{

颜色：黄色；

/self

body

h2111/h2!--红色--

h2id="a"class="b"222/h2!--绿色--

h2class="b"333/h2!--黄色--

/html

浏览器运行结果：

link在html中链接css？

1.使用链接标签导入

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

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

各属性说明：

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

rel属性定义关联文档，表明关联文档是样式表。

type属性与style元素一样，代表CSS文本文件。

一般来说，定义链接标签时，需要定义三个基本属性，其中href是必须设置的属性。

您还可以通过向链接元素添加标题属性来设置可选样式表的标题。
这意味着当您从Web文档导入多个样式表时，您可以选择要应用哪个样式表文件。
通过标题属性值。

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

2.使用@import关键字导入

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

styletype="text/css"

@importurl("001.css");

/style

在@import关键字之后使用url()函数。
特定外部样式表文件的地址。

比较

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

link是HTML标签，@import来自CSS。

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

@import仅在IE5及以上版本中被识别，并且链接是HTML标签，因此不存在兼容性问题。

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

导入样式表时一般建议使用链接，但也可以使用@import作为辅助方法。

1.首先，在软件中创建一个站点，并在站点中新建一个CSS文件夹和html。
文档。
（点击下面查看如何创建网站。
）

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

3.单击创建窗口中的[浏览]按钮。

4.然后选择你网站上创建的名为JiaoqinCSS的文件夹，然后输入你要创建的CSS的名称（必须是英文），然后点击【保存】。

5.接下来，设置添加到[链接]并单击[确认]按钮。

6.添加完成后，您可以在右侧站点的CSS文件夹中查看新创建的CSS样式表文件。

7.左侧的[head]标记包含链接到CSS文件的附加代码行。
链接的样式表也可以在顶部选项卡标签中看到。

8.接下来，创建一个简单的网页来验证您的CSS样式表是否已成功链接。
打开HTML网页编辑页面，在[body]标签中输入div。
如下：

9.然后在顶部选项卡标签中选择刚刚创建的CSS样式表，并在样式表中写入样式。
将名称另存为[aaa]，然后按[快捷键Ctrl+S]。

10.然后回到HTML编辑页面，在div标签中引入一个类，输入刚刚创建的样式名称【aaa】，保存网页【快捷键Ctrl+S】。

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

12.您也可以按快捷键郑三两F12直接在浏览器中打开查看实际效果。
这证明CSS链接到HTML没有问题。

1.首先，打开DreamweaverCC2018软件新建一个html文件，点击右上角的CSSDesigner，然后点击下面的加号，然后点击新建CSS文件：

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

3.然后选择要创建CSS文件夹的站点，然后输入生成的CSS的名称并单击保存插件文件。

4.将其设置为链接并单击“确定”按钮：

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

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

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

8。
然后在顶部选项卡标签中选择刚刚创建的CSS样式表，在样式表中写入样式，将其命名为aaa并按键。
要保存样式表，请按快捷键Ctrl+S。

9.最后，回到HTML编辑俏禅页面，在div标签中输入class，输入刚刚创建的样式名称，然后保存。
网页：

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

1.当我们不引入外部CSS样式表的时候，我们通常都是在html中编写样式，智彦辉有两种方式让我们通用：第一种是：

头部

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

titletime元素/标题

/头

正文

divstyle="height: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文件了，链接成功。