前端三把利器之CSS总结

上一篇：前端三把利器之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属性实现标签装饰（装饰功能不能重复使用：极少用到）

 
1

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

    


    
2

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

      

    


    
3

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

    


    
4

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

    



      
5

    

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

    


   
6
             
7
   
6
             
7

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

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

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

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

    

     


      
asdf

• 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%宽度就另起一行-->

格式 ：

 
    
1
    
2
    

    
1
    
2
    

    
1
    
2
    

    
1
    
1
    
2

 

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

       就需要在子标签最后增加多一个： <div style="clear:both">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 外边距

格式：

     


         
123

     



     


         
123

     

 

    2.padding 内边距

格式：

     

         
123
     
     

     

         
123
     

• 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滚动页面的时候不管如何页面往下滚动会出现一个返回顶部

格式：

    

    返回顶部
    


    

        asdfasdf
    
    


         position: fixed应用场景

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

格式：

    
    
    


    
头部

    
内容

 

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

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

格式：

 

       position多层应用场景

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

格式：

    
    


    


        
        
        
    

    


    

        asdfasdf
    

• 7）overflow

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

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

格式

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

格式
   

 


    

        LOGO

        全部
        42区
        段子
        1024

    
    

• 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 ;上面两个综合简写

格式

 

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