张瑜-20201028

css3:层叠样式表——用来修饰网页
选择器:精确地选中要修饰的目标        id>类>标签
常用的选择器:0、通用选择器   *{ background-color:gold;}
                          1、类选择器   <div class="box"></div>  .box { width: 300px;  height:200px; background-color:red  }
                                                 <h1 class="box"></h1>
                          2、标签选择器   <h1></h1>  h1{ width: 400px; height: 200px;  background-color : #llaabb;  }
                          3、id选择器       <p id="box"></p>#box{width: 400px; height: 200px;  background-color : #112233; }
                          4、后代选择器   li{ color:blue;}          p ul li { color:black;}
                          5、伪类选择器  (鼠标悬停状态) a:hover{text-decoration:  none;}


修饰字体和文本的常用样式<div class="box"></div>
color:red;/*修饰字体的颜色*/      font-size:30;/*修饰字体的大小*/    font-family:"宋体";/*字体类型*/     font-style:italic;/*字体的样式*/    font-weight:bold;/*字体加粗*/
letter-spacing:  5px;/*字体间距*/

text-align: center;/*对齐方式*/     line-height: 300px;/*行高*/    text-decoration:underline(下划线);overline(上划线);line-through(划错)/*文本划线*/
text-shadow:2px 2px 3px  yellow;/*字体阴影*/   text-indent:2em;/*首行缩进*/
  
修饰背景的常用样式    alt+/(注释/解注释)
background-color: red;/*背景颜色*/    background-image: url(../img/icon/.jpg);/*背景图片*/   background-size: 300px  300px;/*背景图片的大小*/        background-size:  cover(等比例缩放)    background-repeat: no-repeat;/*背景图片平铺*/   background-attachment: fixed;/*背景图片固定*/
background-position:-100px 0;/*背景图片平移*/     opacity: 0.5/*透明度*/   background-color: transparent;/*背景全透明*/s

心得体会:
在这几天几天的实训中我学习到了许多的新知识,学习的时候感觉不是很难,但当自己动手做的时候还是会遇到一些些的问题,从错误中自己慢慢研究解决问题,就会受益匪浅,并从中获得很多。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1