吴东东-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外联样式的代码书写,并对所学的各种代码操作加以总结复习

标签

评论

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