CSS3中新增得属性

CSS3中新增得属性

属性选择器的使用

       E[attr]   E表示标签的名字 [ ]中括号中填写选择属性 attr是一个属性

       E[attr=”value”]  表示选中属性中带有value属性的

       E[attr~=”value”] 表示选中有attr属性，且是有共同的value（某某）属性

       E[attr ^="value"] 表示选中有attr属性，且是有共同的value（某某）属性开头/开始的

       E[attr $="value"] 表示选中有attr属性，且是有共同的value（某某）属性结束/结尾的

       E[attr *="value"] 表示选中有attr属性，且是所有共同的value（某某）

       E[attr |="value"] 表示选中有attr属性，且是value或者以“value-”开头的值

结构选择器的使用

    第一类的用法：所有的标签都一样的时候(这里指的是标签名称)

      - X:first-child   X表示当前标签的集合

      - X:last-child  表示选中最后一个

      - X:nth-child  (填写选择的第一个序号数字即可)

      - X:nth-last-child(序号)

      - X:only-child 只有一个子级元素 - 了解

    第二类的用法:标签名称都是不一样的 (先筛选相同的标签，在再这个标签的集合中进行选择)

      - X:first-of-type

      - X:last-ot-type

      - X:nth-of-type(序号)

      - X:nth-last-of-type

      - X:only-of-type 仅有一个

  了解

      - X:root    根元素/根目录

      - X:empty  匹配没有任何子元素（包括包含文本）的元素X

  工作中常用的属性选择器：

 E[attr] 选择标签 选择属性

 E[attr="value"] 选择标签 选择属性 规定了属性值

工作中常用的结构选择器：

                 标签名称都一样：X:nth-child(序号){}

                 标签名称不一样：X:nth-of-type(序号){}

工作中常用的目标伪类选择器

              E（某个标签）:target选择匹配E的所有元素，且匹配元素被相关URL指向

              跟之前学习的锚点关系差不多，帮点id关系，即可指定选择中某个标签来进行跳转目标。可以设置目标元素进行跳转之后得样式（利用这个可以制作一个经典的手风琴效果，一些网页的banner图也是使用这个方法制作得）

UI 元素状态伪类选择器

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素

E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E

::selection 匹配E元素中被用户选中或处于高亮状态的部分（就是点击右键文本进行拖动后，改变浏览器初始设置的颜色以及背景样式）

E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点（就是当用户点击可输入状态后，改变输入框的背景颜色）

语言伪类选择器:E:lang(en)

否定伪类 选择器 E:not(选择器) 选择除了选中当中的标签或者属性进行设置样式

层级选择器：div>p{ 表示选中div下面所有的子级p标签元素}

<div>

             <h1></h1>

              <p></p>

             <p></p>

             <p></p>

</div>

E>F子选择器

选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F

相邻兄弟选择器

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

 表示选中自己还有相邻的一个兄弟级元素

E~F

通用选择器

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

 表示所有的E~F标签的所有F元素

文本的属性设置：

       文本阴影

        属性:text-shadow

        属性值:常用的有4个属性值

            - 水平方向

            - 垂直方向

            - 模糊程度

            - 颜色值

            - 还有其他方向的阴影，可以在最后加个逗号继续书写即可

       盒子阴影

        属性:box-shadow

        属性值:

            - 水平方向

            - 垂直方向

            - 模糊程度

            - 颜色值

            - 还有其他方向的阴影，可以在最后加个逗号继续书写即可

            - 有第五个属性值 控制阴影在内还是在外显示 inset，如果没有设置默认是向右下方

iconfont的使用

        1.下载的三种方法使用:需要有网络

            - unicode   兼容性好/不支持设置多彩

            - fontclass 兼容性好、形象直观/不支持设置多彩   ！！！工作中常用的

            - symbol    兼容性不好、解析较差/支持多彩

        2.在线导入图标 在线的导入是最方便的，但是有的公司没有网络就不能使用

背景尺寸的使用

属性和属性值:background-size

        - 100% 100% 宽高大小 自适应到父级容器 会拉伸变形 不会超出容器（常用的）

        - cover 会自动覆盖整个父级盒子的大小 会超出容器(看不见) 背景图片不会变形

显示不完全，

        - contain 不会裁切 不会变形（自动按比例适应到父级盒子的宽高大小，适应到合适的宽度自动停止拉伸，如高度也是一样）

颜色的另一种表达方式：

        颜色

        - 英文单词

        - 十六进制

        - rgb/rgba

       

    - hsl/hsla( 这种颜色表达的方式，常用的地方主要是在一些硬件设备上的调试，例如家里的电视屏幕显示等等)

        - hue               色调       0~360

        - saturation     饱和度     0%~100%

        - lightness      亮度       0%~100%

        - a （透明度）

边框图片的设置方式：了解

            border-image-source: url(images/a.png);

            border-image-slice:45% ;/* 百分比 */

            border-image-outset: 10px/

            border-image-repeat: stretch

边框的圆角设置：

              边框属性 border-radius  常用的就只有一个值和四个值得显示方式

        - 一个属性值 圆/盒子宽高的一半/50%~100%  !!!!

        - 两个属性值 左上角和右下角对应  右上角和左下角对应

        - 三个属性值 左上角 右上角和左下角对应 右下角

        - 四个属性值 左上 右上 右下 左下  !!!!!

        - 八个属性值 左上角x 右上角x 右下角x 左下角x/左上角y 右上角y 右下角y 左下角y