三种常见的三种CSS样式导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--内部样式-->
<style>
h1{
color:green;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 优先级:就近原则 -->
<!-- 哪个样式离元素近就使用哪个样式 -->
<!-- 行内样式: 在标签元素中,编写一个style属性,编写样式即可 -->
<h1 style="color: yellow;">我是标题</h1>
</body>
</html>
拓展:外部样式两种写法
- 链接式:
html1 <!-- 外部样式 --> 2 <link rel="stylesheet" href="css/style.css">
- 导入式
@import式CSS 2.1特有的!<!-- 导入式 --> <style> @import url("css/style.css"); </style>
@import对比link:
import会先加载html在加载css样式,link是CSS样式渲染好之后再一起加载出来,现在基本都是用link。
3种基本选择器
- 标签选择器:选择一类标签 标签{}
- 类选择器 .class :选择所有class属性一致的标签,跨标签, .类名{}
- id选择器 : 全局唯一, #id{}
优先级:
区分CSS导入方式,不遵循就近原则,
优先级为:id > class >标签