前端三把利器之CSS总结

最新推荐文章于 2019-09-23 21:38:22 发布

Burgess_zheng

最新推荐文章于 2019-09-23 21:38:22 发布

阅读量1.3k

点赞数 10

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/Burgess_zheng/article/details/86484821

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

上一篇：前端三把利器之HTML总结点击跳转
目录篇：前端(html,css,js)目录篇点击跳转
下一篇：前端三把利器之javascript总结点击跳转

CSS 美化网页控件的代码（层叠样式表）
1）编写CSS几种方式：
2）标签常用属性
3）float：让标签狼起来，块级标签页可以堆叠
4）display：块级标签和行内(内联)标签转换转换
5）margin、padding边距
6）position内部属性（固定页面标签）fixed、absolute、relative
7）overflow
8) :hover 当样式后面加上:hover，那么鼠标移到装饰该样式的标签，该:hover样式生效
9) background-image：背景图片

CSS 美化网页控件的代码（层叠样式表）

1）编写CSS几种方式：

1.1标签的style属性实现标签装饰（装饰功能不能重复使用：极少用到）

 <div style="background-color:red;height:48px;">1</div>

1.2（标准名称：id选择器）

<!--head标签下的style标签下的装饰功能使用：（id选择器），
那么body标签下的标签通过id匹配进行装饰
(装饰功能可重复被调用但不规范：极少用到)-->
<head>
    <style>
        #i1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
    <div id="i1">2</div>
</body>
</html>

1.3（标准名称：class选择器）

<!-- head标签下的style标签下的装饰功能使用：（class选择器），
那么body标签下的标签通过class关键字匹配进行装饰
(装饰功能可重复调用，且规范，常用)-->      
<head>
    <style>
        .c1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
    <div class="c1">3</div>
</body>
</html>

1.4 (标准名称：标签选择器)

<!-- head标签下的style标签下的装饰功能使用：（标签选择器），
那么body标签下的标签匹配的功能标签名将被动装饰-->

<head>
    <style>
        div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
    <div>4</div>
</body>
</html>

1.5(标准名称：层级(关联)选择器，使用空格区分)

<!--5 head标签下的style标签下的装饰功能使用：（层级（关联）选择器），

       那么body标签下的标签下的标签匹配的层级功能标签名将被动装饰（可以拥有N层）-->

<head>
    <style>
       span div{
            background-color: #2459a2;
            height: 48px;
        }

       .c2{
            background-color: #2459a2;
            height: 48px;
        }

      .c2 div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
<span class="c2">
      <div>5</div>
<span>
</body>

1.6(标准名称：组合选择器,使用逗号区分)


<!--6 head标签下在style标签下的装饰功能使用：（组合选择器），
body标签下的标签通过id匹配进行装饰（该装饰功能可以拥有N个id）
body标签下的标签通过class关键字匹配进行装饰（该装饰功能可以拥有N个class关键字）-->

<head>
    <style>
       #i1,#i2 {
            background-color: #2459a2;
            height: 48px;
        }

       .c3,.i3 {
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
   <div id="i1">6</div>
             <div id="i2">7</div>
   <div class="c3">6</div>
             <div class="i3">7</div>
</body>

1.7(标准名称：属性选择器)

<!--7 head标签下在style标签下的装饰功能使用：（属性选择器），
body标签下的标签自身的属性被匹配到后，被动进行装饰-->
<head>
   <style>
          input[type="test"] { width:200px; height:30px; }
input[type="password"] { width:60px; height:20px; }
input[value="burgess"] { width:400px; height:30px; }
.c1[type="password"] { width:60px; height:30px; }
   </style>
</head>
<body>
      <input class="c1" type="test" value="burgess" >
<input class="c1" type="password" >
</body>

1.8 style标签下的注释格式：/*注释说明*/

1.9 style优先级：标签上style优先，通过选择器，就近原则

1.10 style装饰功能可以写在单独的css文件上，然后通过在head标签下添加link标签引用该文件装饰功能

<head>
     <link rel="stylesheet" href="css/commons.css" />
</head>
<body>
      <div class="c5 c6" style="color:pink">asdf</div>
</body>

2）标签常用属性

2.1 height：48px 高度

2.2 border:边框(属性:宽，样式，颜色)

2.3 width：%80 宽度(写法：像素：百分比)

2.4 font-size:16px 字体大小

2.5 text-align:center 居中

2.6 line-height:48px 字符串放在像素大小的中间

2.7 font-weight:bold 字体加粗

3）float：让标签狼起来，块级标签页可以堆叠

1 如：div标签是块级白板标签所以一个块级标签不管字符串多少就占据一行

如果想在一行里面使用2个块级标签以上的话：

必须使用float内部属性：这样就可以让块级标签变成行内标签了

folat:left让块级标签变成行内标签，往左靠

folat:right让块级标签变成行内标签，往右靠

（注：需大于2个并且紧挨着标签，同时使用folat)

