css基本语法
书写位置
css的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式
内联式
内联式，也被习惯叫做行内式
书写位置：在html标签之上的style属性中书写css样式
所有的css样式属性总体组成标签的style属性的属性值
缺点：
内联式必须书写在标签上，没有完全脱离html标签
css样式代码让标签结构繁重，不利于html结构的解读
内联式的css代码，只能给一个标签使用，如果多个标签有相同的样式，同样的css代码需要书写多次，增加代码量
因此，在我们实际工作中很少会使用内联式（行内式）编写css代码
内嵌式
书写位置：在html文件中，<head>标签内部有一个<style>标签
<style>标签书写在<title>标签后面，所有css代码书写在<style>标签内部
<style>标签有一个标签属性叫做type,属性值是"text/css"
<style>
p {
font-size: 14px;
}
</style>优点：
实现了结构和样式的初步分离，css只负责样式，html负责结构
多个标签可以利用一个代码设置相同的样式，节省代码量
缺点：
结构和样式并没有完全分离，代码依旧写在html文件的<style>标签内部
css样式只能给一个html文件使用，不能狗被多个html文件同时利用
在html中如果css代码太多，会造成问文件头重脚轻
外联式
外联式css，也可以叫做外链式css、外部css
书写位置：在一个单独的扩展名为xx.css的文件中
书写语法：内部代码与内嵌式样式表中<style>标签内部的代码一样的，需要通过选择器去选中标签，添加对应的样式
注意：文件中只需写样式，不需要再写<style>标签
p {
font-size: 14px;
}外联式引用：
外联式样式表必须引入到html文件中，才能正常进行加载
引入方式：在html中的<head>标签内部使用<link>标签进行引入
<link>标签属性：
<link rel="stylesheet" href="xxx.css">优点：
实现了html和css完全分离
多个html文件可以公用一个css文件，便于提取公共css，减少代码量
可以实现一个css变化，多个html页面同时变化，减少工作量
一个html文件可以引入多个css文件，可以实现同一个页面中css代码分层
导入式
书写位置：在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其他的外部的.css文件
导入方式：利用一条@import url(路径)语句进行引入
导入式问题：
导入样式式样表的作用与外联式样式表基本相同
但是由于导入式在浏览器中加载时，会在html结构加载完毕后再进行编译，如果网速比较慢时，回导致网页出现没有css样式的效果，给哦那个胡体验不好
css规则
css规则由两个主要的部分构成：选择器，以及一条或多条声明
样式规则
以内嵌式样式表为例：
所有的css代码都必须书写在<head>标签内部的一对<style>标签内
css在给某个标签设置样式前，必须使用选择器先选中标签
css样式的属性，属性名和属性值的键值对写法为k:v
给每个选择器添加的样式属性都必须写在一对大括号{}之内
给一个标签添加的所有需要的样式，都要在{}内部一一罗列出来
注意事项：
分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误
css中所有属性与属性之间对空格、换行、缩进不敏感
颜色color
作用：给文字设置颜色
属性名k：color
属性值v：颜色名、颜色值
颜色名：
颜色名就是使用颜色的英文单词进行表示
颜色值：
利用十六进制来表示
rgb模式：
rgb模式：是根据红绿蓝三原色进行混合而成的颜色模式
每个原色的取值范围时0-255，一共256个数值，三个原色共能混合成1677多万种颜色
书写方法：rgb（红，绿，蓝），可以用数字也可以用颜色值
字体font-family
作用：定义元素内文字的字体
属性名k：font-family，字体属于font综合属性的一个单一属性
属性值v：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔
常用字体
常用的中文字体：
宋体 SimSun
微软雅黑 Microsoft Yahei
常用的英文字体：
Arial
consolas
如果不设置字体属性，不同的浏览器有自己的默认字体
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}注意事项：
&1 font-family可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据时按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体
&2 浏览器中加载的字体时用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路
&3 中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面
字号 font-size
作用：设置文字的大小
属性名k：font-size，字号属于font综合属性的一个单一属性
属性值v：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位
单位：
实际应用：
网页中最小设置字号必须时12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px
尽量使用12px，14px，16px等偶数的数字字号，ie6等老式浏览器支持奇数会有bug
实际工作中的字号，需要以设计图为准
盒子实体化三属性
实体化属性：
div {
width: 200px;
height: 200px;
background-color: #fff;
}选择器
选择器：选择要添加样式的html标签的一种方法、模式
基础选择器：标签选择器、id选择器、类选择器、通配符选择器
高级选择器：后代选择器、交际选择器、并集选择器
标签选择器
通过标签名去选择标签元素
书写方式：标签名
选择范围：选中的是html文件所有的同名标签
注意：
标签选择器可以选择所有的同名标签，会忽略html元素的嵌套关系，不管嵌套多深，都能被选中
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}标签选择器特点：
优点：可以选中所有的同名标签，设置所有同名标签的公共样式
缺点：只能实现全选，不能对局部的标签添加特殊样式
id选择器
通过标签上的id属性去选择标签
书写方式：#id属性值
选择范围：只能选中一个标签
id命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个id属性值必须是唯一的，不能与其他的id同名
注意：
如果希望多个标签设置相同的样式，使用id选择器的话，必须给多个标签取不同的id名，分别选中设置
特点：
缺点：id选择器只能实现单选，不能帮我们完成多选的功能
<p id="par1">我是p标签</p>
#par1 {
color: red;
}类选择器
通过标签的class属性取选择标签
书写方式：.class属性值
选择范围：是页面中所有class属性值相同的标签
class命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线、严格区分大小写。class属性值可以与其他的class相同
<p class="par1">我是p标签</p>
.par1 {
color: red;
}特点：
特点1：多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同一个类选择器选中
特点2：一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这个一个标签，每个选择器后面的样式都会添加给同一个标签
优点：
通过一个类选择器进行多选，选中多个标签，添加公共样式
一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量（原子类）
实际工作中，通常我们有一个使用规律：类上样式（css）,id上行为（javascript）
通配符选择器
通过一个特殊符号选择页面内所有的标签
书写方式：*
选择范围：包含<html>标签在内的所有标签
通配符特定和应用：
优点：可以实现全选，简化书写
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作
注意：
实际上线的网站不允许使用*取清除默认内外边距
不过普通的案例，代码量较少，为了节省书写，可以使用通配符
后代选择器
通过标签之间存在的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器
后代选择器也叫包含选择器
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签
注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系
div ul li {
color: red
}特点：
优点：减少class属性的定义使用，选择效率更高
交际选择器
通过一个标签之上满足所有的基础选择器的需求去选择标签
书写方式：基础选择器及逆行连续书写，如果有标签选择器参与交集，必须书写在开头
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中
比较常见的是标签与类的交集
<p class="par1">我是p标签</p>
p.par1 {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
交际选择器就是将标签名和标签上的类名以 标签名.类名的方式来选择 标签交际选择器更多写法：
交际选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签
ie6 不支持类名连续交集写法
交集选择器可以作为其他高级选择器的组成部分
<p class="par1 ps">我是p标签</p>
p.par1.ps {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}并集选择器
不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以经i选哪个并集书写，相当于一种简化写法
书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号
选择范围：是所有的单独选择器选中的标签的并集集合
<h2>我是标题标签</h2>
<div>
<ul>
<li class="demo">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
h2,.demo {
color: red;
}并集选择器用途：
如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法
可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能
h1,h3,div,p,div {
margin: 0;
padding: 0;
}css的继承性
如果一个标签没有设置过一些样式，它的某个祖先曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先继承而来，这种现象就是继承性
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承
浏览器控制面板：
继承性应用：
继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个叫大的祖先级标签比如<body>，后期所有的后代标签都可以从<body>进行继承
body {
font-size: 14px;
font-family: "微软雅黑";
color: red;
}层叠性
思考问题：同一个标签可以被多个选择器选中，如果选择后面设置了相同的样式属性，标签最终该加载那个？或者，在继承中，如果多个祖先都设置了相同的文字样式，后代中该继承那个祖先级的？
解决办法：就是使用层叠性去解决冲突，多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性
判断最终胜出的属性是谁，需要依赖判断优先级
判断方法：
选中目标标签：
第一步：比较多个选择器的权重，权重高的层叠权重低的
基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id选择器
控制面板的排序从上到下 权重高----->权重低
高级选择器权重比较方法：依次比较组成高级选择器的id的个数，类的个数，标签的个数，如果前面能够比较出大小就不在比较后面，如果前面相等就往后面比较，知道比较出大小
比较顺序：（id个数，类的个数，标签的个数）
第二步：如果选择器权重都相同，需要比较css中代码的书写顺序，后写的层叠先写的
选中目标目标标签的祖先及
如果选择器中的是祖先元素，文字的样式可以被继承
第一步：比较就近原则，比较选择器选中的祖先级在html结构中距离目标标签的远近，近的层叠远点
第二步：如果选中的祖先及距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的
第三步：如果距离一样近，权重也相同，最后比较css中的书写顺序，后面的层叠前面的
！important关键字
如果在比较选择器权重的过程中，遇见一个！important关键字，可以将某条css样式属性的权重提升到最大
书写位置：在某个css属性的属性值后面加！important
注意：
就近原则中，不需要比较选择器权重，所有important会失效
important不能提升选择器的权重，只能提升某条属性的权重到最大
#box3 {
color: blue !important;
}行内式权重
行内式样式与内嵌式或外链式样比较权重时，行内式的权重最该
但是，与！important关键字相比权重要低