简单css的使用

1 CSS的简介

css:层叠样式表

层叠：一层一层的

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

css将网页内容和显示样式进行分离，提高了显示功能

2 css和html的结合方式（四中结合方式）

1 在每个html标签上面都有一个属性style，把css与html结合在一起

例：<div style="background-color:read;color:green"></div>

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

例：<style type="text/css">

div{

background-color:blue;

color:red;

}

</style>

3 在style标签里面 使用语句

@import url(css文件的路径)

首先得创建一个css文件

例：

<style type="text/css">

@import url(div.css)

</style>

4 使用头标签link，引入外部css文件

第一步，创建一个css文件。

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

第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

优先级：由上到下，由内到外，优先级由低到高，一般情况下，后加载的优先级较高

格式：

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

3 css的选择器

要对那个标签里面的数据进行操作

（1）标签选择器

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

（2） class选择器

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

<div class="名称"></div>

div.名称{}

  （3） 每个html标签上面都有一个属性id

<div id="名称"></div>

div#名称{}

选择器的优先级 

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

4 css的扩展选择器

（1）关联选择器

例：<div><p>wwwww</p></div> 对p标签的内容进行设置样式

div p{  }

    (2) 组合选择器

例：<div>11111</div> <p>222222</p> 把div与p标签设置成相同的样式

div,p{}

   （3）伪元素选择器

css提供了一些定义好的样式，可以拿过来使用

比如超链接的状态 原始状态，鼠标悬停状态 点击，点击之后

:lingk       :hover             :active    :visted

a:lingk{ }  a:hover{} a:active{} a:visted{}

5 css的盒子模型

（1） 边框

border 2px(粗细) solid（样式）颜色

border ：统一设置

分别设置：border-top border-bottom border-right border-left

（2）内边距

padding:20px;

使用padding统一设置

也可以分别设置上下左右四个内边距

 （3）外边距

margin:20px

可以使用margin统一设置

也可以分别设置上下左右四个外边距

6 css的布局的漂浮

float:    属性值  right :文本流向对象的右边 

   left：文本流向对象的左边

7 css布局的定位

position 属性值

absolute:将对象从文档流中拖出，之后可以设置left,right,top,bottom

relative:不会把对象从文档流中拖出，之后可以设置left,right,top,bottom

8 内容总结

1 css和html的四种结合方式

2 css的基本选择器 

标签选择器 使用标签名

class选择器 .名称

id选择器 #名称

优先级： style>id>class>标签

3 css的扩展选择器

关联选择器

设置嵌套标签的样式 div p{}

组合选择器

不同的标签具有相同的样式 div,p{}

伪元素选择器

超链接的状态

原始：link

悬停：hover

点击：active

点击之后：visted

4 盒子模型

边框 border:2px solid red;

上下左右

内边距 padding:20px;

上下左右

外边距 margin:20px;

上下左右

5 布局的漂浮

float    left:后面的div到右边

    right:后面到div的左边

6 布局的定位

poition  absolute    从文档流中拖出

relative     不会从文档流中拖出