内部样式
在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从上到下进行加载),对于不重复的部分,所有的样式表里涉及到的样式均会显示。