html引入css有哪几种方法html中引入css的方法

html引入css有哪几种方法html中引入css的方法

HTML中怎么导入css？有3种方式：
分别如下：
1--行间样式表(内联样式)
divstyle="……"/div
2--内部样式表
style
选择器｛属性：属性值｝
/style
3--外部样式表
linkhref="style.css"rel="stylesheet“type=“text/css”/
请详细说明HTML文件使用css样式的几种方法？1.
第一种方法是行内样式,就是直接把CSS代码添加到html的标签中,作为标签的一种属性存在。
2.
第二种方式是内嵌样式,就是将CSS代码添加到head/head之间,并用style/sty...
3.
第三种方法是链接样式,就是将“页面内容”和“样式代码”分类成两个文件或多个文件,实现html代码和css代码的完全分离。
在html下导入csshtml引用css方法如下
1、直接在HTML标签中内嵌css样式
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件推荐此方法
方法说明：
1、直接在html标签元素内嵌入css样式
我是divcss测试内容
效果如下图
1.jpg
2、在html头部head部分内style声明插入
代码如下：
!--
.ceshi{font-size:14px;color:#FF0000;}/*这里是设置CSS的样式内容*/
--
我是divcss测试内容
效果同上。
3、使用@import引用外部CSS文件方法
HTML代码：
css引用方法实例
!--
@importurl(wcss.css);/*这里是通过@import引用CSS的样式内容*/
--
我是divcss测试内容
Wcss.css文件内代码.ceshi{font-size:14px;color:#FF0000;}
4、使用link来调用外部的css文件
在head放置
来调用外部的wcss.css文件来实现html引用css文件
此方法就不需要style标签，而是直接通过link一个样式来引用外部样式，一般推荐使用link来引用外部的css样式方法。
在html里可以使用什么方法引入cssCSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
一、行内样式
使用style属性引入CSS样式。
示例：
h1style="color:red;"style属性的应用/h1
p?style="font-size:14px;color:green;"直接在HTML标签中设置的样式/p
实际在写页面时不提倡使用，在测试的时候可以使用。
例如：
!DOCTYPE
html
head
metacharset="utf-8"/
title行内样式/title
/head
body
!--使用行内样式引入CSS--
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
metacharset="utf-8"/
title内部样式表/title
!--使用内部样式表引入CSS--
styletype="text/css"
div{
background:green;
}
/style
/head
body
div我是DIV/div
/body
/html
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
linktype="text/css"rel="styleSheet"?href="CSS文件路径"/
2、导入式
styletype="text/css"
@importurl("css文件路径");
/style
例如：
!DOCTYPE
html
head
metacharset="utf-8"/
title外部样式表/title
!--链接式:推荐使用--
linkrel="stylesheet"type="text/css"href="css/style.css"/
!--导入式--
styletype="text/css"
@importurl("css/style.css");
/style
/head
body
ol
li1111/li
li2222/li
/ol
/html
链接式和导入式的区别
link
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
四、CSS中的优先级
1、样式优先级
行内样式内部样式外部样式(后两者是就近原则)
例如：
行内样式和内部样式比较优先级：
!DOCTYPE
html
head
metacharset="utf-8"/
title行内样式和内部样式表的优先级/title
!--内部部样式表--
styletype="text/css"
p{
color:blue;
}
/style
/head
body
!--行内样式--
pstyle="color:red;"我是p段落/p
/html
浏览器运行效果：
结论：行内样式优先级高于内部样式表。
内部样式表和外部样式表比较优先级：
a、内部样式表在外部样式表上面
!DOCTYPE
html
head
metacharset="utf-8"/
title内部样式表和外部样式表的优先级/title
!--内部部样式表--
styletype="text/css"
p{
color:blue;
}
/style
!--外部样式表--
linkrel="stylesheet"type="text/css"href="css/style.css"/
/head
body
p我是p段落/p
div我是div/div
ol
li1111/li
li2222/li
/ol
/html
浏览器运行效果：
b、外部样式表在内部样式表上面
!DOCTYPE
html
head
metacharset="utf-8"/
title内部样式表和外部样式表的优先级/title
!--外部样式表--
linkrel="stylesheet"type="text/css"href="css/style.css"/
!--内部部样式表--
styletype="text/css"
p{
color:blue;
}
/style
/head
body
p我是p段落/p
div我是div/div
ol
li1111/li
li2222/li
/ol
/html
浏览器运行效果：
结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。
2、选择器优先级
优先级：ID选择器类选择器标签选择器
!DOCTYPE
html
head
metacharset="utf-8"/
title选择器的优先级/title
styletype="text/css"
#a{
color:green;
}
.b{
color:yellow;
}
h2{
color:red;
}
/style
/head
body
h2111/h2!--红色--
h2id="a"class="b"222/h2!--绿色--
h2class="b"333/h2!--黄色--
/html
浏览器运行效果：
2024-09-18