使用CSS的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 写CSS第二种方式：在head中定义style标签，在style标签内部通过选择器来为目标标签配置css样式-->
<style>
/*1、id选择器,使用#id{}样式*/
#i1{
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<!-- 写CSS第三种方式：引入css文件，文件内容为：选择器{样式表},通过link标签在head中引入CSS文件,href传入文件名-->
<!-- demo.css文件内容：-->
<!-- #i2{-->
<!-- background-color: green;-->
<!-- height: 100px;-->
<!-- width: 100px;-->
<!--}-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<!-- 写CSS第一种方式：在标签style属性中写，多个样式使用分号分隔-->
<div style="background-color: red;height:100px;width:100px;">背景色</div>
<div id="i1">背景色1</div>
<div id="i2">背景色2</div>
</body>
CSS优先级：使用同一个id 对应不同的背景色，然后采用上面三种方式来测试CSS优先级
结论：标签中的style优先级最高，然后从下往上，距离目标标签越近优先级越高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1、id选择器,使用#id{}样式*/
#i1{
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<!-- demo.css文件内容：-->
<!-- #i1{-->
<!-- background-color: green;-->
<!-- height: 100px;-->
<!-- width: 100px;-->
<!--}-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<!--style属性中多个样式使用分号分割-->
<div id="i1" style="background-color: black;height:100px;width:100px;">背景色</div>
<!-- <div id="i1">背景色1</div>-->
<!-- <div id="i2">背景色2</div>-->
</body>
</html>
id与class区别：
由于id只能在一个标签中使用，多个标签不能使用同一个id，但是能共用同一个class
选择器：
id选择器（#）
class选择器（.）
标签选择器
层级选择器（空格）
组合选择器（逗号）
属性选择器（中括号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 选择器-->
<style>
/*id选择器*/
#i1{
background-color: green;
width: 100px;
height: 100px;
}
/*#class选择器*/
.c1{
background-color: blue;
width: 100px;
height: 100px;
}
/*标签选择器*/
span{
background-color: green;
}
/* 层级选择器 组合选择器 span标签下面所有div标签颜色改变 层级通过空格*/
span div {
color: aqua;
background-color: red;
}
/* class 层级选择器 层级通过空格*/
.d1 div {
background-color: #336699;
height: 48px;
}
/* id 层级选择器 层级通过空格*/
#i2 div {
background-color: black;
height: 48px;
}
/* 组合选择器 id z1 z2 z3 共用一套css样式 组合 通过逗号*/
#z1, #z2, #z3 {
background-color: chocolate;
height: 48px;
}
/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
.s1, .s2, .s3 {
background-color: darkmagenta;
height: 48px;
}
/* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
div[s=‘dsx‘] {
background-color: darkred;
height: 48px;
}
/*写一个不同颜色 相同宽高的正方形*/
.wh{
width: 100px;
height: 100px;
}
.bc-1{
background-color: red;
}
.bc-2{
background-color: blue;
}
</style>
</head>
<body>
<!-- id选择器-->
<div id="i1"></div>
<!--class选择器-->
<div class="c1"></div>
<!-- 标签选择器-->
<!-- 所有的span都是绿色-->
<span>我是标签选择器</span>
<!-- 层级选择器 组合标签选择器 -->
<span>
<div>组合标签选择器</div>
</span>
<!--层级选择器 class选择器下的div标签 -->
<div class="d1">
<div></div>
</div>
<!--层级选择器 id选择器下的div标签-->
<div id="i2">
<div></div>
</div>
<!-- id组合选择器 -->
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div>
<!-- class组合选择器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<!-- 属性选择器 -->
<div s="dsx">我是属性选择器</div>
<div name="nn">我不是属性选择器</div>
<!--写一个不同颜色 相同宽高的正方形-->
<!-- class中可以运用多个css样式，使用空格分割-->
<div class="wh bc-1"></div>
<div class="wh bc-2"></div>
</body>