超过100%宽度就另起一行-->

格式：

 <body>
    <div style="width: 20%;background-color: red;">1</div>
    <div style="width: 20%;background-color: black;">2</div>
    <br>
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 30%;background-color: black;float: left">2</div>
    <br>
    <div style="width: 20%;background-color: orange;float: left">1</div>
    <div style="width: 30%;background-color: olive;float:right ">2</div>
    <br>
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 50%;background-color: yellow;float: left">1</div>
    <div style="width: 30%;background-color: black;float:right ">2</div>
</body>

2 如果子标签使用foalt，那么该子标签的父级标签有边框，

就需要在子标签最后增加多一个： <div style="clear:both"></div>>

(撑开父标签高度)

格式：

<div style="width:300px;border:1px solid red;">
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
   <div style="clear:both"></div>>
<!--
上级（父级）div标签的border边框会被子级标签float弄消失，
所以需要在子级标签尾部增加多一个标签：
<div style="clear:both"></div>>
这样父级div标签的border边框才会出现(撑开父标签高度)
 -->
    </div>

4）display：块级标签和行内(内联)标签转换转换

   1. display:inline 块级转行内

   2. display:block 行内转块级

3. display:inline-block; 具备块级和行内标签的属性：使行内标签具备可设置性如：（高度，宽度，padding margin）

   4. display=none 让标签消失(学习了js，你可以弄个按钮，点下就显示，在点下就消失。如有一些网站有灯的，点下就亮，在点下就不亮) ********

   5. 块级标签：设置高度，宽度，padding margin

   6. 行内标签：无法设置高度，宽度，padding margin

5）margin、padding边距

1.margin 外边距

格式：

<body>

     <div style="border:1px solid red;height:70px;">

         <div style="background-color: green; height:50px;

          width:600px;margin-top:0px;">123</div>

     </div>
<br>

     <div style="border:1px solid red;height:70px;">

         <div style="background-color: green; height:50px;

         width:600px;margin-top:10px;margin-left:150px;">123</div>

     </div>
<!-

margin-top:外边距，默认(margin-top:0子标签的高度占据父标签边框的顶部)

margin-top:0的时候，如:子标签高度：50px，宽度600px

             该子标签的高度占据的是父标签边框的顶部,宽度是占据父标签最左边

margin-top:10的时候，margin-left:150的时候

             该子标签的高度占据的是父标签边框的顶部往下移动10像素

             该子标签的宽度占据的是父标签边框最左边往右移动150像素

同理：margin-bottom 和 margin-top方向相反

同理：margin-right 和 margin-left方向相反-->
</body>

2.padding 内边距

格式：

<body>

     <div style="border:1px solid red;height:70px;">
         <div style="background-color: green; height:50px;
         width:600px; padding-top:0;">123</div>
     </div>
     <br>
     <div style="border:1px solid red;height:70px;">
         <div style="background-color: green; height:50px;
         width:600px; padding-top:15px; padding-left: 150px">123</div>
     </div>
<!--
padding-top:内边距,默认（padding-top:0 子标签的高度占据父标签边框的顶部）
padding-top:0的时候，如：子标签高度：50px， 宽度是600px
      该子标签的高度占据的是父标签边框的顶部,宽度是占据父标签最左边
