CSS导入方式

Posted 2021-06-20 琪琪又炸毛了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS导入方式相关的知识，希望对你有一定的参考价值。

导入方式

内部样式

 <!-- 内部样式 -->
   <style>
     h1{
       color: brown;
     }
   </style>

外部样式

   <!-- 外部样式 -->
   <!-- 链接式html（推荐） -->
   <link rel="stylesheet" href="../导入方式/style.css">

 h1{
   color: darkorange;
 }

   <!-- 导入式css2.1(不推荐) -->
   <style>
     @import "style.css";
   </style>

行内样式

 <!-- 行内样式：
 在标签元素中，编写一个style属性，编写样式即可
 不可取，应结构与表现分离
  -->
 <h1 style="color: #4a78c2">一级标题</h1>

优先级：就近原则

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>css</title>
 
   <!-- 内部样式 -->
   <style>
     h1{
       color: brown;
     }
   </style>
 
   <!-- 外部样式 -->
   <!-- 链接式html（推荐） -->
   <link rel="stylesheet" href="../导入方式/style.css">
 
   <!-- 导入式css2.1(不推荐) -->
   <style>
     @import "style.css";
   </style>
 
 </head>
 <body>
 
 <!-- 优先级：就近原则 -->
 
 <!-- 行内样式：
 在标签元素中，编写一个style属性，编写样式即可
 不可取，应结构与表现分离
  -->
 <h1 style="color: #4a78c2">一级标题</h1>
 
 </body>
 </html>

 h1{
   color: darkorange;
 }

以上是关于CSS导入方式的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

css常用代码片段 (更新中)