一、CSS基础概念
CSS有两个重要的概念，分别是样式和布局
CSS的样式分为两种：一种是文字的样式，一种是盒模型的样式
CSS的辅助页面布局：完成HTML不能完成的功能，比如并排显示，比如精确定位显示
从HTML4.0开始，结构层和样式层进行了分离
前端三层：
结构层：HTML作用是从语义的角度讲进行网页结构的搭建
样式层：CSS作用从美观的角度讲修饰页面样式
交互层：JavaScript作用从交互的角度讲描述页面的行为
二、CSS常用属性的学习
CSS常用的文字属性有三个：color、font-size、font-family
CSS的属性样式发生了改变由HTML的 k="v" 变为了k:v;
1、文字颜色
属性名：color
基本使用
<p style="color:blue;">This is a test file.</p>
<!-- 以蓝色为准 -->
<!-- rgb颜色表示法 -->
<p style="color:rgb(0,0,225);">看我是什么颜色</p>
<!-- 十六进制颜色表示法 -->
<p style="color:#0000FF;">看我是什么颜色</p>
2、字号
属性：font-size
属性值：常用的是以px为单位的数字值
根据浏览器的不同，有默认不同的字号大小，比如Chrome和ie默认就是16px的文字
每个浏览器都有自己最小的显示像素，比如Chrome最小字号为8px，ie浏览器最小字号是1px
<p style="font-size:18px;">我是18px字号</p>
<p style="font-size:8px;">我是8px字号</p>
3、字体
属性：font-family
属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开
中文字体的常用字体属性值：微软雅黑、宋体
英文常用字体属性值：Arial、consolas
实际的字体属性是根据设计图获取
大多数浏览器默认显示字体是微软雅黑
如果页面中有中文化混合的，需要同时设置对应的字体
如果设置多个字体，使用逗号隔开，如果浏览器不识别前面的字体，会自动向后识别，中英文会分别进行加载
<p style="font-family: '黑体','宋体','consolas';font-size: 20px;">巴山楚水凄凉地,responsibility</p>
4、盒子的三属性
盒子的三属性width、height、background-color
width：是宽度的意思
height：是高度意思
常用的属性值都是以px为单位的数值
background-color：属于background系列属性的一种，属性值和color一样分为单词和颜色值表示法
<div style="width:200px; height:100px; background-color:blue;">div盒子分区显示</div>
三、CSS样式表
1、行内式样式表
书写位置：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔
基本语法：
2、内嵌式样式表
书写位置：head标签的内部，title标签的下面，一对style标签中
基本语法：
3、外链式样式表
书写位置：head标签的内部，title标签的下面，一个link内部去进行css文件引入
<link rel="stylesheet" href="css/1.css">
link标签的作用就是引入外部文件，通过href属性，属性值是文件地址
rel属性值如果是stylesheet，代表的就是引入样式表
通过引入css文件到html文件中，从而实现样式的加载
css文件的内部不需要写任何的标签，直接写属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div>hello,world</div>
</body>
</html>
4、导入式样式表（只需要了解）
书写位置：head标签的内部title标签下面style标签内，通过@import进行导入
注意：导入式必须写在style标签的最顶部
url内部是css文件的引入地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(css/1.css);
</style>
</head>
<body>
<div>hello,world</div>
</body>
</html>
5、四种样式表的区别和优缺点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/red.css">
<style>
@import url(css/yellow.css);
p{
color: blue;
}
</style>
</head>
<body>
<p style="color:green;">hello,world</p>
</body>
</html>
结果为绿色，代表 行内式样式表 的权重最高，工作中大多使用外链式
四、CSS选择器
选择器分为两种，一种是基础选择器，一种是高级选择器
基础选择器：标签选择器、id选择器、类名选择器、通配符选择器
高级选择器；后代选择器、交集选择器、并集选择器
1、标签选择器
选择方法：通过标签名称去选择
书写方法：标签名
选择范围：HTML文档中所有的同名标签
需要注意的是标签选择器无视嵌套规则，都能进行识别加载
用途：实现全选同名标签，可以设置公共样式
缺点：只能进行全选，不能进行单独的布局样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: blue;
}
h3{
color: brown;
}
</style>
</head>
<body>
<h3>相思</h3>
<p style="color:black;">王维</p>
<p>红豆生南国，春来发几枝。</p>
<div>
<div>
<div>
<p>愿君多采撷，此物最相思。</p>
</div>
</div>
</div>
</body>
</html>
2、Id选择器
通过标签上id属性进行选择
书写方法：#id属性值（自定义）
选择范围:只能选中一个标签
id其实就是标签的身份证号，具有唯一性，规定一个页面中不允许有同名id属性
优点：id属性的权重最高
缺点：只能实现单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#p1{
color: blue;
}
#p2{
color: brown;
}
#p3{
color: brown;
}
</style>
</head>
<body>
<h3 id="h3-1">相思</h3>
<p id="p1">王维</p>
<p id="p2">红豆生南国，春来发几枝。</p>
<p id="p3">愿君多采撷，此物最相思。</p>
</body>
</html>
3、类名选择器
通过标签上的class属性进行选择
书写方法：匹配对应的class属性值
选择范围：选择所有同名clss属性标签
一个标签的class属性值可以有一个或者多个，多个class属性之间使用空格隔开
id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cls{
color:red;
font-size:20px;
}
.name{
color:black;
font-size:15px;;
}
</style>
</head>
<body>
<h3 class="cls">相思</h3>
<p class="cls name">王维</p>
<p class="cls">红豆生南国，春来发几枝。</p>
<p class="cls">愿君多采撷，此物最相思。</p>
</body>
</html>
4、通配符选择器
书写方法：
* {
color: yellow
}选择范围：选择包含html标签在内的所有标签
通配符*后面添加的样式，每一个标签都会加载一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<h3>相思</h3>
<p>王维</p>
<p>红豆生南国，春来发几枝。</p>
<p>愿君多采撷，此物最相思。</p>
</body>
</html>
我们通常使用清除页面的默认样式：
*{
margin:0;
padding:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="div1">div</div>
<p class="div1" style="background-color:blue;">p</p>
</body>
</html>
上面代码显示效果页面都有空行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.div1{
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="div1">div</div>
<p class="div1" style="background-color:blue;">p</p>
</body>
</html>
5、后代选择器
书写方法：使用空格连续链接多级选择器
.div1 ul li{
color:red;
}作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 ul li{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<p>西游记</p>
<li>孙悟空</li>
<li>唐僧</li>
<li>沙和尚</li>
<li>猪八戒</li>
</ul>
</div>
</body>
</html>
要注意的是，后代关系不一定是父子关系，也可能是爷孙关系，只要是后代关系即可
.div1 li{
color:red;
}6、交集选择器
作用：进行满足所有选择器条件的匹配
书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号
p.cls{
color:red;
}
p#cls{
color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.cls{
color:red;
}
</style>
</head>
<body>
<div class="cls">div区块</div>
<p class="cls">p标签</p>
</body>
</html>
7、并集选择器
并集选择器有‘和’的意思，代表多个标签设置同样的属性
书写方法：将多个选择器使用逗号进行连接，最后一个不能加逗号
div,h2,p{
color:red;
}选择范围：多个选中标签的集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,h2{
color:red;
}
</style>
</head>
<body>
<div class="cls">div区块</div>
<p class="cls">p标签</p>
<h2>h2标签</h2>
</body>
</html>
并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#par .par p,li{
color:red;
}
</style>
</head>
<body>
<div id="par">
<h2>h2标签</h2>
<ul class="par">
<p>p标签</p>
<li>li标签</li>
</ul>
</div>
</body>
</html>
#par .par p,li表示#par里面的.par里面的li和p标签的文字颜色为红色
五、CSS继承性和层叠性
1、继承性
只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性我们叫做继承性
注意，css可以继承的属性都是关于文字的，比如color，font-size，font-family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.par{
color:red;
}
</style>
</head>
<body>
<div id="par">
<ul class="par">
<p>p标签</p>
<li>li标签</li>
</ul>
</div>
</body>
</html>
inherited from表示继承自***
2、层叠性
CSS样式表又叫做“层叠式样式表”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#par{
color: blue;
}
.par{
color: green;
}
p{
color: red;
}
</style>
</head>
<body>
<p id="par" class="par">p标签</p>
</body>
</html>
我们看上图后两个选择器设置的内容被‘杠’掉了，我们叫做被层叠了，这个就是css的层叠性
我们学习选择器的权重：
id选择器>class类名选择器>标签选择器
如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的
案例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 div.box2 #box3 p{
color: red;
}
#box1 #box2 div.box3 p{
color: blue;
}
#box1 div.box2 .box3 {
color: pink;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>文字</p>
</div>
</div>
</div>
</body>
</html>
方法：如果选择器选中到同一元素（上述代码都选中了p元素），那么首先将所有的选择器罗列出来
从id选择器比较，如果id选择能比出大小，则数量多的获胜
如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜
如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜
如果所有选择器数量相同，后写的覆盖先写的
如果选中的不是同一元素，那么就需要用到就近原则
3、就近原则
如果都没有选择中同一标签，就看谁离得近， 离得近的就是被选中的，如果选择的都是同一个元素中，再去数权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 #box2 {
color: blue;
}
.box1 .box2 .box3 {
color: purple;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>文字</p>
</div>
</div>
</div>
</body>
</html>
上述代码一个选了box2、一个选了box3，所以根据就近原则为purple
总结：
遇到了复杂的选择器，首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重
如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的；
如果所有的权重一样，选择位置也一样，后书写的覆盖先写的