css怎么嵌入到html，在线html代码运行器

编程之家2026-05-16905次浏览

大家好，如果您还对css怎么嵌入到html不太了解，没有关系，今天就由本站为大家分享css怎么嵌入到html的知识，包括在线html代码运行器的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

HTML怎么把CSS样式插入到页面

html引用css方法如下：

1、直接在div中使用css样式制作div+css网页

2、html中使用style自带式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件推荐此方法

解html引用css方法的例子

1、直接在html标签元素内嵌入css样式，如<div style="font-size:14px; color:#FF0000;">我是div css测试内容-支持</div>效果如下图

2、在html头部head部分内style声明插入代码如下：

<styletype="text/css">

<!--

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

-->

</style>具体方法如下图：

3、使用@import引用外部CSS文件方法

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

<htmlxmlns="

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>css引用方法实例-测试实例</title>

<styletype="text/css">

<!--

@importurl(wcss.css);/*这里是通过@import引用CSS的样式内容*/

-->

</style>

</head>

<body>

<divclass="ceshi">我是divcss测试内容支持</div>

</body>

</html>Wcss.css文件内代码.ceshi{font-size:14px; color:#FF0000;}

效果如下图：

可以看出使用此方法和使用自带式引用css样式表方法有相同处，都是需要在html的head内使用style标签引用外部css。

4、使用link来调用外部的css文件

在head放置<link rel="stylesheet" rel="external nofollow" href="wcss.css" type="text/css"/>来调用外部的wcss.css文件来实现html引用css文件

详细如下图

此方法就不需要style标签，而是直接通过link一个样式来引用外部样式

一般推荐使用link来引用外部的css样式方法。

怎么把css放到html中

有3种方式可以将css定义的样式加到HTML里。

1.外联

在HTML里加一个超连结连到外在的CSS文档，这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开，只需要在一个CSS文档内定义好网页的外观风格，所有参考连结到此 CSS档的网页，便会依照指示，反应出定义好的风格。

它的写法是：<HTML>

<HEAD>

</HEAD>

2.嵌入

在 HTML的<HEAD></HEAD>标签间，加一段CSS定义

这个方法适用于指定某个网页，除了展现外在的 CSS档定义好的网页风格外，同时还要展现本身HTML内定义的CSS样式。

如果内在定义的CSS定义与外在连结的CSS定义相冲突的话，网页的样式将以内在定义的CSS定义为主。

它的写法是：<HTML>

<HEAD>

div{

font: 12pt

font: 16pt

font-weight: bold;

color: green

}

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

3.内联

在HTML的字里行间中加入CSS定义。

这个方法适用于指定网页内的某一小段的样式。

如果内联CSS定义与<HEAD>内在定义的CSS或外在连结的CSS定义相冲突的话最终的样式将以内联的CSS定义为主。

它的写法是：<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

上面的3种CSS引入方式可以同时并用，也可以单一或成双地使用。如果各CSS间的定义相冲突，则嵌入定义的CSS会盖过外联连结的CSS，内联的CSS会盖过嵌入定义的CSS。

怎么将css文件链接到html

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：

<h1style="color:red;">style属性的应用</h1>

<pstyle="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

<!DOCTYPE>

<html>

<head>

<metacharset="utf-8"/>

</head>

<body>

<h1style="color:red;">LeapingAboveTheWater</h1>

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

</body>

</html>

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例：

<head>

<styletype="text/css">

h3{

color:red;

}

</style>

</head>

例如：

<!DOCTYPE>

<html>

<head>

<title>内部样式表</title>

div{

background: green;

}

</style>

</head>

<body>

<div>我是DIV</div>

</body>

</html>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

1、链接式

2、导入式

@import url("css文件路径");

</style>

例如：

<!DOCTYPE>

<html>

<head>

<title>外部样式表</title>

@import url("css/style.css");

</style>

</head>

<body>

<ol>

</ol>

</html>

链接式和导入式的区别

<link>

1、属于XHTML

2、优先加载CSS文件到页面

@import

1、属于CSS2.1

2、先加载HTML结构在加载CSS文件。

四、CSS中的优先级

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

例如：

行内样式和内部样式比较优先级：

<!DOCTYPE>

<html>

<head>

<title>行内样式和内部样式表的优先级</title>

color: blue;

}

</style>

</head>

<body>

<p style="color: red;">我是p段落</p>

</html>

浏览器运行效果：

结论：行内样式优先级高于内部样式表。

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

a、内部样式表在外部样式表上面

<!DOCTYPE>

<html>

<head>

<title>内部样式表和外部样式表的优先级</title>

color: blue;

}

</style>

</head>

<body>

<p>我是p段落</p>

<div>我是div</div>

<ol>

</ol>

</html>

浏览器运行效果：

b、外部样式表在内部样式表上面

<!DOCTYPE>

<html>

<head>

<title>内部样式表和外部样式表的优先级</title>

color: blue;

}

</style>

</head>

<body>

<p>我是p段落</p>

<div>我是div</div>

<ol>

</ol>

</html>

浏览器运行效果：

结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。

注意：导入式和链接式的优先级也是使用就近原则。

2、选择器优先级

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

<!DOCTYPE>

<html>

<head>

<title>选择器的优先级</title>

#a{

color: green;

}

.b{

color: yellow;

}

h2{

color: red;

}

</style>

</head>

<body>

</html>

浏览器运行效果：

css怎么嵌入到html的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于在线html代码运行器、css怎么嵌入到html的信息别忘了在本站进行查找哦。

jquery网站(jQuery菜鸟教程)免费源码资源网站(52源码网会员免费下载)