html链接css代码怎么写（怎么将css文件链接到html）
本文目录
怎么将css文件链接到html
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
一、行内样式
使用style属性引入CSS样式。
示例：
《h1 style=“color:red;“》style属性的应用《/h1》
《p style=“font-size:14px;color:green;“》直接在HTML标签中设置的样式《/p》
实际在写页面时不提倡使用，在测试的时候可以使用。
例如：
《!DOCTYPE》
《html》
《head》
《meta charset=“utf-8“ /》
《title》行内样式《/title》
《/head》
《body》
《!--使用行内样式引入CSS--》
《h1 style=“color:red;“》Leaping Above The Water《/h1》
《p style=“color:red;font-size:30px;“》我是p标签《/p》
《/body》
《/html》
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
《head》
《style type=“text/css“》
h3{
color:red;
}
《/style》
《/head》
例如：
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》内部样式表《/title》《!--使用内部样式表引入CSS--》《style type=“text/css“》div{background: green;}《/style》《/head》《body》《div》我是DIV《/div》《/body》《/html》
三、外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。语法：1、链接式《link type=“text/css“ rel=“styleSheet“ href=“CSS文件路径“ /》2、导入式《style type=“text/css“》@import url(“css文件路径“);《/style》
例如：
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》外部样式表《/title》《!--链接式:推荐使用--》《link rel=“stylesheet“ type=“text/css“ href=“css/style.css“ /》《!--导入式--》《style type=“text/css“》@import url(“css/style.css“);《/style》《/head》《body》《ol》《li》1111《/li》《li》2222《/li》《/ol》《/html》
链接式和导入式的区别《link》1、属于XHTML2、优先加载CSS文件到页面@import1、属于CSS2.12、先加载HTML结构在加载CSS文件。
四、CSS中的优先级
1、样式优先级
行内样式》内部样式》外部样式(后两者是就近原则)
例如：
行内样式和内部样式比较优先级：
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》行内样式和内部样式表的优先级《/title》《!--内部部样式表--》《style type=“text/css“》p{color: blue;}《/style》《/head》《body》《!--行内样式--》《p style=“color: red;“》我是p段落《/p》《/html》
浏览器运行效果：
结论：行内样式优先级高于内部样式表。
内部样式表和外部样式表比较优先级：
a、内部样式表在外部样式表上面
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》内部样式表和外部样式表的优先级《/title》《!--内部部样式表--》《style type=“text/css“》p{color: blue;}《/style》《!--外部样式表--》《link rel=“stylesheet“ type=“text/css“ href=“css/style.css“ /》《/head》《body》《p》我是p段落《/p》《div》我是div《/div》《ol》《li》1111《/li》《li》2222《/li》《/ol》《/html》
浏览器运行效果：
b、外部样式表在内部样式表上面
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》内部样式表和外部样式表的优先级《/title》《!--外部样式表--》《link rel=“stylesheet“ type=“text/css“ href=“css/style.css“ /》《!--内部部样式表--》《style type=“text/css“》p{color: blue;}《/style》《/head》《body》《p》我是p段落《/p》《div》我是div《/div》《ol》《li》1111《/li》《li》2222《/li》《/ol》《/html》
浏览器运行效果：
结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。
2、选择器优先级
优先级：ID选择器》类选择器》标签选择器
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》选择器的优先级《/title》《style type=“text/css“》#a{color: green;}.b{color: yellow;}h2{color: red;}《/style》《/head》《body》《h2》111《/h2》 《!--红色--》《h2 id=“a“ class=“b“》222《/h2》 《!--绿色--》《h2 class=“b“》333《/h2》《!--黄色--》《/html》
浏览器运行效果：
如何将css与html连接起来
一行代码引入外部的CSS文件即可《link rel=“stylesheet“ href=“css/style.css“》这样css文件就与HTML链接起来了。这里要注意的是html里的ID选择器和类选择器要对应上。
更多文章：
2025年3月26日 14:30
2025年2月19日 11:00
row是什么意思翻译（英语Row.Knees，ribs，knees怎么翻译）
2025年2月20日 07:50
绿色资源网破解版下载（红包猎手为什么总要收费怎样才能做到永久VIP）
2025年3月3日 16:40
androidlistview（android 中listview是怎么用的）
2025年4月3日 10:30
2025年4月2日 08:30
2025年3月27日 05:40
attribute的意思（attribute是什么意思及反义词）
2025年2月10日 11:50
flex教程（flex2中文云端怎么用/flex2中文云端源/flex2中文云端源使用图文教程）
2025年3月18日 17:00
2025年3月29日 22:20
table array（在Excel中vlookup函数中table_array问题）
2025年2月25日 08:20
translational oncology（Stanford 医学院招AI相关postdoc是哪个老师）
2025年3月9日 08:50
2025年2月25日 22:40
oracle官网地址（oracle数据库的jdbc驱动在哪下载最好是具体的网址）
2025年3月15日 08:20
内存溢出异常（电脑软件使用某一程序，有时会报 内存溢出错误out of memory）
2025年2月16日 21:50
2025年2月24日 06:20
2025年3月22日 04:10
while语句循环的结构（while循环结构的语法和执行顺序是什么）
2025年3月26日 14:20
related videos（related videos是什么意思）
2025年2月11日 19:50
2025年3月10日 05:10
