吴东东-20201028

知识总结：

一、样式选择器
选择器定义：在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，
            某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，
            找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。

1.标签选择器。
    定义：顾名思义利用标签名来选择元素；
 例：   h1{
    width: 400px;
    height:200px ;
     background-color: purple; 
    
  }
css选择器
1）标签选择器：
        标签选择器，可以选中所有的标签，比如div,ul,li,p等等；
        不管标签的藏得多深，都能选中；
        选中的是所有的，不是某一个，所以说这个标签选择器选中
        的是"共性"的属性，而不是"特性"
2.ID选择器。
定义：通过元素的ID值选择元素：
    /*id选择器*/
    #box{
      width: 400px;
       height:200px ;
       background-color: green; 
     }
   #text{
    color:yellow;
     }
注： #选中id
    同一个页面中id不能重复，
    是不是所有的标签都可以加标签呢？任何的标签都可以设置ID，但是ID的命名一定要规范，
    字母开头后边可以数字，下划线等等。
3.类选择器。
    所谓类：class 与id非常的相似，可以作用任何标签，
    但是id特性是唯一，但是类是可以重复的，叫做归类；
    同一个标签中可以携带多个类；多个类之间用空格隔开；
     /*类选择器*/
.box{
   width:300px;
   height:200px;
   background-color: black;
   }
.box:hover{
    background-color: sienna;
}
 注：如何使用类选择器总结 
         需求：
             段落1：40px,绿色
             段落2：绿色，下划线
             段落3：下划线，40px
4.后代选择器
（选择器：精准选中要修饰的目标）
*后代选择器 */
div ul li{
    color: darkblue;
}
5.伪选择器 
/*伪类选择器 */
a:hover{
    text-decoration: none;
}
选择器的优先级
    相同属性下：后代选择器（子选择器）> id选择器 > class选择器 > 标签选择器
二、常用样式：
    样式的添加方式：3种  行内样式   外部样式  页面内样式

 3种添加样式的方式的优先选择  就近原则
 样式的使用
 背景修饰样式
    background-color: red;                  背景颜色
    background-image: url(img/favicon.ico);    背景图片
    background-repeat: no-repeat;            设置背景图片不重复
    background-size: 100px 100px;            设置背景图片大小
    background-size:cover;                   设置背景图片充满盒子
    background-position-x: 150px;             背景图x轴方向位移
    background-position-y: 100px;             背景图y轴方向位移
    background-position: 150px 150px ;        背景图X,y轴方向位移
1）. 文本样式   
        颜色  color: red;   /*颜色*/
    大小font-size: 20px;  /*字体大小*/
       p{
           font-size: 36px;
         }
    字体font-family: "宋体";   /*字体*/
      粗体font-weight: 700;    /*字体粗细*/
      设置文字加粗效果：
     p{
          font-weight: bold;
      }
    间距letter-spacing: 10px;   /*文字间距*/
    首行缩进text-indent: 40px;    /*首行缩进*/
    线text-decoration: line-through;   /*删除线*/
    text-decoration: underline;/*下划线*/
    text-decoration:overline;  /*上划线*/
    阴影text-shadow: 5px 5px 2px red;  /*文字阴影*/
鼠标样式
    cursor: pointer;   手
    cursor: url(img/favicon.ico),auto;
    图片
透明度
    opacity: 0.3; /*0，完全透明；1,完全不透明*/
    background-color: rgba(215,215,215,0.3);
    /*设置div透明，但是里面的内容不透明
1.text-align:center(对齐方式）

p{
text-indent: 2em;
}
6，设置文字的装饰效果：
p{
text-decoration: underline;
}

7，设置段落首行缩进：
p{
text-indent: 2em;
}

8，设置字间距离：
p{
word-spacing: 20px;
letter-spacing: 2px;
}

9，设置文字的行高：
p{
line-height: 1.5;
}

10，设置段落之间的距离：
p{
border: 1px red solid; /* 设置标签 /
margin: 1px; / 设置段落边距 /
padding: 10px; / 段落距离 */
}
）

心得体会：通过这三天的实训，今天重点主要学习了style样式，并学习了一些基础的设置，
添加颜色等代码操作。还学习了浮动，添加图片的操作以及css内联样式的代码书写、
学习了css外联样式的代码书写，并对所学的各种代码操作加以总结复习