郭姗姗-20201028

知识点：

一、HTML:H5->标签（块级标签：各占一行跟内容多少无关，有p ul div标签等。行级标签：内容多大标签多大，
              有a span img标签等）+表单
二、     ccs3.0:层叠样式表->修饰网页    首先要选择 选择器（镜子):精确选择要修饰的目标。
            css文件：右键，新建，css文件       在html中引用css文件  <link rel="stylesheet"href="css/new_file.css"/>
            常用选择器：通用选择器，类选择器，标签选择器，id选择器，后代选择器，伪类选择器（鼠标放置旋停状态）
       1、类选择器：     关键字：class 
            例如<div class="box" ></div>           （找到box就能找到div标签）
            在css文件中的格式.box{……}                   类选择器可以共用 所有标签有选择器
       2、标签选择器：
             <h1></h1>
             在css文件中的格式 h1{……}                     类选择器优先级高于标签选择器
       3、id选择器：
            <div id="box"></div>  
            在css文件中的格式：#box{……}               id选择器优先级高于类选择器
      4、后代选择器：
            <div id="box"><ul>   <li id="text"></li>    <li id="text"></li>  </ul>
             在css文件中的格式div ul li{……}               （包含关系时打空格）
             在类选择器或者id选择器有包含关系也可,    即将上面div换成->.box 或者#box
      5、伪类选择器（鼠标放置旋停状态):hover
             <a href="#">百度一下</a>
             在css文件中格式   a:hover{……}
      6、 通用选择器：
            在css文件中的格式：*{……}
            margin:0;外边距     border:0;边框          padding：0;内边框
             
           {}里面可以设置 字体颜色 背景颜色 width:；height:；等。
三、修饰字体和格式的常用形式
        分别新建HTML文件和css文件。ctrl+/即为注释     alt+/即为提示    ctrl+d删除一行
     1、 HTML文件中：<link rel="stylesheet" href="css/yy.css"/>                    在html中引用css文件 。
                               <div class="box">修饰字体和格式的常用形式</div>       div盒子选择类选择器
     2、CSS文件中：    .box{……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: 200px;/*行高 400px往下比容量高，比容量低向上*/
    text-decoration: underline;/*文本划线overline,line-through*/
    text-shadow: 2px 2px 3px yellow;/*字体阴影 第一个水平影音距离 二垂直阴影距离 三模糊距离 色*/
                 text-indent: 2em;/*em相对单位 首行缩进*/                }
四、   修饰背景的常用形式
          分别新建HTML文件和css文件。
     1、 HTML文件中：<link rel="stylesheet" type="text/css" href="css/ww.css"/>    在html中引用css文件 。
                                <div class="box">内容滚动背景不动</div>                               div盒子选择类选择器
     2、CSS文件中：*{margin: 0;}       边距为0
                          div{
    background-color: red;/*加背景颜色*/                                                    background-image:url(../img/icon.jpg.jpg) ;/*../返回上一级，加背景图片*/
    background-position: -100px 0;/*背景图皮平移  x y往上移负的*/           background-size: 300px 300px;/*背景图片的大小*/
    background-size: cover;/*背景图片无失真占据页面*/                              background-repeat: no-repeat;/*背景图片平铺   repeat-x repeat-y沿着xy平铺*/
    background-attachment: fixed;/*背景不动内容动*/                                opacity: 0.5; /*透明度*/         }
五、颜色表示方法
       新建HTML文件。
       <style>span{color:#fff ;  /*#fff白色, #0000ff  精度不同； rgb(0-255)例如rgb(0,0,0)   rgba(0,255,255,0-1     最后一位表示透明度)*/            }
       background-color: red;                 background-color: transparent; /*背景全透明*/            </style>

心得体会：
在今天的学习中，我们部分实验有了时间在课堂练习，有的实验还是需要在课下练习，师傅领进门，修行靠个人。老师下午讲课时生动幽默，节奏刚刚好，我
们在欢乐中学习，避免了零基础学生对代码的反感的心态，还是需要多多练习，多多进步。本次实验主要学习了关于css文件的常用选择器、修饰字体和格式的常用形式、修饰背景的常用形式和颜色表示方法等基本代码。学习了六个常用选择器的使用方法，
包括关键字class和id选择器在css文件中的代码格式，选择器的优先级等。首先注意的是，HTML文件要使用link语句引用css文件的代码。学习了修饰字体和格式的常用
形式，字体颜色大小等。学习了利用background-position语句移动图像。