CSS样式引入

最新推荐文章于 2024-09-25 00:51:11 发布

原创最新推荐文章于 2024-09-25 00:51:11 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #样式引入

CSS 专栏收录该内容

4 篇文章

订阅专栏

内部样式
在head标签内设置style标签，在style内设置选择器

格式：	
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>内部样式</title>
    <meta charset="utf-8" />
   <style>
   	 p{
   		  color: red;
   	 }
   </style>
   
</head>

<body>
    <p>使用内部样式将改变这段文字的颜色</p>
</body>

行内标签

在标签内设置style.

 <p style="color: red;">使用行内样式该表这段文字的颜色</p>

外部样式
单独设置一个css文件，在需要用到的html文件内引入这个css文件
css文件中可以设置各种选择器（不局限相同样式）

我已经在项目下新建了一个名为css文件夹，里面新建了一个style.css文件
里面设置了一个标签选择器

p{
    color:red;
}

在html文件中引用这个外部样式

<!--引入外部样式表-->
<link rel="stylesheet" href="../css/style.css" />

link标签可以放在head内，body内，以及两者之外，不影响效果

原则
个人喜欢称之为 “最底原则”
这里说的是外部，内部，行内样式里有重复的部分
比如说：

外部样式表：
p{ 
  color: red;
}

内部样式：
p{
  color: blue;
}

行内样式：
<p style="color: orange;">使用外部样式表改变这段文字的颜色</p>

最终文字显示的颜色是orange，无论什么情况，如果遇到重复样式，最终显示的效果为行内样式，如果只是外部内部遇到重复，那最终显示的是最后加载的样式（html从上到下进行加载），对于不重复的部分，所有的样式表里涉及到的样式均会显示。