css样式规则由两部分构成，选择器和申明。
css引用方式
image.png
代码示例
- html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css 样式使用方式</title>
<!-- 1:内部样式，注意style只能写在head中 -->
<style type="text/css">
<!-- p{font-size:10px; color:red; font-family:"隶书" }
h1,h2,h3{color: green ;font-size:10px;} -->
</style>
<!-- 为了兼容低版本，不让style里面的内容直接显示在界面，可以用注释的方式包裹着
低版本不兼容的浏览器则不会显示了 -->
<link rel="stylesheet" type="text/css" href="css.css">
<!-- 3 链入外部样式 引入一个css文件-->
<style type="text/css">
@import "css1.css"
</style>
<!-- 4 通过import导入css文件，可以用 @import url(css1.css)也可以 @import "css1.css" -->
</head>
<body>
<h1 style="color: blue">css层叠样式</h1>
<!-- 2: 行内样式 -->
<h2>css层叠样式</h2>
<h3>css层叠样式</h3>
<p>用于定义html在浏览器只的样式</p>
<h4>测试link 外部样式css引用</h4>
<h5>测试link 外部样式css引用</h5>
<h6>测试import 外部样式css引用</h6>
</body>
</html>
- css1文件
h6{color: blue}
*css文件
h4{color: yellow}
h5{color: red}
效果
image.png
css使用方法优先级 （遵循就近原则）
- 行内样式优与内部样式
- 内部样式优于@import样式
- link样式，取决于在<style>设置的内部和导入的位置。在它之后就更靠近下面代码的元素，就显示link的设置。否则显示style里面的设置。
网友评论