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下的孩子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：高度

posted @ 2018-09-24 11:22 GUXH 阅读(309) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

人一切的痛苦，本质上都是对自己无能的愤怒。而自律，恰恰是解决人生痛苦的根本途径。

CSS基础知识

公告