郭姗姗-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语句移动图像。

标签

评论

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