zoukankan      html  css  js  c++  java

  • 前端笔记-css

    css（穿着）

    1.　第一种<head><style></style></head>中可以写css样式

    　　css选择器　　定位到哪个标签的css

    　　　　id选择器

    <!DOCTYPE html>
ssng="en">
<head>
    <meta charset="UTF-8">
    <!--样式标签-->
    <title>css_id选择器</title>
    <style>
        /*id选择器*/
        /*#代指id*/
        #div1{background-color:red}
    </style>
</head>
<body>
    <div id="div1">nihao</div>
</body>
</html>

    　　　　id组合选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--样式标签-->
    <title>css</title>
    <style>
        /*id组合选择器选择器*/
        /*id选择器扩展组合写法，注意格式逗号，和井号*/
        #w1,#w2{
            background-color: red;
        }
    </style>
</head>
<body>
    　  <!--id中的元素在同一个html中只能出现一次，class可以出现多次-->    
    <div id="w1">1</div>
    <div id="w2">2</div>
</body>
</html>

    　　　　class选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--样式标签-->
    <title>css</title>
    <style>
        /*class选择器*/
        /*.代指class*/
        .c1{background-color:black}
    </style>
</head>
<body>
    <div class="c1">nihao</div>
</body>
</html>

    　　　　class组合选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--样式标签-->
    <title>css</title>
    <style>
        /*class组合选择器选择器*/
        /*class选择器扩展组合写法，注意格式逗号，和点*/
        .c1,.c2{ 
            background-color: red;
        }
　　　　,.c3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!--class中的元素在同一个html中可以出现多次，而id只能出现一次-->
    <div class="c1">1</div>
    <div class="c1 c2">2</div>
    <div class="c3">3</div>