padding-top:15的时候，margin-left:150的时候，
      高度=50+15 =65  宽度=600+150=750
      该子标签高度在顶部增加15px的高度，也就是该子标签高度=65（记住是顶部增加）
     该子标签宽度在左边增加150px的宽度，也就是该子标签宽度=750（记住是顶部增加）
 -->
</body>

6）position内部属性（固定页面标签）fixed、absolute、relative

1.position: fixed; 固定在页面某个位置，，浏览器滚动，跟着滚动

2.position:absolute; 绝对固定在页面某个位置，浏览器滚动，不跟着滚动（应用场景不多，但是如果和absolute+relative那么可以应用很多场景）

3.position:relative;单独使用没有任何效果配合absolute使用（标签有position:relative;那么该标签下的标签有position:absolute;这个时候：absolute标签固定在relative标签的某个位置）

4.pisition多层：应用场景当点击一个按钮的时候，跳出一个框，值可以对该框进行操作

需要使用两个内部属性配合:

z-index:9；区别层级，谁的数字大，谁就在最上层

opacity: 0.5; 透明度，0到1，0完全透明 1完全遮住

position: fixed应用场景：

1.1滚动页面的时候不管如何页面往下滚动会出现一个返回顶部

格式：

<body>
    <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom:20px;
    right: 20px;">
    返回顶部
    </div>

<!--
内部属性position: fixed&ndash;&gt;把该div从底层放到上层 固定到页面某个位置
（图层概念，默认是div都是背景层（也就是底层））
bottom:20px  把该div标签放在离底部20PX
right：20px  把该div标签放在离右边20PX
这样该标签永远放在浏览器页面右下角距离底部和右边20PX距离
onclick="GoTop()：Js时候教的
-->
    <div style="height: 5000px;background-color: #dddddd;">
        asdfasdf
    </div>
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>
         position: fixed应用场景

1.2.不管页面如何滚动，上面的菜单永远在顶部

格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header01{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
/*position: fixed;  固定页面的位置，并且把该div从背景层（底层）变底层上层
固定在 top right left:距离顶部、左、右 0px距离
这样以后就不管你页面往下滚动，该div一直存在该浏览器页面的顶部
*/
        .pg-body01{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
/*背景层（底层）试验position写的装饰功能
margin-top偏离顶部50px这样才不会被盖住
（后期就不需要了，因为可以利用display隐藏固定div*/


    </style>
</head>
<body>
    <div class="pg-header01">头部</div>
<!-- 调用pg-header01装饰，达到不管你如何在浏览器滚动页面，该div永远在页面顶部-->
    <div class="pg-body01">内容</div>
<!--背景层（底层）试验positionn该内部参数-->
</body>
</html>

position:relative;配合position:absolute应用场景：

absolute标签依据relative标签进行固定位置

格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
<!--position:relative；和position：absolute配合使用：
absolute标签固定在relative标签的某个位置（abosolut依据relative标签固定位置）-->
</body>
</html>

position多层应用场景

当点击一个按钮的时候，跳出一个框，值可以对该框进行操作

格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="z-index:10; position: fixed;top: 50%;left:50%;
    margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">

        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
<!--第三层
z-index:9；区别层级，谁的数字大，谁就在最上层
需要注意有了position的标签margin：0居中会失效
应用场景：本身该标签加上内部属性display:none；隐藏的
然后当点一个按钮以后，这个框就跳出来（JS的时候才讲display实现按钮功能）-->
    <div style="z-index:9; position: fixed;background-color: black;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.5;
    "></div>
<!--第二层
 用黑色覆盖了第一层
opacity: 0.5;透明度，0到1，0完全透明 1完全遮住
z-index:9；区别层级，谁的数字大，谁就在最上层
-->
    <div style="height: 5000px;background-color: green;">
        asdfasdf
    </div>
<!--背景层（第一层）-->
</body>
</html>

7）overflow

overflow: hidden放置的图片，超过标签定义的高度和宽度，超过的隐藏

overflow: auto：放置的图片，超过定义标签的高度和宽度，超过出现滚动条

格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;width: 300px;overflow: auto">
        <img src="1.jpg">
    </div>
<!--overflow: auto：放置的图片，超过定义标签的高度和宽度，超过出现滚动条-->
    <div style="height: 200px;width: 300px;overflow: hidden">
        <img src="1.jpg">
    </div>
<!--overflow: hidden放置的图片，超过标签定义的高度和宽度，超过的隐藏-->

    <div style="height: 200px;width: 300px;">
        <img src="1.jpg" style="height: 200px;width: 300px">
    </div>
<!--把图片大小调成定义好的宽高度一样的大小-->

</body>
</html>

8) :hover 当样式后面加上:hover，那么鼠标移到装饰该样式的标签，该:hover样式生效

格式

 <style>
        .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
/*
display: inline-block; 行内标签转块级标签（a标签就可以设置左右上下宽度）
padding: 10px     （上下左右+10px）
padding:0 10px    （上下+0px 、左右+10px）
padding: 0 10px 0 10px （上+0px 、右+10px 、下+0px 、左+10px）
*/
        .menu:hover{
            background-color: blue;
        }
/*
menu:hover:当鼠标移动到当前menu标签上时，该hover属性才生效
*/
    </style>
</head>
<body>
    <div>
        <a class="logo">LOGO</a>
<!--一般需要点击以后跳转的都需要a标签-->
        <a class="menu">全部</a>
        <a class="menu">42区</a>
        <a class="menu">段子</a>
        <a class="menu">1024</a>
<!--由于menu样式使用了:hover，当鼠标移动至装饰menu样式的标签
那么该:hover样式会生效-->
    </div>
    </div>
</body>

9) background-image：背景图片

