css

css简介

　　* css ： 层叠样式表

　　* 使页面显示效果更好

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

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

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

　　　　　　- <div style="backgrcound-color:red;color:green"

　　(2) 使用html的一个标签实现<style>标签，写在head中

　　　　　　* <style type="text/css">

　　　　　　　　　标签名称{　css代码    }

　　　　　　　</style>

　　(3) 在style标签里面使用语句

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

　　　　　　<style type="test/css">

　　　　　　　　　　@import url( .css)

　　　　　　</style>

　　(4) 使用头标签link,引入外部css文件

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

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

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

　　*** 优先级

　　　　　　由上到下，由外到内，优先级由低到高

　　　　　　*** 后加载的优先级高

css的基本选择器(三种)

　　　　(1) 标签选择器

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

　　　　　　　　　　　　标签名{

　　　　　　　　　　　　　　}

　　　　(2) class选择器

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

　　　　　　　　- <div class=“haha”> aaa </标签名>

　　　　　　　　- .haha{

　　　　　　　　　　}

　　　　(3) id选择器

　　　　　　　　* 每个html标签上面有一个属性 id

　　　　　　　　- <div id="hehe">bbb</div>

　　　　　　　　- #hehe{

　　　　　　　　　　}

 　　　　　　优先级：style> id选择器 > class选择器 > 标签选择器

css的扩展选择器

　　　　　（1）关联选择器

　　　　　　　　　　* <div><p>wwwww<p><div>

　　　　　　　　　　* 设置div标签里的p标签的样式，嵌套标签里面的样式

　　　　　　　　　　* div p {　　　　　　　　}

　　　　　（2）组合选择器

　　　　　　　　　　*  <div>1111</div>

　　　　　　　　　　　<p>2222</p>

　　　　　　　　　　*  把div和p标签设置成相同的样式，把不同的标签设置成相同的样式

　　　　　　　　　　* div,p {　　　　　　}

　　　　　（3）伪元素选择器

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

　　　　　　　　　　* 比如超链接

　　　　　　　　　　　　　　** 超链接的状态

　　　　　　　　　　　　　　　　原始状态　　鼠标放上去状态　　　点击　　点击之后

　　　　　　　　　　　　　　　　：link　　　　　　：hover　　　　:active　　:visited

css的盒子模型

　　　　* 在进行布局前需要把数据封装到一块一块的区域内(div)

　　　　（1）边框

　　　　　　　　border：2px solid bule；

　　　　　　　　border：统一设置

　　　　　　　　  上 border-top

　　　　　　　　  下 border-bottom

　　　　　　　　  左 border-left 

　　　　　　　　  右 border-right

　　　　（2）内边距

　　　　　　　　padding:20px;

　　　　　　　　使用paddin统一设置

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

　　　　　　　　  上 border-top

　　　　　　　　  下 border-bottom

　　　　　　　　  左 border-left 

　　　　　　　　  右 border-right

　　　　（3）外边距

　　　　　　　　margin：20px

　　　　　　　　可以使用margin统一设置

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

　　　　　　　　  上 border-top

　　　　　　　　  下 border-bottom

　　　　　　　　  左 border-left 

　　　　　　　　  右 border-right

css布局的漂浮

　　　　　float:

　　　　　　　** 属性

　　　　　　　　　　left：文本流向对象的右边

　　　　　　　　　　right：文本流向对象的左边 

css布局的定位

　　　　position：

　　　　　　　** 属性

　　　　　　　　　　absolute：

　　　　　　　　　　　　将对象从文档流中拖出

　　　　　　　　　　　　可以使top，bottom进行定位

　　　　　　　　　　relative

　　　　　　　　　　　　不会把对象从文档流中拖出

　　　　　　　　　　　　可以使top，bottom进行定位

转载于:https://www.cnblogs.com/D1212/p/10605029.html