CSS知识点导图
关联HTML的三种方式
1、链接式
也是将一个.css文件引入到HTML文件中，先加载CSS样式，然后加载html内容。（克服了导入式先加载无样式内容的缺点。）
写到<head></head>标签内。
2、嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签内的<style></style>标签对中。
3、行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
1 1.链接式 2 <link rel="stylesheet" type="text/css" href="css/some.css" /> 3 4 2.嵌入式 5 <style type="text/css"> 6 body{background-color:red;} 7 </style> 8 9 3.行内式 10 <p style="color:red"><p>
选择器
选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
1、基础选择器
1、通配符选择器
作用于全局，用作规定HTML网页初始效果，如果与其他选择器冲突，执行其他选择器效果。
*{color;red;}
2、元素选择器
作用于某一个标签，对某一个标签进行样式规定。
p{color:red;}
3、类选择器
自由度很高，能匹配所有HTML标签内叫 class="名字" 的样式。
.div{color:red;}
p.div{color:red;} 元素类选择器，class放到p标签内，div无效
.p1.p2{color:red;} 多类选择器，能继承class="p1 p2"的样式
注意：多类选择器可以拿来让多个类产生一些相同的格外效果，
比如： 1、我是一段话。 2、我是一段话。 3、我是一段话。
如果三段话有三种不同效果，但是我们如果需要让他们同时倾斜，但又不想改三次，就可以用多类选择器。
先在html内原类名div1后面 添加一个类名 div2 <p class="div1 div2"> 多类选择器用法</p> ,然后在样式表内增加 div2{font-style:italic;} 字体倾斜样式。
4、id选择器
效果与类选择器差不多，只是id选择器的名字具有唯一性，使用时需要格外注意。
#p{color:red;}
2、组合选择器
1、多元素选择器
由多个元素组合而成，同时匹配所有E元素或F元素，E和F之间用逗号分隔。
p,h{color:red;}
2、后代元素选择器
匹配所有属于E元素后代的F元素，E和F之间用空格分隔
p strong i{color: red;} <p>ddd<strong>ii<i>eeeeeee</i>ii</strong>ddd</p>
3、子元素选择器
子元素选择器，匹配所有E元素的子元素F
p>strong>i{color: red;}
注意：
1.后代选择器 可以跨代选择 p i{color: red;}
2.子元素选择器 只能一代一代往下选择 p>strong>i{color: red;}
4、相邻兄弟选择器
匹配所有紧随E父元素之后的同级子元素F
li+li{color: red;}
3、属性选择器
1、多元素选择器
由多个元素组合而成，同时匹配所有E元素或F元素，E和F之间用逗号分隔。
关联HTML的三种方式
关联HTML三种方式