CSS基础知识

1，CSS怎么写？ 直接写在标签内：<div style="CSS样式"></div> 在head的style标签内定义好CSS模板，通过选择器选中标签使其生效   2，CSS选择器 2.1，CSS选择器 场景一：i1是id选择器，选中id=1的使其生效，不推荐适用  　　CSS：<style>  #i1{  height: 66px; }</style>   　　标签：<div id='i1'></div>   场景二：c1是class选择器，选中id=1的使其生效，后面开始省略<style></style> 　　 CSS：.c1{……}         　　标签：<div class='c1'></div>   场景三：div{…}是标签选择器，选中所有div的使其生效  　　CSS：div{……}            　　 标签：<div></div>   场景四：层级选择器(空格)，选中c1 class中 c2 class的标签使其生效  　　CSS：.c1 .c2{……}       　　标签：<div class='c1'><div class='c2'></div></div>   场景五：层级选择器(空格)，选中span标签中的div标签使其生效 　　 CSS：span div{……}  　　标签：<span><div></div></span>   场景六：组合选择器(逗号)，同时选中多个标签使其生效，可以混合选择  　　CSS：#c1,.c2,div{……}    　　标签：<a id='i1'></a>  <a class='c2'></a>  <div></div>   场景七：属性选择器  　　CSS：input[type='text']{……}      /*找到input标签中，type=text的标签*/  　　标签：<input type='text' />  　　CSS：input[n='guxh']{……}         /*找到input标签中，自定义属性n=guxh的标签*/  　　标签：<input type='text'  n='guxh'/>  　　CSS：.c1[n='guxh']{……}             /*找到class='C1'标签中，自定义属性n=guxh的标签*/  　　标签：<div class='c1' n='guxh'></div>         优先级问题：  　　CSS：.c1{……}    .c2{……}  　　标签： <div class='c1 c2' style="color:red"></div>       　　优先级：该div标签一共有3个css，包括：style，c1，c2。三者没有重合则同时应用，有重合则应用次序为：style>c2>c1。   2.2，在单独文件中编写CSS模板  在一个html文件里编写的CSS样式，无法在另一个CSS中使用，为了提高CSS样式的重用性，可以创建CSS文件后引入，引入方法如下：  <link rel="stylesheet" href="commons.css" />   3，边框 设置加框范围：border，border-left，border-top，border-right，border-bottom 设置加框样式：4px solid red  ：宽度，样式（实线/虚线），颜色 例如四周加红色实现：style="border: 5px solid red"     4，字体 高度和宽度：  　　height：设置块的高度，可以是px或者百分比  　　width：宽度 像素，百分比 垂直居中和水平居中：  　　line-height:48px ，垂直方向根据标签高度放置，如果text的line-height和块的height一样，都是48px，就达到了垂直居中的效果 　　 text-align: center ，水平方向居中 字体：  　　color：字体颜色  　　font-size：字体大小 　　 font-weight：字体加粗 滚动条：  　　min-width：最小宽度，页面缩小到min-width会出现滚动条   5，float 2个块级标签设置了宽度后，默认都是独占一行，无法合占一行： 　　 <div style="width:20%; "> 1 </div> 　　 <div style="width:60%; "> 2 </div>   要想合占一行，就要用到float：  　　<div style="width:20%; float:left;"> 1 </div>  　　<div style="width:60%; float:left;"> 2 </div>  　　如果第二个div往右飘，则中间留空20%，如果第二个div占90%，则因为超出100%另起一行   让消失的父亲边框回来，不允许其他元素与之同一行：  　　在孩子float浮起来后，父亲边框会消失， 所有孩子div的最后加下面这句，可以让父亲的边框回来  　　清除同行元素，不允许其它元素与之在一行内。否则其他元素可能会与之发生交错情况  　　<div style="clear: both;"></div>             6，display 6.1，块级标签和行内标签的互相转换 display: inline;   让块级标签变成行内标签，相当于div变成span display: block;   让行内标签变成块级标签，相当于span变成div   6.2，让标签同时具备块级和行内的属性 行内标签：无法设置高度，宽度，padding，margin，自己有多高多宽就占多少 块级标签：可以设置高度，宽度，padding ，margin，默认占父级标签的100% display: inline-block;  块级标签具有行内标签的属性，默认自己有多少占多少；行内标签具有块级标签的属性，可以设置高度，宽度，padding，margin   6.3，让标签消失 display: none;   让标签消失              7，padding和margin padding和margin是设置子标签离开父级标签的距离，line-height和text-align是设置文字居中 padding和margin设置的时候有四个方向，依次为上/右/下/左，如果只设置两个方向则是上下/左右   <div style="border: 1px dotted red; height: 100px;">     <div style=" height: 50px;"></div> </div> 默认父亲div下的孩子div，会从上往下仅挨着父亲div放 如果上面留点边距，可以设置孩子div的margin，例如孩子div设置margin-top:25px，相当于居中了 如果下让孩子div占满父亲div，除了改变height，还可以孩子div设置padding-top:50px，相当于50+50=100占满了父亲div 调整外边距margin时，相当于孩子div的外部，即和父亲div之间的间距加大了 调整内边距padding时， 相当于孩子div自己内部的内容增加了   margin： 外边距，默认margin边距是8，如果想去掉边距，需要margin:0 margin:0 auto ， 上下去掉边距，左右自动即居中，相当于上下0px，左右auto，效果相当于margin:0 auto 0 auto margin: auto， 上下左右自动居中，相当于上下左右auto 设置margin：margin，margin-top，margin-bottom，margin-left，margin-right 设置padding：padding，padding-top，padding-bottom，padding-left，padding-right   样例，收藏本站，登录注册放在两边 <div style='background-color: green; height: 90px; line-height: 90px;'> <div style="width:980px; margin: 0 auto"> <div style="float:left;"> 收藏本站 </div> <div style="float:right;"> <a>登录</a> <a>注册</a> </div> <div style="clear:both"></div> # 实验这句不加也能实现效果 </div> </div>

 

