这是我参与更文挑战的第26天，活动详情查看：更文挑战
好久没有看css基础知识了,很多知识都忘记了,趁着这段时间把css基础知识重新整理一下,这些知识点很多人都会,主要是小白和自己没事的时候看。
css基础知识
1.1概述
css(cascading style sheet)层叠式样式表（关键字：层叠式 样式） 前端三层：
结构层：从html角度描述页面（标签）
样式层：从美化角度书写样式（css）
行为层：从用户交互角度书写行为（js）
css组成
css分为两部分：
第一部分：选择器（给谁设置样式属性）
第二部分：样式属性（给选择器添加样式）
css作用
css作用设置元素样式属性（盒子样式，文字样式）
书写css要求：
有什么样式书写什么属性。
每一条属性，逐条书写，每条属性结尾书写分号;
盒子属性：
width: 盒子宽度，单位是px（像素）
height: 盒子高度，单位是px（像素）
background-color:背景颜色
短横连接的都是单一属性
background复合属性
border: 也是复合属性（边框）
复合写法属性值用空格隔开
border: 1px(边框线宽度) solid（线的类型：实线） #000（线的颜色）;
文字属性：
color: 文字颜色
font-size: 单一属性，文字大小（字号），单位也是px
font-family: 字体
可以同时设置多个字体（用逗号隔开），会从第一个字体开始匹配,字体名称用双引号包裹
先书写英文字体（Arial）
再书写中文，Microsoft Yahei(微软雅黑) 宋体（SimSun）
font-family: "Arial","微软雅黑","宋体";
如果要求网页加载更快，书写英文单词
font-family: "Arial","Microsoft Yahei","SimSun";
css书写位置
内嵌式：所有样式属性书写在head标签中一对style标签里。（练习使用）
type:类型
属性值：text/css，纯文本css文件
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
/*所有的样式属性 内嵌式*/
</style>
</head>
行内式：前端不使用，书写在标签一个style属性中，属性值包含了所有的css样式属性
<div style="font-size: 100px;font-family: 'SimSun';">盒子</div>
外链式：通过Link标签引入一个css文件
css文件扩展名.css，样式属性直接书写在css文件中.
link是单标签，书写在head标签中
属性：
rel: 表示html和css关系，样式表
type: 表示类型（可以省略）
href: 路径
<link rel="stylesheet" type="text/css" href="css/01.css">
css杂项
css键值对： k: v
每一条属性结束必须添加分号;
每一条属性独占一行。
css对空格，缩进，换行不敏感。
div {
/*盒子属性*/
width: 300px;
height: 300px;
background-color: lightblue;
border: 10px solid red;
/*文字属性*/
color: white;
font-size: 30px;
font-family: "Arial","Microsoft Yahei","SimSun";
}
css基础选择器
标签选择器
通过标签名选中元素。
语法： 标签名 {}
不管标签嵌套多深，都可以通过标签名查找到。
p {
color: red;
}
<div>
<div>
<div>
<div>
<div>
<p>内部深层的p</p>
</div>
</div>
</div>
</div>
</div>
用途：清除，重置默认样式
/*用途：重置，清除默认样式*/
a {
text-decoration: none;
color: #333;
}
ul {
/*去掉小圆点*/
list-style: none;
}
id选择器
通过id名选中元素
语法：#id名（#和id名紧紧书写）
id名命名规则：html严格区分大小写，必须以字母开头，后面可以有数字，下划线，短横。
id名是唯一的，不管是不是相同的标签只有出现一次该id名
#para-_1 {
font-size: 100px;
}
一般情况我们不使用id设置样式。
类选择器
通过类名选中元素。
给元素添加class属性
.类名 {}
类名命名规则和id名一样。
同一个元素可以被不同选择器选中（id选择器设置字号，类选择器设置文字颜色）设置不同的样式属性，这些属性都会加载在元素身上。
层叠性体现（叠加）：同一个元素被不同选择器选中，设置不同的样式，会同时加载。
同一个元素可以设置多个类名，类名之间用空格隔开。
多个元素可以同时有相同类名。
<p class="para box wenzi">段落</p>
类名特殊应用：原子类（我们可以将一些常用属性，设置为原子类，一般原子类只一个属性，便于样式设置）
<div class="f20 w800">1</div>
用途：相同样式的元素，添加同一个类名（类名上样式）
通配符
- {}
通配符可以选中页面上所有的标签（包括body）。
用途：练习阶段使用通配符快速清除默认样式。
* {
padding: 0px;
margin: 0px;
}
高级选择器
高级选择器是在基础选择器上延伸
后代选择器
通过嵌套关系进行选择，一般通过标签或者类选择器确定大范围，在大范围内再次选择。
语法：每一层选择器用空格隔开
div p {
/*选中div后代中的p*/
color: red;
}
后代选择器不但可以选中儿子，还可以选中孙子等所有的后代元素。
.box h3 {
font-size: 50px;
}
<div class="box">
<div>
<div>
<div>
<h3>我是多层嵌套的h3</h3>
</div>
</div>
</div>
</div>
一般我们在使用后代选择器是，将每一层祖先补全，精确选择。
/*一般要求补全每一层祖先*/
.box div p {
font-size: 50px;
}
<div class="box">
<div>
<p>我是p标签</p>
</div>
</div>
.box p {}一样会选中下面的结构
<div class="box">
<div>
<p>我是p标签</p>
</div>
</div>
<div>
<div class="box">
<p>我是p标签</p>
</div>
</div>
不管怎么，一定在书写选择器时有对应的结构。
<div>
<div class="box">
<p>我是p标签</p>
</div>
</div>
.box div p {不能选中下面的结构}
<div>
<div class="box">
<p>我是p标签</p>
</div>
</div>
交集选择器
同时选中两个选择器都具有的元素。
语法：连续书写选择器，不要添加任何空格（和后代选择器进行区分）
p.para {
font-size: 50px;
}
<p class="para">p</p>
<p>
我是p <span class="para">特殊</span>
</p>
交集选择器可以连续交集（选择器可以书写多个）
/*可以连续交集*/
p.para.fs {
/*
选中元素特点同时具有下面3个选择器：
p标签
.para
.fs
*/
color: red;
}
交集选择器可以不是标签选择器开头
.para.fs {} //合法
#para.fs {} //不合法，id选择器可以唯一选中元素
并集选择器
同时设置多个选择器相同的样式。
语法：逗号隔开每一个选择器
div, h3, p {
font-size: 50px;
color: red;
}
类选择器也可以使用并集
.box, .para, .fs {
width: 200px;
height: 200px;
background-color: lightblue;
margin-bottom: 20px;
}
