核心提示：css一、css与html的结合方式1.标签内写入style=2.在头标签内写入stylecss代码/style3.在头标签内写入style@import url=css文件路径/style 有些浏览...
css
一、css与html的结合方式
1.标签内写入style=””
2.在头标签内写入<style>css代码</style>
3.在头标签内写入<style>@import url="css文件路径"</style> 有些浏览器不起作用
4.<link rel="stylesheet" src="路径"/>
二、选择器（写在头标签或者css文件中均可）
1.标签选择器
<style>
p{font-size:20px;}
</style>
<p>我的字体大小为20px;</p>
2.class选择器
<style>
.aa{font-size:20px;}
</style>
<p class="aa">我的字体大小为20px;</p>
3.id选择器
<style>
#bb{font-size:20px;}
</style>
<p id="bb">我的字体大小为20px;</p>
优先级：style>id>class>标签
4.扩展选择器
a.关联选择器（主要用于嵌套标签中）
<style>
p p{font-size:20px;}
</style>
<p><p>设置p标签中的样式</p></p>
b.组合选择器
<style>
p,p{font-size:20px;}
</style>
<p>p和p中样式相同</p>
<p>p和p中样式相同</p>
c.伪元素选择器（css中设置好的样式）比如超链接中<a></a>
：link 原本样式 ：hover 鼠标悬停时 ：active 鼠标点击时 ：visited 访问过后时
三、盒子模型
通常每个p可以看作一个盒子模型
主要属性：border margin padding
设置自身边框
border:1px sloid #FFFFFF;
对于margin外边距，即自身边框与外面的边框的距离，可以设置margin-top，margin-left，-right,-bottom.
对于padding内边距，即盒子里文字与盒子的距离，其余与margin相同
四、定位
float：left/right;
<style>
.aa{float:left;width:100px;height:100px;}
.bb{float:left;width:100px;height:100px;}
</style>
<p class="aa"></p>
<p class="bb"></p>
position:absolute/relative/fixed;
absolute:脱离了文档流，即使整个盒子相对于的位置是body，
relative:没有脱离文档流，相对于的位置是父元素
fixed:相对于浏览器，即使产生滚动条也不会改变位置
会根据其放的位置进行不一样的覆盖
<style>
.aa{width:100px;height: 100px; border: 1px solid blue; background-color: #DEB887; position: absolute;left:50px;}
.bb{width:200px;height: 200px; border: 1px solid blue; background-color:aqua;position: absolute;left:60px;}
.cc{width:100px;height: 100px; border: 1px solid blue; background-color:chartreuse;position:relative;left:50px;}
</style>
<body>
<p class="bb">
<p class="cc"></p>
</p>
<p class=aa></p>
//在同一个位置的会覆盖，但上面代码和下面代码显示的覆盖不一样
因为其是从上到下进行执行代码
<p class=aa></p>
<p class="bb">
<p class="cc"></p>
</p>
</body>
