马进军-20201028

1.块级标签（p  ul  div）跟内容无关
   行级标签（a span img）跟内容有关
                                                         
                                                               CSS3.0 层叠样式表-修饰网页
        
选择器（镜子）：精确的选准要修饰的目标。           用link将css和html连接起来<link rel="stylesheet" href="css/style.css"/>
                          常用选择器：1.类选择器(共用)  标签中用class      .box{
                                                                                                  width:300px;
                                                                                                  height:200px;
                                                                                                  background-color:red;
                                                                                                       }
                                              2.标签选择器          h1{
                                                                              width:400px
                                                                              height:200px
                                                                              background-colcor:#1100a
                                                                                         }
                                              3.id选择器                #box{  width:400px
                                                                              height:200px
                                                                              background-colcor:#123
                                                                                     }
                                               4.后代选择器         p  ul  li{
                                                                                 color:green;
                                                                                  }
                                               5.伪类选择器（鼠标悬停状态）    a:hover{ 
                                                                                                       text-decoration
                                                                                                                  } 

优先级：id选择器>类选择器>标签选择器

     修饰字体和文本样式
                                  .box{
                                           width:600px
                                           height:300px
                                          border:1px #000000 solid;         
                                           }
                                  div{
                                           color: red;/修饰字体的颜色/
                                            font-size: 30px;/修饰字体的大小/
                                            font-family: "宋体";/字体类型/
                                            font-style: italic;/字体的样式/
                                            font-weight: bold;/字体加粗/
                                            letter-spacing: 5px;/字体间距/
                                            text-align；center；/对齐方式/
                                            line-height:300px;/行高/
                                            text-decoration: overline；/文本划线/
                                            text-shadow: 2px 2px 3px yellow;/字体阴影/    1.水平阴影距离  2.垂直阴影距离  3.模糊距离
                                            text-indent: 2em;/首行缩进/ 
                                              
                                           }
修饰背景的常用样式 
                                .box{
                                           width:300px
                                           height:300px
                                   div{
                                         background-color: red;/背景颜色/
                                         background-image:url(../img/icon.jpg);  ../(返回上一级目录) /背景图片/
                                         background-size: 300px 300px;/背景图片的大小/   cover背景图片完全覆盖背景的区域
                                         background-repeat: no-repeat;/背景图片平铺/
                                         background-attachment: fixed
                                         background-position: -100px 0; /背景图片平移/
                                       }
                                       

心得体会：在老师今天讲解的过程中，感觉网页的设计很神奇，虽然内容很多很杂 但是有兴趣去学。毕竟现在学的知识以
后说不定可以用的上，所以这次实践我们应该好好学习。