CSS笔记

CSS部分：

一、CSS简介

层叠样式表
层叠：一层层叠加，显示最上面层。
样式表：很多属性和属性值
作用：使得网页显示效果更好，将内容和样式进行分离。
格式：CSS属性之间用;相隔，HTML用空格
     CSS属性和属性值用:相连，HTML用等号
二、HTML和CSS的四种结合方式
（1）每个标签上都有一个style属性，把HTML和CSS结合在一起。
-<div style="background-color:red;color:green">HTML和CSS结合方式一</div>
（2）使用HTML里的<style>标签，放在head里面
-<style type="text/css">
CSS代码
</style>
- <style type="text/css">
 div{
 background-color:red;color:green
 }
 </style>
（3）在<style type="text/css">标签里面使用语句，导入CSS文件，CSS文件放入CSS代码
-第一步，创建一个CSS文件
@import url(CSS文件路径);
（4）使用头标签<link>,引入外部css文件
-第一步，创建一个CSS文件
-<link rel="stylesheet" type="text/css" href="css文件路径">


 ****第三种结合方式，缺点：在某些浏览器不能使用，为了实现CSS和内容和样式分离，一般使用第四种方式。


 三、CSS的优先级和格式
优先级：从上到下，从外到内，优先级从低到高。


格式：
选择器{属性名：属性值;属性名：属性值;...
}
四、三种选择器
（1）标签选择器：使用标签名作为选择器名称
div{
background-color:red;color:green;
}
（2）class选择器：每个HTML标签都有一个class属性
div.hh{
background-color:red;color:green;
}
<div class="hh">
（3）id选择器：每个HTML标签都有一个id属性
div#hh{
background-color:#ffff00;color:#9933ff;
}
<div id="hh">
     ***优先级：style(即第一种HTML与CSS结合方式)>id选择器>class选择器>标签选择器


五、扩展选择器
（1）关联选择器；设置被嵌套标签里的样式
div p{
background-color:#ffff00;color:#9933ff;
}
（2）组合选择器：把几个标签设置成统一样式
div p{
background-color:#ffff00;color:#9933ff;
}
（3）伪元素选择器：css里提供了一些定义好的样式，可以拿来使用。（了解即可）
  比如超链接：
原始状态   鼠标悬停状态   点击瞬间状态   点击之后状态
:link      :hover   :active  :visited


六、CSS的盒子模型
边框：border属性（统一设置） border-top（上） border-buttom（下） border-left（左） border-right（右）
内边距：padding属性（统一设置）padding-top（上）padding-buttom（下）padding-left（左） padding-right（右）
外边距：margin属性（统一设置）margin-top（上） margin-buttom（下） margin-left（左） margin-right（右）
七、CSS的漂浮
float属性（这个属性总应用于图像，使文本围绕在图像周围）：left(元素往左移动) right(元素往右移动边框)
八、CSS的定位
position属性:absolute:元素框从文档流完全删除，可以通过top,left,righ进行移动元素框
    relative元素框不从文档流删除，保留原位置，同样可以通过top,left,righ进行移动元素框