background-image: url(icon_18_118.png) 添加背景图片；（默认图片横竖平铺该div空间）

background-repeat:repeat-y; 图片竖平铺，

background-repeat:repeat-x; 图片横平铺，

background-repeat:no-repeat; 不平铺，

background-position-x:0px;横向移动框内背景图片

background-position-y:-140px;竖向移动框内背景图片

background-position:0 -140px ;上面两个综合简写

格式

  <div style="background-image: url(icon_18_118.png);
    height: 180px;border: 1px solid red">
    </div>
<!--background-image: url(icon_18_118.png) 背景图片；
默认图片横竖平铺该div空间-->

    <div style="background-image: url(icon_18_118.png);
    background-repeat:repeat-y;
    height: 360px;border: 1px solid red">
    </div>
<!--background-image: url(icon_18_118.png) 背景图片；
background-repeat:repeat-y; 图片竖平铺，
background-repeat:repeat-x; 图片横平铺，
-->


    <div style="background-image: url(icon_18_118.png);
    background-repeat:no-repeat;
    height: 20px;width:20px;border: 1px solid red">
    </div>
<!--background-image: url(icon_18_118.png) 背景图片；
background-repeat:no-repeat; 不平铺，
-->

    <div style="background-image: url(icon_18_118.png);
    background-repeat:no-repeat;
    height: 20px;width:20px;border: 1px solid red;
    background-position-x:0px;
    background-position-y:-140px;">
    </div>

<!--background-image: url(icon_18_118.png) 背景图片；
background-repeat:no-repeat; 不平铺，
background-position-x:0px;横向移动背景图片
background-position-y:-140px;竖向移动北京图片
background-position:0 -140px ;上面两个综合简写
-->

上一篇：前端三把利器之HTML总结点击跳转
目录篇：前端(html,css,js)目录篇点击跳转
下一篇：前端三把利器之javascript总结点击跳转

Burgess_zheng

关注

10
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
前端三把利器之CSS总结

上一篇：前端三把利器之HTML总结点击跳转目录篇：前端(html,css,js)目录篇点击跳转下一篇：前端三把利器之javascript总结点击跳转目录CSS 美化网页控件的代码（层叠样式表） 1）编写CSS几种方式： 2）标签常用属性 3）float：让标签狼起来，块级标签页可以堆叠 4）display：块级标签和行内(内联)标签转换转换 5）margin、pad...
复制链接

扫一扫