</body>
</html>

    　　　　标签选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--样式标签-->
    <title>css</title>
    <style>
        /*标签选择器*/
        /*直接指定标签，其结果会引用到当前html中所有的元素，不过通常还是用定位比较准确的选择器比较好*/
        div{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>nihao</div>
</body>
</html>

    　　　　标签层级选择器　　在标签选择器中更深层的定位

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--样式标签-->
    <title>css</title>
    <style>
        /*标签层级选择器*/
        /*直接指定标签后加上空格表示层级再加上后续标签*/
        div span{
            background-color: red;
        }
        div div{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div>1</div>
        <span>2</span>
    </div>
</body>
</html>

    　　　　属性选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--样式标签-->
    <title>css</title>
    <style>
        /*属性选择器选择器*/
        /*属性选择器写法，注意标签名和属性，只有符合标签名和属性值才能匹配*/
        div[name = "cc"]{
            background-color: red;
        }
        div[id = "aa"]{
            background-color: yellow;
        }
        p[class = "dd"]{
            background-color: pink;
        }
    　　　　
    </style>
</head>

    　　　　属性选择器扩展

    伪类

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通过a标签属性选择器测试伪类,注意a标签内置了伪类选择器,通过body继承修改不了a标签的样式,要单独设置a标签的伪类才能修改a标签的几种样式,冒号表示伪类后面跟属性名{css样式}*/
        /*link没有访问过状态*/
        a:link{color: red}
        /*hover鼠标悬浮状态*/
        a:hover{color: pink}
        /*active点击(鼠标按住到松开)状态*/
        a:active{color:green}
        /*visited点击后的状态*/
        a:visited{color: black;}
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>

    伪元素选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*伪元素选择器*/
        p::first-letter{
            color: red;
        }
        /*一般一个冒号是伪类,两个冒号是伪元素,现在一个冒号也可以使用了*/
        div:first-letter{
            color: blue;
        }
    </style>
</head>
<body>

<p>helloworld</p>
<div>你好世界 !!</div>
</body>
</html>

    　　　　常用伪元素::after,::before

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类after,before</title>
    <style>
        /*伪类after可以动态的加入css样式,固定格式是::after或者::before,content表示输入文字*/
        /*::after表示样式加在后面*/
        #after::after{content: "**after测试成功**"}
        /*::before表示样式加在前面*/
        .before::before{content: "**before测试成功**"}
    </style>
</head>
<body>
<div id="after">测试after</div>
<div class="before">测试before</div>
</body>
</html>

     　　主流清除浮动的用法:

    　　conntent必须要加不为空的字符,display:block表示把此标签变成块级标签,clear:both左右两侧都不浮动,visibivity:hidden表示隐藏标签的内容,但是标签块还是存在,如果想要隐藏标签块加上,height:0就行了

    2.　　指定标签添加css样式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
</head>
<body>
    <!--第二种添加css样式，在指定标签中加入style属性-->
    <div name="cc" style="background-color: red">1</div> 
</body>
</html>

    3.　　<head></head>中引入css样式表

    /*路径为当前目录的css.css文件*/
.c1{
    background-color: black;
}
.c2{
    background-color: pink;
}
.c3{
    background-color: red;
}
.c4{
    background-color: yellow;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <!--link一般两种用途，一个是做网站图标显示，还有一种是引用css样式-->
　　<link rel="shortcut icon" href="H[K_981P569OK@_FHL5V3LE.png">
    <meta charset="UTF-8">
    <title>css</title>
    <!--第三种添加css样式方法，在引用css样式表，css.css文件名-->
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
    <!--也可以直接在指定属性中添加样式表-->
    <div class="c4" rel="stylesheet" href="css.css">4</div>
</body>
</html>

     选择器嵌套规则

    css优先级测试

    /*css样式表*/
    .c1    {
    background-color: black;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <!--引用css样式表-->
    <link rel="stylesheet" href="css.css" >
    <!--通过head头中style加入样式颜色-->
    <style>
        .c1{
            background-color: red;
        }
    </style>
</head>
<body>
    <!--直接引入样式颜色-->
    <div class="c1" style="background-color: yellow">1</div>
</body>
</html>

    　　通过查看页面以此顺序是黄红黑，再把右侧头部样式表和style相互调换，发现颜色顺序是黄黑红

    　　最终测试发现，css样式调用顺序是由内而外，由近至远

    css样色代码

    表达方式1:

    　　css颜色是通过#号后面加一个16进制数展现的

    表达方式2:

    　　css颜色可以用rgb(0~255,0~255,0~255)表示rgb就是红绿蓝三原色,通过不同的值可以调出所有的颜色

    表达方式3:

    　　英文单词 color:red

    http://www.w3school.com.cn/tags/html_ref_colornames.asp

    css样式属性

     

    

    vertical-align: middle;
    

    

    

    
    		
 设置垂直居中,vertical-align表示垂直对齐方式,一般用于图片

    

    


    

    

    <a href="http://www.baidu.com" style="text-decoration: None">hhh</a>
    

    

    
    		


    text-decoration: None表示去除所有修饰,通常用于删除a标签下横线,
    underline设置下划线;
    text-decoration:line-through表示设置删除线,其和<del></del>标签是等价关系
    
    		

    

    


    

    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<body>
<!--font-weight最粗字体-->
<div style="height: 100px; 100px;background-color: yellow;font-size: 50px;font-weight: bolder">rainbol
</div>
</body>
</html>
    

    

    
    		
 

    

    


    

     <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
#c1{
width: 50px;
height: 50px;
/*外边框 1像素 红色 实线*/
border: 1px red solid;
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 50px;
}
</style>
<body>
<div id="c1">rainbol</div>
</body>
</html>
    

    
    		
 

    

    
 

    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
.c1{
width: 50px;
height: 50px;
background-color: red;
/*浮动，页面右侧*/
float: right;
}
</style>
<body>
<div class="c1"></div>
<div class="c1" style="background-color: yellow"></div>
<div class="c1" style="background-color: green"></div>
    

    
    		


    

    
 

    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body>
<div style="display: inline ">块转行内</div>
<span style="display: block">行内转块</span>
</body>
</html>
    

    
    		
 display属性可以使行内标签，块级标签相互转换

    

    


    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body>
<!--行内标签不能应用高宽，内内边距样式，行内标签自己有多大就占多大，如果
行内标签想转成块级标签，并且不想占满一整行怎么办-->
<!--<span style=" 100px;height: 100px">nihao</span>-->
<!--即使块又是行内,行内块标签,inline-block-->
<span style="display: inline-block; 100px;height: 100px">123</span>
</body>
</html>
    

    
    		




    

    


    

    

    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line-height测试</title>
    <style>
        /*把默认设置的浏览器宽度干掉*/
        *{margin: 0}
        #line-height{height: 100px;width: auto;background-color: pink;
            /*上下调节样式高度,100px,表示上下各增加高度50px*/
            line-height: 100px;
            /*每个字之间间隙增加5px*/
        letter-spacing: 5px;
            /*空格间间隙增加10px*/
            word-spacing: 10px;
            /*单词首字母大写*/
            text-transform: capitalize;
        }
    </style>
<body>
<div id='line-height' >hello,   刷刷刷   ,world!</div>
</body>
</html>
    

    

    


    

    
    		
 



    

    


    

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

<!--之后通过js对display进行操作可以点击操作对图片进行展示和隐藏-->
<span style="display:none; 100px;height: 100px">隐藏标签</span>
</body>
</html>
    

    
    		
 

    

    


    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body>
<div style="height: 100px; 100%;border:1px red solid">
<div style="margin-top: 22px;height: 48px; 100%;background-color: green"></div>
<div style="padding-top: 22px;height: 48px; 100%;background-color: green"></div>
    
</div>
</body>
</html>
    

    
    		


    

    margin:内边距　　padding外边距　　border:边框
    

     
    

    margin-top内边距：距离自己本身与上边框的距离像素
    

    padding-top外边距：改变自身大小
    
    		

    

    


    

    

    /*盒子模型padding*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #boxes{
            /*当只有一个值时表示padding的上下左右都为10px*/
            /*padding: 10px;*/
            /*当设置了两个值表示padding的上下为10px,左右为20px*/
            /*padding: 10px 20px;*/
            /*当设置了三个值表示padding的上边距为10px,左右边距为20px,下边距为30px*/
            /*padding: 10px 20px 30px;*/
            /*当设置了4个值表示padding的依次顺序顺时针方向,上左下右*/
            padding: 10px 20px 30px 40px ;

    　　　　　　
    

    /*掌握了这些设置单个属性可以通过padding-top等api设置*/
    


    
        }

    </style>
</head>
<body>

    <div id="boxes" style="background: red;height: 100px; 100px;">300</div>

</body>
</html>
    

    


    
    		
 




    

    


    

    <!--margin距离边框0 postition=fixed绝对定位-->
<div
style="margin: 0;position: fixed;top: 0;right: 0;left: 0;height: 20px;background-color: green">
</div>
    

    
    		
 指定目标位置绝对，无视滚动条在页面定位，top，right等元素对其位置变化

    

    


    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body style="margin: 0" >
<!--相对定位postiton,根据relative外层div，然后根据absolute内部div进行构筑-->
<div style="position: relative; 500px;height: 500px;border: 1px black solid">
<div
style="position: absolute;height: 100px; 100px;background-color: green">
</div>
<div
style="right: 0;position: absolute;height: 100px; 100px;background-color: pink">
</div>
<div
style="left: 0;bottom: 0;position: absolute;height: 100px; 100px;background-color: red">
</div>
<div
style="right: 0;bottom: 0;position: absolute;height: 100px; 100px;background-color: black">
</div>
</div>
</body>
</html>
    

    
    		
 

    

    
 

    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body style="margin: 0" >
<div style="position: relative; 500px;height: 500px;border: 1px black solid">
<div style="z-index: 10;position: absolute;height: 100px; 100px;>
<!--z-index分层-->
</div>
<div
style="z-index: 11;position: absolute;height: 100px; 100px;background-color: pink">
</div>
</div>
</body>
</html>
    

    

    		
 两张图片重叠在一起，z-index分层属性，数值是1-999任意一个数，区分在于哪个数值大，就选择哪个层，后面可以通过js控制图片显示

    

    
 

    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body>
<div>
<input type="button" style="cursor:pointer" value="登录" >
</div>
</body>
</html>
    

    
    		
 当鼠标悬浮到按钮出现小手样式

    

    


    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body>
<!--overflow滚动条-->
<!--hidden 当图片或者内容大于外层时自动截取左上部分-->
<!--auto 根据内容自动增加滚动条 如果图片小于外边框，滚动条会消失-->
<!--scroll 无论大小都增加滚动条-->
<div style="border: black 1px solid; 100px;height: 100px;overflow: scorll" >
<img src="H[K_981P569OK@_FHL5V3LE.png">
</div>
</body>
</html>
    

    
    		
 



    

    


    

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

    <!--background-size:50px 50px改变背景图的大小，等比例缩放,或者放大-->
    

    <!--background-image背景图，如果图片小于外层会发生堆叠-->
<!--background-repeat: no-repeat背景图不堆叠-->
                    <!--x-repeat横向堆叠-->
                    <!--y-repeat纵向堆叠-->
<div style="border: black 1px solid; 600px;
    height: 500px;background-image: url('H[K_981P569OK@_FHL5V3LE.png')">
</div>
    
</body>
</html>
    

    
    		


     
    

    作用：用小图无限堆叠，加快网页渲染速度
    
    		

    

    


    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body>
<div style="background-position: 1px 1px;background-repeat: no-repeat;border: black 1px solid; 600px;
height: 500px;background-image: url('H[K_981P569OK@_FHL5V3LE.png')">
</div>
</body>
</html>
    

    
    		
 抠图：以百度为例所有的图片集合在一张上，通过外层格式，定位到所需要的图片位置，展现所需要的图片

    

    保证外部div足够小的情况下，通过改变background-postiton像素大小来找到所需图的位置，提升页面缓存效率，和整体页面渲染速度
    
    		

    

    


    

    clear的用法　　clear一般放在样式标签最下边
    <!    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RainBol2</title>
    <style>
        img{
            float:left;
            clear: right;       /*在左侧不允许浮动元素*/
            clear:both;         /*在左右侧都不允许浮动元素,也叫清除浮动*/
            clear:left;         /*在左侧不允许浮动元素*/
            clear:none;         /*默认值,允许浮动元素出现在两侧*/
            clear:inherit;      /*规定应该从父元素继承 clear 属性的值*/
        }
    </style>
</head>
<body>
    <img src="1.png" alt="">
    <img src="2.png" alt="">
</body>
</html>
    

    
    		

    

    
高级选择器补充

    

    


    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        #outer1 #outer2{/*选择器后面跟上空格再接选择器或者其他标签 这种表示outer1下的outer2标签及其子孙标签被变成green*/
            background-color: green;
        }
        #outer1 a div span{  /*注意一定紧挨着的,如果中间有不存在的标签就不会生效*/
            background-color: red;
        }


    </style>
