css

1. css：层叠样式表

层叠：一层一层的
样式表：很多的属性和属性值
提高代码的可维护性

---

2. css和html的结合方式：四种

• 在每个html的标签上面都有一个属性style，把css和html结合在一起
  <div style = "background-color:red; color:green;"></div>

• 使用html的一个<style>标签实现，写在head里面
  

  <style type = "text/css">
  div{
    background-color:red;
    color:green;
  }
</style>

• 在style标签里面使用语句
  第一步：
  创建一个css文件
  第二部：
  @import url(css文件的路径);
• 使用头标签link，引入外部的文件
  第一步：
  创建一个css文件
  第二步：
  <link rel="stylesheet" type="text/css" href="css文件的路径“/>

第三种结合方式缺点：在有些的浏览器中不能使用，一般使用第四种方式
优先级的问题：由上到下，由外到内，优先级由低到高，后加载的优先级高（一般情况）

选择器名称：选择器名称{属性名:属性值;属性名:属性值;......}

---

3. css的选择器

选择器：要对哪个标签的数据进行操作

• 标签选择器：
  使用标签名作为选择器的名称

• class选择器
  每个html标签都有一个属性class
<div class="hah"></div>

  <style type = "text/css">
  div.hah{
    background-color:red;
    color:green;
  }
</style>

• id选择器
  每个html标签都有一个属性id
<div id="hah"></div>

 <style type = "text/css">
  div#hah{
    background-color:red;
    color:green;
  }
</style>

优先级

style > id选择器 > class选择器 > 标签选择器

---

4. css的扩展选择器

• 关联选择器
  设置div标签里标签的样式，嵌套标签里面的样式
  <div><p></p></div>

 <style type = "text/css">
  div p{
    background-color:red;
    color:green;
  }
</style>

• 组合选择器
  设置div标签和p标签显示相同的样式
  <div></div>
  <p></p>

 <style type = "text/css">
  div,p{
    background-color:red;
    color:green;
  }
</style>

• 伪元素选择器
  css里面提供了定义好的样式,可以拿过来使用

超链接状态：

原始状态	悬停状态	点击状态	点击后状态
:link	:hover	:active	:visited

<a href >超链接1</a>

<style type = "text/css">
  a:link{
    background-color:blue;
  }
  a:link{
    background-color:green;
  }
  a:link{
    background-color:red;
  }
  a:visited{
    background-color:gray;
  }
</style>

---

5. 盒子模型

• 边框：borde
  border：2px solid blue;
  粗细 样式 颜色
  上：border-top
  下：border-bottom
  左：border-left
  右：border-right
• 内边距padding
  可以统一设置也可以分别设置，div里面内容与div边框的距离
• 外边距margin
  可以统一设置也可以分别设置，div外与别的div的距离

---

6. css的布局的漂浮

float
left:文本流向div的右边
right:文本流向div的左边

---

7. css布局的定位

position
absolution:将对象从文档流总拖出，可以是top、bottom、left、right等属性进行定位
relative:不会将对象从文档流总拖出，可以是top、bottom、left、right等属性进行定位