CSS学习_02(纯零基础学习)

 (温馨提示:  在上一篇博客里我们学习了CSS的,书写位置,基础选择器,CSS的部分属性,和两个案例,没看的可以去看看哦)

 在本博客中介绍了:CSS选择器进阶, emmet语法, 背景元素的显示模式, css特性, 一个小案例

1.选择器进阶

    1.选择器-后代

      选择器语法:选择器1 选择器2{ CSS }

  可以看到上面的p标签并没有变色, 但div里的p标签变色了

    2.选择器-子代

     选择器语法:选择器1>选择器2{css}

  

   经过两张图片的对比,可以看出,子代选择器只会选择对应后面的标签

   3.并集选择器

     选择器语法结构:选择器1,选择器2{CSS}

     4.交集选择器

       作用:选中页面中 同时满足多个选择器的标签

       选择器语法:选择器1.选择器2{CSS}

    5.伪类选择器

        :hover 鼠标悬停,则执行一些css样式的操作

        语法:标签:hover{css}    (注意:任何标签都可以加上这个伪类)

     

     鼠标悬停颜色变红

2.emmet的语法

  这里敲一下回车就好,多的我就不演示了.很实用自己多练练

3.背景

    1.背景颜色:

      background-color:设置背景颜色

      你用rgb方法,#数字,关键字方法都是可以的,其中有rgba最后的a是调解透明度的

    2.背景图片

      background-image:url(图片地址) 

      如果图片太大则只会显示一个角落,如果图片太小则会平铺在格子内

    3.背景平铺

        background-repeat: 

        repeat(默认值)水平和垂直方向都平铺

        no-repeat:不平铺  repeat-x 沿着水平方向(x轴平铺)  repeat-y沿着竖直方向(y轴进行平铺)

    4.背景位置

         background-postion:属性1  属性2 

         center中间,bottom下面 ,right右面,left左面.也可以用像素调节.也可以是负数,这样就会出界

    5.连写:

        background:color image repeat position  例:

        background:pink url() no-repeat center center 

如果你们你们的背景图片很大,可以用 background-size: 100px 100px;来调小,还可以去画图或者word文档里面设置图片的高和宽,然后在保存回来

4.元素的显示模式 

     1.块级元素

        显示特点:独占一行(一行只能有一个)

        宽度默认是父亲的宽度,高度默认是由内容撑开的

        可以设置宽度和高度

例如:div,p,h系列,ul,li,dl,dd,dt,form,header,nav,footer..........

   2.行内元素

      显示特点:

         1.一行可以有多个

         2.宽度和高度默认由内容撑开

         3.不可以设置宽高(写了也不生效)

代表标签:a,span,b,u,i,s.strong,ins,em,del......

   3.行内块元素

       显示特点:

         一行里面可以有多个

         可以设置宽高

    代表元素:input,textarea,button,select,img 

    4.元素显示模式的转化

      display:block 块级  inline 行内  inline-block行内块元素

    5.HTML嵌套规范

  1.块级元素一般作为大容器,可以嵌套:文本,块级元素,行内元素,行内块元素等等.....

     但是:p标签中不能嵌套div,p,h等块级元素

   2.a标签内可以嵌套任何元素

     但是不能嵌套a标签

5.css特性

   1.继承性:

      特性:子元素默认继承父元素样式的特点(子承父业)

      可以继承常见的属性(文字控制属性都可以继承)  除了文字控制属性可以继承其他都不可以

   所以我们可以在body里面设置好文字的属性,保证内容文字的样式统一,有特殊的再特殊修改

注意如果标签自带的默认属性是不会修改的例如a标签自带蓝色字体,则他的color属性不会变大小会变,h1自带加粗和大小则他的颜色会变

   2.层叠性: 

    就近原则那个在下面那个就生效  (注意只有选择器优先级相同的时候才有优先级的判断)

 3.优先级

   特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式

     1.优先级公式:

  继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important(原则:能选择的东西越多,他的优先级越低)

   注意: !import写在属性值后面,分号前面

            !import不能提升继承的优先级,测试的时候如果自己有样式则无法继承

            实际开发中不建议使用!import

div{
   color:red !import;
}

    2.优先级的计算

       场景:如果是复合选择器,此时需要通过权重计算方法,判断最终那个选择器优先级最高

       权重叠加计算公式:(0             ,0                ,0               ,0) (注意:不存在进位)

      复合选择器: 行内样式个数  id选择器      类选择器    标签选择器      !import大于所有

6.案例

     

下一篇博客介绍盒子模型和浮动,看到这里了感谢你们的支持,点个赞再走吧,谢谢啦!!!!!!!!!!

(有不对的或者是想讨论的地方可以评论留言,我会积极回复的)