8，postion 重点掌握1)position: fixed，2)父position:relative + 子position: absolute   fixed：  　　style="position: fixed" 　　 固定在某个位置，可以设置离开上下左右(top,bottom,left,right)的距离，滚动滑轮时该位置不会变化  　　设置为fixed后，相当于float了，可以完成头部菜单和内容的分离   absolute：  　　style="position: absolute" 　　 单独存在场景非常少，一般和relative结合使用  　　固定在某个位置，可以设置离开上下左右(top,bottom,left,right)的距离，滚动滑轮时该位置会变化   relative：  　　<div style="position: relative;">   　　　　<div style="pisition: absolute;"> xxx </div>  　　</div>  　　单独relative存在时没有任何意义，relative + absolute 可以实现子标签根据夫标签定位   样例一，结合JavaScript可以实现返回顶部的例子： <div onclick="GoTop()" style="position:fixed; bottom:20px; right:20px"> <script> function GoTop(){ document.body.scrollTop = 0; } </script>

 

样例二，position:fixed实现头部和内容的分离 <div style="height: 48px; position: fixed; top: 0; left:0; right:0">头部</div> <div style="margin-top: 50px; height: 3000px;">内容</div>

 

9，分层  z-index：层级顺序，越大越在上面。  opasity：明度，0~1  用position:fixed去覆盖底层，想要居中靠margin:auto 0；会失效，可以通过距离边缘百分比和px搞定，参考下面样例的顶层   样例：实现三层模态对话框功能：  　　顶层-中间遮罩层-底层，上面2层需要有position:fixed确保光标不管移动到哪都能跳出来，另外默认需要display:none，点击按钮后才触发呈现 <div style="z-index: 10; position: fixed; height:400px; width:500px; background-color: white; top: 50%; left:50%; margin-left: -250px; margin-top: -200px;" ></div> <div style="z-index: 9; position: fixed; background-color: black; top:0; right:0; left:0; bottom: 0; opacity: 0.5;"></div> <div style="height:5000px; background-color: green">asdf</div>

 

10，图片超出父级标签的范围时，overflow  hidden ：多的部分隐藏  auto：出现滚动条   样例，图片如果超出200px+200px，超出部分会被隐藏掉： <div style="height:200px; width:200px; overflow:hidden" > <img src="1.jpg"> </div>

 

11，hover  鼠标移动当前标签上式，hover样式才会生效  　　.pg-header .menu : hover{ background-color: blue}   样例，头顶部分离，居中菜单，应用hover   <head> <style> .pg-header{ position: fixed; right: 0; left:0; top:0; bottom: 0; height: 48px; background-color: #2459a2; line-height: 48px; /*让头部菜单内容上下居中*/ } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; /*让头部菜单内容左右各自留空些，如果是想居中，可以直接在.header里text-align: center;*/ } .pg-header .menu{ display: inline-block; /*行内标签页可以设置一些块级标签的属性*/ padding: 0 20px; /*上下留0px，左右留10px*/ } .pg-header .menu:hover{ /*鼠标移动到当前标签上时，以下CSS属性才生效*/ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="LOGO"> LOGO </a> <a class="menu"> 全部 </a> <a class="menu"> 42区 </a> <a class="menu"> 段子 </a> <a class="menu"> 笑话 </a> </div> </div> <div class="pg-body"> <div class="w"> 内容 </div> </div> </body>

 

12，Background，背景图片  background-image: url('image/x.gif')；  # 如果div大，则图片会重复堆叠放  Background-repeat: no repeat;   # 可以让图片不再重复堆叠  Background-position-x: 3px  # 只横着加  Background-position-y: 4px  # 只竖着加  等效于：background-position: 3px，4px  简写方法：background: url()  3px  4px  no-repeat;  # 直接在background属性下加值   样例一，一幅竖着很长的图片，实现选中不同位置的小图标呈现（大网站图标都是靠这种方式实现，减少请求次数） <div style="background-image: url('image/x.jpeg'); background-repeat: no repeat; <!--默认会堆叠放，加上no-repeat后就不会堆叠放了--> height:80px; height: 20px; width: 20px; Background-position-x: 0px; <!--默认就是0px，可以省略--> Background-position-y: -30px; "> <!--靠移动y轴改变图片，2句可以合并为background-position: 0px，-30px --> </div>

 

样例二，input登陆框边上加上个小图标，用到了background，position，padding，display <div style="height: 35px; width: 400px; position: relative"> <input type="text" style="height: 35px; width: 370px; padding-right: 30px"> <span style="background-image: url(x.jpg); right:5px; top:10px; height: 20px; width: 20px; display: inline-block; position: absolute"></span> </div>

 

13，其他 自适应：media IE中，默认img标签，有一个1px的边框，如果不需要，可以<style>img{border:0;}</style>     CSS需要掌握的属性：  position：位置，absolute+relative，fixed  background-color：背景色  text-align：  margin  padding  font-size  z-index  over-flow  :hover  opacity  float  clear:both  line-height  border  color  display  height：高度

转载于:https://www.cnblogs.com/guxh/p/9695073.html

相关资源：JAVA上百实例源码以及开源项目