效果展示:
代码以及注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的声明学习</title>
<!--声明css代码域--
css的引入方式:
第一种:在head标签中使用style标签声明----内联声明
第二种:在需要加样式的标签使用style属性来声明---内嵌声明
第三种:在head标签中使用link标签来引入外部的css样式---外联声明,好处:一次书写,多次使用
>
<!--问题:
不同的声明给同一标签操作了同一样式,会使用谁的?
如果CSS的声明全部在head标签中,则遵循就近原则,谁离标签近,最后就显示谁。
-->
<style type="text/css">
hr{
width: 50%;
height: 100px;
color: red;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="css/my.css" />
</head>
<body>
<h3>css的声明学习</h3>
<hr style="background-color: rosybrown"/>
<hr />
</body>
</html>
外联link标签:
写一个CSS的文件
hr{
width: 50%;
height: 100px;
color: red;
background-color:gold
}