如何引入 CSS 样式? CSS 样式的引入方式共有三种: 行内样式, 内部样式表, 外部样式表. 下面本篇文章就来给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 样式的引入方式共有三种:
行内样式
内部样式表
外部样式表
1, 行内样式
使用 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>
2, 内部样式表
在 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>
3, 外部样式表
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, 属于 XHTML
2, 优先加载 CSS 文件到页面
@import
1, 属于 CSS2.1
2, 先加载 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>
浏览器运行效果:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/18458.html