css学习

  • A+
所属分类:Web前端
摘要

项目结构:

html文件css文件:CSS的优势:html文件:css文件:效果如下图:


第一个css程序

项目结构:
css学习
html文件

       <meta charset="UTF-8">     <title>Title</title>   <!--<style>   可以编写css的代码   语法:       选择器{           声明1;           声明2;           声明3;           .....       }    link :  引入css文件          相当于:             <style>                 h1{                     color: red;                   }     </style>   -->     <link rel="stylesheet" href="css/style.css">     <h1>我是标题</h1>   

css文件:

  h1{     color: red; } 

CSS的优势:

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利于SEO,容易被搜索引擎收录

css的三种导入方式

html文件:

       <meta charset="UTF-8">     <title>Title</title>     <!--内部样式-->     <style>         h1{             color: green;         }     </style>     <!--外部样式-->     <link rel="stylesheet" href="css/style.css">       <!--优先级: 就近原则,哪个样式离这个元素近,就用哪个-->     <!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->     <h1>我是标题</h1>   

css文件:

/*外部样式*/ h1{     color: yellow; } 

基本选择器

  1. 标签选择器: 选择一类标签 格式(标签{})
       <meta charset="UTF-8">     <title>Title</title>     <style>         /*标签选择器,会选择这个页面上所有的这个标签         color  : 字体颜色         background-color  : 背景颜色         border-radius  : 边框圆润度         */         h1{             color: #e51010;             background-color: aqua;             border-radius: 20px;         }         /*         font-size  : 字体大小          */         p{             font-size: 30px;         }     </style>       <h1>学java</h1>     <h1>学java</h1>     <p>你会发财</p>   
  1. 类选择器:选择所有class属性一致的标签,格式(.class的值{})
       <meta charset="UTF-8">     <title>Title</title>      <style>         /*类选择器的格式  .class的值{}         好处,可以让多个标签归类,属于同一个class,设置相同的属性,可以复用         */         .c1{             color: blue;         }         .c2{             color: aqua;         }     </style>     <h1 class="c1">标题1</h1>   <h1 class="c2">标题1</h1>   <h1 class="c1">标题1</h1>    <p class="c1">p标签</p>   
  1. id选择器:全局唯一,格式(#id的值{})
       <meta charset="UTF-8">     <title>Title</title>      <style>         /*id选择器格式  #id的值{}         id的值必须保证全局唯一         不遵循就近原则,固定的         id选择器 > 类选择器 > 标签选择器         */         #i1{             color: #e51010;         }         .c1{             color: aqua;         }         h1{             color: green;         }     </style>       <h1 id="i1">标题标签</h1>     <h1 class="c1">标题标签</h1>     <h1>标题标签</h1>   

层次选择器

       <meta charset="UTF-8">     <title>层次选择器</title>      <style>         /*p{             background-color: green;         }*/         /*后代选择器 某一个元素的后面所有元素*/         /*body p{             background: #e51010;         }*/         /*子选择器  只有后面的所有同级元素有效*/         body>p{             background: aqua;         }         /*兄弟选择器  选择某个元素后和它同一级的元素,只对下面的元素有效并且只有一个*/         /*.active + p{             background: green;         }*/         /*通用选择器  当前选中元素的向下的所有同级元素*/         /*.active~p{             background: blue;         }*/     </style>       <p>p1</p>     <p class="active">p2</p>     <p>p3</p>     <ul>         <li>             <p>p4</p>         </li>         <li>             <p>p5</p>         </li>         <li>             <p>p6</p>         </li>     </ul>     <p>p7</p>   

结构伪类选择器

       <meta charset="UTF-8">     <title>层次选择器</title>      <style>         /*选择ul下面的第一个li元素*/         ul li:first-child{             background: #e51010;         }         /*选择ul下面的最后一个li元素*/         ul li:last-child{             background: blue;         }         /*选择p1 : 定位到父元素,选择当前的第一个元素         p:nth-child(1)  : 选中p元素的父元素,选择父级元素的第一个,并且是当前元素才会生效         */         p:nth-child(1){             background: aqua;         }         /*选中父类元素里面第二个类型为p的元素*/         p:nth-of-type(2){             background: green;         }     </style>       <p>p1</p>     <p>p2</p>     <p>p3</p>     <ul>         <li>li1</li>         <li>li2</li>         <li>li3</li>     </ul>   

属性选择器

       <meta charset="UTF-8">     <title>Title</title>     <style>         .demo a{             float: left;             display: block;             height: 50px;             width: 50px;             text-align: center;             border-radius: 10px;             background-color: aqua;             color: blue;             text-decoration: none;             margin-right: 10px;             font: bold 20px/50px Arial;         }         /*选中a标签里面带有id属性的元素   语法 : a[属性名或者属性名=属性值]{}         这里面的 = 表示绝对等于         *=  包含这个元素         ^=  表示以什么开头         $=  表示以什么结尾         */         /*a[id]{             background-color: yellow;         }*/        /* a[id=first]{             background-color: #e51010;         }*/         /*选中class中含有links的元素*/         /*a[class*="links"]{             background-color: yellow;         }*/         /*选中href中以http开头的元素*/         /*a[href^=http]{             background-color: yellow;         }*/         /*选中href中以pdf结尾的元素*/         a[href$=pdf]{             background-color: yellow;         }     </style>   <p class="demo">     <a href="https://www.baidu.com" class="links item first" id="first">1</a>     <a href="https:" class="links item first" target="_blank" title="test">2</a>     <a href="image/123.html" class="links item">3</a>     <a href="image/123.png" class="links item">4</a>     <a href="image/123.jpg" class="links item">5</a>     <a href="abc" class="links item">6</a>     <a href="abc/a.pdf" class="links item">7</a>     <a href="/ad.pdf" class="links item">8</a>     <a href="abd.doc" class="links item">9</a>     <a href="djw.doc" class="links item last">10</a> </p>   

效果如下图:
css学习

字体样式

       <meta charset="UTF-8">     <title>Title</title>     <!--     font-family  : 表示字体     font-size  : 表示字体大小     font-weight  : 表示字体形状,粗体,斜体等     color  : 表示字体颜色     -->     <style>         body{             font-family: 楷体;             color: #e51010;         }         h1{             font-size: 50px;         }         .p1{             font-weight: bold;         }     </style>       <h1>原神</h1>     <p class="p1">     《原神》是由上海米哈游制作发行的一款开放世界冒险游戏,于2017年1月底立项 [29]  ,原初测试于2019年6月21日开启 [1]  ,再临测试于2020年3月19日开启 [2]  ,启程测试于2020年6月11日开启 [3]  ,PC版技术性开放测试于9月15日开启,公测于2020年9月28日开启 [4]  。在数据方面,同在官方服务器的情况下,iOS、PC、Android平台之间的账号数据互通,玩家可以在同一账号下切换设备。     </p>     <p>     游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相 [5]  。     </p>   

文本样式

       <meta charset="UTF-8">     <title>Title</title>     <style>         /*         color :字体颜色,后跟参数可以为:                                 单词                                 RGB  参数为0~255,0~255,0~255                                 RGBA 参数为0~255,0~255,0~255,0~1 最后一个参数表示透明度         text-align :排版 后跟参数有:                                 center 居中                                 right 靠右                                 left 靠左         */         h1{             color: rgba(0,255,0,0.2);             text-align: center;         }         /*text-indent: 2em;  段落首行缩进,缩进两个字符 或者也可以为px,即缩进两个像素*/         .p1{             text-indent: 2em;         }         /*line-height  行高,如果行高和块的高度一致,就可以上下居中*/         .p2{             background-color: yellow;             height: 300px;             line-height: 150px;         }         /*下划线*/         .l1{             text-decoration: underline;         }         /*中划线*/         .l2{            text-decoration: line-through;         }         /*上划线*/         .l3{             text-decoration: overline;         }         /*超链接去除下划线*/         a{             text-decoration: none;         }         /*         水平对其,,需要参照物,a,b         */         img,span{             vertical-align: middle;         }     </style>       <a href="">123</a>     <p class="l1">123122</p>     <p class="l2">123122</p>     <p class="l3">123122</p>     <h1>原神</h1>     <p class="p1">         《原神》是由上海米哈游制作发行的一款开放世界冒险游戏,于2017年1月底立项 [29]  ,原初测试于2019年6月21日开启 [1]  ,再临测试于2020年3月19日开启 [2]  ,启程测试于2020年6月11日开启 [3]  ,PC版技术性开放测试于9月15日开启,公测于2020年9月28日开启 [4]  。在数据方面,同在官方服务器的情况下,iOS、PC、Android平台之间的账号数据互通,玩家可以在同一账号下切换设备。     </p>     <p class="p2">         游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相 [5]  。     </p>      <img src="images/2.png" alt="css学习" alt="">     <span>cececececececececece</span>   

超链接伪类

       <meta charset="UTF-8">     <title>Title</title>     <style>         /*默认颜以及去除下划线*/         a{             text-decoration: none;             color: #000000;         }         /*鼠标悬停到上面的状态*/         a:hover{             color: blue;         }         /*鼠标按住未释放的状态*/         a:active{             color: #e51010;         }         /*text-shadow 阴影效果  参数依次为:阴影颜色  水平位移  垂直位移  阴影半径*/         #price{             text-shadow: #00e5e1 10px 0px 2px;         }     </style>   <a href="#">     <img src="images/2.png" alt="css学习" alt=""> </a> <p>     <a href="#">码出高效:Java开发手册.pdf</a> </p> <p>     <a href="#">作者:孤尽老师</a> </p> <p id="price">     ¥99 </p>   

列表

html文件

       <meta charset="UTF-8">     <title>Title</title>     <link rel="stylesheet" href="css/style.css">   <div id="nav">     <h2 class="title">全部商品分类</h2>     <ul>         <li>             <a href="#">图书</a>             <a href="#">音像</a>             <a href="#">数字商品</a>         </li>         <li>             <a href="#">家用电器</a>             <a href="#">手机</a>             <a href="#">数码</a>         </li>         <li>             <a href="#">电脑</a>             <a href="#">办公</a>         </li>         <li>             <a href="#">家居</a>             <a href="#">家装</a>             <a href="#">厨具</a>         </li>         <li>             <a href="#">服饰鞋帽</a>             <a href="#">个性化妆</a>         </li>         <li>             <a href="#">礼品箱包</a>             <a href="#">钟表</a>             <a href="#">珠宝</a>         </li>         <li>             <a href="#">食品饮料</a>             <a href="#">保健食品</a>         </li>         <li>             <a href="#">彩票</a>             <a href="#">旅行</a>             <a href="#">充值</a>             <a href="#">票务</a>         </li>     </ul> </div>   

css文件

#nav{     width: 255px;     background:#828a91; } .title{     font-size: 18px;     font-weight: bold;     text-indent: 2em;     line-height: 35px;     /*  颜色  图片 图片位置 平铺方式*/     background: red url("../images/2.png") 230px 10px no-repeat; } /* 列表前面默认实心圆点 list-style :             none  去掉圆点             circle  空心圆             decimal  数字             square  实心正方形 */ ul li{     line-height: 30px;     list-style: none;     text-indent: 1em;     background-image: url("../images/2.png");     background-repeat: no-repeat;     background-position: 188px 5px; }  a{     text-decoration: none;     color: #000;     font-size: 14px; } a:hover{     color: orange; } 

背景

       <meta charset="UTF-8">     <title>Title</title>     <style>         /*border 设置边框  参数为  边框的宽度 边框的样式(solid 实线) 边框的颜色*/         div{             width: 1080px;             height: 720px;             border-radius: 20px;             border: 20px solid red;             background-image: url("images/2.png");             /*默认是全部平铺的*/         }         .div1{             /*水平平铺*/             background-repeat: repeat-x;         }         .div2{             /*垂直平铺*/             background-repeat: repeat-y;         }         .div3{             /*不平铺*/             background-repeat: no-repeat;         }     </style>       <div class="div1"></div>     <div class="div2"></div>     <div class="div3"></div>   

盒子模型

1. 边框

       <meta charset="UTF-8">     <title>Title</title>   <style>     body{       /*body 总有一个默认的外边距 margin:*px  一般会初始化为0*/       margin: 0px;     }     h2{       font-size: 16px;       background-color: #aee3bf;       line-height: 30px;       color: white;     }     /*border : 粗细 样式 颜色*/     #box{       width: 300px;       border: 1px solid red;     }     form{       background-color: #aee3bf;     }     /*选择父类元素里面第一个为div的元素里面的input标签*/     div:nth-of-type(1)>input{       border: 3px solid black;     }     /*选择父类元素里面第二个为div的元素里面的input标签*/     div:nth-of-type(2)>input{       border: 2px dashed aqua;     }     /*选择父类元素里面第三个为div的元素里面的input标签*/     div:nth-of-type(3)>input{       border: 1px dashed black;     }   </style>   <div id="box">   <h2>会员登录</h2>   <form action="#" method="get">     <div>       <span>用户名:</span>       <input type="text">     </div>     <div>       <span>密码:</span>       <input type="password">     </div>     <div>       <span>邮箱:</span>       <input type="text">     </div>   </form> </div>   

2.内外边距

       <meta charset="UTF-8">     <title>Title</title>     <!--外边距的妙用  居中元素         margin:0 auto;     -->     <style>         body{             /*body 总有一个默认的外边框 margin:8px*/             margin: 0px;         }         /*外边距         margin: 0; 代表上下左右都为零         margin: 0 1; 代表上下为0 左右为1         margin: 0 1 2 3; 代表上为0  右为1 下为2 左为3  顺时针旋转         */         h2{             font-size: 16px;             background-color: #aee3bf;             line-height: 30px;             color: white;             margin: 1px 2px 3px 4px;         }         /*border : 粗细 样式 颜色*/         #box{             width: 300px;             border: 1px solid red;             margin: 0 auto;         }         form{             background-color: #aee3bf;         }         /*选择父类元素里面第一个为div的元素里面的input标签         padding  内边距 与外边距用法一致         */         div:nth-of-type(1)>input{             border: 3px solid black;             padding: 10px;         }         /*选择父类元素里面第二个为div的元素里面的input标签*/         div:nth-of-type(2)>input{             border: 2px dashed aqua;         }         /*选择父类元素里面第三个为div的元素里面的input标签*/         div:nth-of-type(3)>input{             border: 1px dashed black;         }     </style>   <div id="box">     <h2>会员登录</h2>     <form action="#" method="get">         <div>             <span>用户名:</span>             <input type="text">         </div>         <div>             <span>密码:</span>             <input type="password">         </div>         <div>             <span>邮箱:</span>             <input type="text">         </div>     </form> </div>   

圆角边框

1.边框圆角

       <meta charset="UTF-8">     <title>Title</title>     <style>         /*         border-radius 圆角边距         border-radius: 50px;  上下左右都为50px         border-radius: 50px 20px; 左上右下为50px 右上左下为20px         border-radius: 50px 20px 10px 5px; 从左上开始顺时针旋转分配         */         div{             width: 100px;             height: 100px;             border: 10px solid red;             border-radius: 50px 20px 10px 5px;         }     </style>   <div>  </div>   

2.半圆

       <meta charset="UTF-8">     <title>Title</title>     <style>         div{             width: 100px;             height: 50px;             background-color: red;             border-radius: 50px 50px 0 0 ;         }     </style>   <div></div>   

盒子阴影

       <meta charset="UTF-8">     <title>Title</title>     <style>         div{             width: 100px;             height: 100px;             border: 10px solid red;             /*box-shadow 盒子阴影 x偏移量 y偏移量 阴影半径 阴影颜色*/             box-shadow: 10px 10px 100px yellow;         }     </style>   <div></div>   

display(块元素与行内元素的转换)

       <meta charset="UTF-8">     <title>Title</title>     <style>         /*         div本为块元素  使用 display: inline;后为行内元素         span本为行内元素  使用 display: block;后为块元素         inline-block  既为行内元素也为块元素         none  使该元素消失         */         div{             width: 100px;             height: 100px;             border: 1px solid red;             display: inline;         }         span{             width: 100px;             height: 100px;             border: 1px solid red;             display: none;         }     </style>       <div>div块元素</div>     <span>span行内元素</span>   

float(浮动)

       <meta charset="UTF-8">     <title>Title</title>     <style>         div{             margin: 10px;             padding: 5px;         }         #father{             border: 1px solid red;         }         .layer1{             border: 1px dashed blue;             display: inline-block;             float: left;         }         .layer2{             border: 1px dashed #e17113;             display: inline-block;             float: left;         }         .layer3{             border: 1px dashed #40c40d;             display: inline-block;             float: left;         }         .layer4{             border: 1px dashed #86fc07;             font-size: 16px;             line-height: 20px;             display: inline-block;         }     </style>   <div id="father">     <div class="layer1"><img src="images/1.png" alt="css学习" alt=""></div>     <div class="layer2"><img src="images/2.png" alt="css学习" alt=""></div>     <div class="layer3"><img src="images/3.png" alt="css学习" alt=""></div>     <div class="layer4">         浮动的盒子可以向左浮,也可以向右浮     </div>  </div>   

解决父级元素塌陷问题

父级元素塌陷问题即子元素浮动起来后超出父级元素阔起来的范围
方案一:
增加父级元素高度
方案二:
在最底下增加一个空的div,然后给该div增加属性

<div class="clear"></div> 
.clear{       clear: both;       margin: 0;       padding: 0;   } 

方案三:
在父级元素增加 overflow: hidden;属性

#father{     border: 1px solid red;     overflow: hidden; } 

方案四:
父类添加一个伪类

#father:after{       content: '';       display: block;       clear: both;   } 

具体代码

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         div{             margin: 10px;             padding: 5px;         }         #father{             border: 1px solid red;             /*overflow: hidden;*/         }         #father:after{             content: '';             display: block;             clear: both;         }         .layer1{             border: 1px dashed blue;             display: inline-block;             float: left;         }         .layer2{             border: 1px dashed #e17113;             display: inline-block;             float: left;         }         .layer3{             border: 1px dashed #40c40d;             display: inline-block;             float: right;         }         /*         clear: right;  右侧不允许有浮动元素         clear: left;  左侧不允许有浮动元素         clear: both;  两侧不允许有浮动元素         */         .layer4{             border: 1px dashed #86fc07;             font-size: 16px;             line-height: 20px;             display: inline-block;             float: right;         }         /*.clear{*/         /*    clear: both;*/         /*    margin: 0;*/         /*    padding: 0;*/         /*}*/     </style> </head> <body> <div id="father">     <div class="layer1"><img src="images/1.png" alt="css学习" alt=""></div>     <div class="layer2"><img src="images/2.png" alt="css学习" alt=""></div>     <div class="layer3"><img src="images/3.png" alt="css学习" alt=""></div>     <div class="layer4">         浮动的盒子可以向左浮,也可以向右浮     </div>     <!--<div class="clear"></div>--> </div> </body> </html> 

相对位置

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Title</title>   <!--   相对定位:相对于原来的自己的位置进行偏移   -->   <style>     body{       padding: 10px;     }     div{       margin: 10px;       padding: 5px;       font-size: 15px;       line-height: 25px;     }     #father{       border: 1px solid red;     }     #first{       background-color: blue;       border: 1px dashed blue;       position: relative; /*相对定位*/       top: 20px;  /*相对于自己的顶上加二十*/       left: 20px; /*相对于自己的左边加二十*/     }     #second{       background-color: #e8a323;       border: 1px dashed #e8a323;     }     #third{       background-color: #17de32;       border: 1px dashed #17de32;       position: relative;       bottom: 20px;  /*相对于自己的底部加二十*/       right: 20px;   /*相对于自己的右部加二十*/     }   </style> </head> <body> <div id="father">   <div id="first">第一个盒子</div>   <div id="second">第二个盒子</div>   <div id="third">第三个盒子</div> </div> </body> </html> 

方块摆放

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         #father{             width: 300px;             height: 300px;             padding: 10px;             border: 1px solid red;         }         a{             width: 100px;             height: 100px;             background-color: #d7cc43;             line-height: 100px;             text-decoration: none;             text-align: center;             display: block;         }         a:hover{             background-color: blue;         }          #i2{             position: relative;             bottom: 100px;             left: 200px;         }         #i3{             position: relative;             bottom: 100px;             left: 100px;         }         #i4{             position: relative;             bottom: 100px;         }         #i5{             position: relative;             bottom: 200px;             left: 200px;         }      </style> </head> <body>     <div id="father">         <a id="i1" href="#">链接1</a>         <a id="i2" href="#">链接2</a>         <a id="i3" href="#">链接3</a>         <a id="i4" href="#">链接4</a>         <a id="i5" href="#">链接5</a>     </div> </body> </html> 

绝对定位

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         div{             margin: 10px;             padding: 5px;             font-size: 15px;             line-height: 25px;         }         #father{             border: 1px solid red;         }         #first{             background-color: blue;             border: 1px dashed blue;         }         /*绝对定位:         1.没有父级元素定位的前提下,相对于浏览器定位         2.假设父级元素存在定位,经常会相对于父级元素进行偏移         3.在父级元素范围内移动         相对于父级元素或者浏览器,进行指定位置的移动,不会继续存在于原来的位置         */         #second{             background-color: #e8a323;             border: 1px dashed #e8a323;             position: absolute;             right: 30px;/*相对于浏览器的右边30个像素*/         }         #third{             background-color: #17de32;             border: 1px dashed #17de32;         }     </style> </head> <body> <div id="father">     <div id="first">第一个盒子</div>     <div id="second">第二个盒子</div>     <div id="third">第三个盒子</div> </div> </body> </html> 

固定位置

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         body{             height: 1000px;         }         div:nth-of-type(1){/*绝对定位:相对于浏览器*/             width: 100px;             height: 100px;             background: red;             position: absolute;             right: 100px;             bottom: 0;         }         div:nth-of-type(2){/*fixed:固定定位,在浏览器中 定死,不再改变位置*/             width: 50px;             height: 50px;             background: yellow;             position: fixed;             right: 0;             bottom: 0;         }         div:nth-of-type(3){/*fixed:固定定位,在浏览器中 定死,不再改变位置*/             width: 50px;             height: 50px;             position: fixed;             right: 0;             bottom: 60px;         }         div a{             display: block;             height: 50px;             width: 50px;             background-color: #00e5e1;             text-decoration: none;             line-height: 50px;             text-align: center;         }     </style> </head> <body>     <a name="top"></a>     <div>div1</div>     <div>div2</div>     <!--使用锚链接可以实现返回顶部的功能-->     <div>         <a href="#top">顶部</a>     </div> </body> </html> 

z-index

html文件

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <link rel="stylesheet" href="css/style.css"> </head> <body>     <div id="content">         <ul>             <li><img src="images/1.png" alt="css学习" alt=""></li>             <li class="tipText">学习使人长寿</li>             <li class="tipBg"></li>             <li>时间:2088-02-23</li>             <li>地点:冥王星</li>         </ul>     </div> </body> </html> 

CSS文件

#content{     width: 199px;     padding: 0;     margin: 0;     overflow: hidden;     font-size: 12px;     line-height: 25px;     border:1px solid red; } ul,li{     margin: 0;     padding: 0;     list-style: none; } /*父级元素相对定位*/ ul{     position: relative; } .tipText,.tipBg{     width: 199px;     height: 25px;     position: absolute;     top: 154px; } .tipBg{     background: #000;     opacity: 0.5; /*设置背景透明度*/ } .tipText{     color: #f9fcf9;      /*z-index: 1;设置层级,使得字体可以在背景的上层显示 最低为0 不设上限*/ }