</head>
<body>
<div id="outer1">111
    <div id="outer2">222
        <div id="outer3">333
            <span id="inner">
                    RainBol
            </span>
        </div>
    </div>


</div>

</body>
</html>
    

    

    		





    

    


    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子代选择器也是挨着寻找,如果没有找到就不生效*/
        #outer1>span{
            background-color: yellow;
        }
        #outer1>div{ /*标签选择器可以应用到其下所有div标签*/
            background-color: red;
        }

        #outer1>#outer2>#outer3{/*选择器可以应用到其下所有标签*/
            background-color: #0d8ddb;
        }


    </style>
</head>
<body>
<div id="outer1">111
    <div id="outer2">222
        <div id="outer3">333
            <span id="inner">
                    RainBol
            </span>
        </div>
    </div>


</div>

</body>
</html>
    

    

    		





    

    
 

    

    <!DOCTYPE html>
<html lang="en">
<head>
    　　 
    
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo1{background-color: red}
        #demo2{background-color: yellow}
        #demo3{background-color: green}
        .demo{font-size: 50px}
        #demo1.demo{
            color: blue;
        }
        /*上面交集的内容类似于下面代码,交集的样式可以同时作用在其两者身上*/
        /*#demo1{background-color: red;color: blue;}*/
        /*#demo2{background-color: yellow}*/
        /*#demo3{background-color: green}*/
        /*.demo{font-size: 50px;color: blue;}*/

        
        /*交集与并集的区别*/
        /*1、交集选择器是and；*/
        /*2、并集选择器是or；*/
        /*3、交集选择器只能交2个，其中第1个是标记，第2个是类选择器或者ID选择器，之间不能有空格，形如：h2.special；*/
        /*4、并集选择器可多个，中间用“,”隔开；*/

    </style>
</head>
<body>
<div id="demo1" class="demo">Rainbol1</div>
<div id="demo2" class="demo">Rainbol2</div>
<div id="demo3" class="demo">Rainbol3</div>
</body>
</html>
    

    

    		
 




    

    
 版权声明：本文原创发表于 博客园，作者为 RainBol 本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。

    
    

    

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  Java规约之方法设计
                    
    JVM第一篇 JVM与Java体系结构
                    
    初学者学习Java方法集
                    
    初学者学习Java方法集
                    
    1.Spring-Boot 静态文件和页默认放置位置
                    
    2.Spring-Boot常用配置解释
                    
    3.Spring-Boot核心@SpringBootApplication介绍
                    
    4.Spring-Boot中基于Junit的单元测试
                    
    vue学习笔记（一） ---- vue指令（v-for 和 key 属性）
                    
    vue学习笔记（一） ----- vue指令（菜单列表案例）
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/RainBol/p/9695393.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看