• CSS3学习内容与心得


       今天2005年7月9号,博客这个东西还真不懂,以前吧我不认识它,它也不认识我。没辙,汤老要我们写,就写吧。

    写什么好呢?那就写今天学习的css3的一些要点吧。

      css这门课程几乎都学完了。而我觉得我还不错吗,还认识几个单词了,呵呵。基本格式也都会了。甚至能写几个小小的网页,当然,这些对于大神朋友们而言,小菜一碟。不过我是新手,给点鼓励吧。言归正传,正式上菜:

      一、新增选择符

    • E:first-child {属性:值 }    匹配父元素的第一个子元素E。

        要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

        E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素。

    • E:only-child { 属性:值 }   匹配父元素仅有的一个子元素E。

        要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

    •   E:nth-child(n) { 属性:值 }   匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

        

        要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

        该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)

    •   E:first-of-type {属性:值}     匹配同类型中的第一个同级兄弟元素E。

         

          要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

          该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E

    • E:focus { 属性:值}   设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

    、背景

        background-origin<box> [ , <box> ]*

        <box> = border-box | padding-box | content-box

      设置或检索对象的背景图像计算background-position时的参考原点(位置)。

      对应的脚本特性为backgroundOrigin

     

    padding-box:
    从padding区域(含padding)开始显示背景图像。
    border-box:
    从border区域(含border)开始显示背景图像。
    content-box:
    从content区域开始显示背景图像。
    • background-clip<box> [ , <box> ]*指定对象的背景图像向外裁剪的区域。

    <box> = border-box | padding-box | content-box | text

    padding-box:
    从padding区域(不含padding)开始向外裁剪背景。
    border-box:
    从border区域(不含border)开始向外裁剪背景。
    content-box:
    从content区域开始向外裁剪背景。
    text:
    从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit

    <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

      • 该属性提供2个参数值(特性值cover和contain除外)。
      • 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
      • 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。
      • 对应的脚本特性为backgroundSize

              

            

  • 相关阅读:
    【二分图】HEOI2012 朋友圈
    【转载】动态规划—各种 DP 优化
    【默哀】京阿尼纵火案一周年
    【暑假集训】HZOI2019 Luogu P1006 传纸条 二三四维解法
    【暑假集训】HZOI2019 水站 多种解法
    最小二乘法求线性回归方程
    51Nod 最大M子段和系列 V1 V2 V3
    【博弈论】51Nod 1534 棋子游戏
    【最短路】CF 938D Buy a Ticket
    51nod1524 最大子段和V2
  • 原文地址:https://www.cnblogs.com/zhangqiang329/p/4634302.html
Copyright © 2020-2023  润新知