1 CSS的简介

1.1 css：Cascading Style Sheets 层叠样式表，用来显示网页效果。

层叠：一层一层的

样式表：
很多的属性和属性值

使我的显示效果更好
CSS 将网页内容和显示效果进行分离，提高了显示功能

1.2css和html的结合方式（四种结合方式）

在每个html标签上面都有一个属性 style把css下和 html结合在一起

<div style = "background-color:red;color;green;">

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

<style type = "text/css">
div{//指对特定标签
background-color:red;
color：green;
}
</style>

3.在style标签里面使用语句

@import url（css文件路径);
第一步：先新建一个css文件

<style type = "text/css">
@import url（css文件路径);
</style>

4.使用头标签 link，引入外部css文件
第一步创建一个css文件

<link rel = "stylesheet" type = "text/css" href = css文件路径/>

第三种方式缺点在某些浏览器下不起作用
一般第四种
CSS优先级：
从上到下，从外到内，优先级由低到高
后加载的优先级高
格式选择器名称{ 属性名：属性值；属性名：属性值；}

1.3css的基本选择器

要对那个标签里面的数据进行操作
1.标签选择器

使用标签名作为选择器名称

div{
background-color:red;
color：green;
}

2.class选择器

每个html标签都有一个属性 class

background-color:red;
color：green;
}
...
<div class= "1">nihao</div>

加.
3.id 选择器
每个html标签都有一个属性 id

div#1{
background-color:red;
color：green;
}
...
<div id= "1">nihao</div>

加#

三种选择器的优先级
style选择器>id选择器>class选择器>标签选择器

1.4css的扩展选择器

1.关联选择器

<div><p>nihao</p></div>
设置div标签里的p标签的样式

div p{//div中的p标签 空格隔开
background-color:red;
}

2.组合选择器

<div>nihao</div>
<p> nihao</p>
把div和p标签设置成相同的样式

div,p{//逗号隔开
background-color:red;
}

3.伪元素选择器(了解）

css 里面提供的一些定义好的样式，可以拿过来使用
例如超链接
超链接状态
原始鼠标放上去点击点击之后
：link ：hover ：active ：vlsited

a:link{
background-color:red;
}
a:hover{
background-color:green;
}
a:active{
background-color:blue;
}
a:vlsited{
background-color:gray;
}
...
<a href="http://www.sinal.com.cn">nihao</a>

1.5css的盒子模型

**在进行布局前需要把数据封装到一块一块的区域内（div）
1.边框
border 2px solide blue；
border：统一设置
上：border-top
下：border-bottom
左：border- left
右：border-right
2.内边距
padding
3外边距
margin

1.6css布局的漂浮

float：
属性值：
左文本流向对象右边
右文本流向对象左边

1.7css的布局定位

position
属性值：

absolute：将文档从文档流中脱出
可以使用top bottom 进行绝对定位
relative：不会把对象从文档流中托出
可以使用 top bottom 进行绝对定位

CSS