马进军-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; /背景图片平移/
                                       }
                                       

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

标签

评论

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