• CSS3


      css3更新的一些新特性,给界面带来了更加丰富的效果,也给写代码带来了很多的便利。css3的新特性有更强大的css选择器,更多的颜色格式和透明度的设定,多栏布局的实现,多背景图的效果,文字阴影、开放的网络字体类型、圆角、边框背景图片、盒子阴影、媒体查询等丰富效果,深入学习以后css3会是我们写网页更加方便去、更加强大的助手。

      1.css3的新选择器 常用的用蓝色标记

        伪类选择器有 

          1):link 设置超链接没有被访问之前的样式。 

          2): visited 设置超链接被访问过的样式

          3) :hover 设置元素在其鼠标悬停时的样式。

          4) :active 设置元素在被用户在鼠标点击与释放之间发生的事件时的样式。

          5):focus 聚焦(onfocus时)时的样式。

          6):lang(fr) 内容里面包含fr的时候增加样式

          7):not(s) 匹配不含有s选择符的元素。内容里面不包含s的时候增加样式

          8):root 匹配元素在文档的根元素。在HTML中,根元素永远是HTML

          9):first-child 匹配父元素的第一个子元素。

          10):last-child 匹配父元素的最后一个子元素。

          11):only-child 匹配父元素仅有的一个子元素。

          12):nth-child(n) 匹配父元素的第n个子元素

          13):nth-last-child(n) 匹配父元素的倒数第n个子元素

          14):first-of-type 匹配父元素下第一个类型为的匹配元素的子元素。

          15):last-of-type 匹配父元素下的所有E子元素中的倒数第一个。

          16):only-of-type 匹配父元素的所有子元素中唯一的那个子元素。

          17):nth-of-type(n) 匹配父元素的第n个子元素。

          18):nth-last-of-type(n) 匹配父元素的倒数第n个子元素。

          19):empty 匹配没有任何子元素(包括text节点)的元素。

          20):checked 匹配用户界面上处于选中状态的元素。

          21):enabled 匹配用户界面上处于可用状态的元素。

          22):disabled 匹配用户界面上处于禁用状态的元素。

          23):target 匹配相关URL指向的元素。

        属性选择符  att为属性  

    1)[att] 选择有att属性的元素

    2)[att="val"] 选择具有att属性且属性值等于val的元素。 例如:input[type="text"]

    3)[att~="val"] 选择很多属性中  包含一个属性就可以选中

    4)[att^="val"] 选择属性以val开头的

    5)[att$="val"] E[att$="val"]  选择属性以val结尾的。

    6)[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。

    7)[att|="val"] 选择具有att属性(包含val就会被选中)

    伪对象选择器 (此伪对象仅作用于块级元素。前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。即E:first-letter可转化为E::first-letter)

    1)E:first-letter/E::first-letter 设置对象内的第一个字符的样式。 可以用于开头文字设置特别的样式

    2)E:first-line/E::first-line 设置对象内的第一行的样式。

    3)E:before/E::before 设置在对象前发生的内容。

    4)E:after/E::after       设置在对象后发生的内容。

      2.颜色 :rgba格式    rgba(250,250,250,0); 最后一位是透明度

          单独设置透明度的属性有 opacity 取值零到1 。设置透明色color:transparent;

      3.边框

        边框常用的有border-radio 边框圆角 可以设置百分比,也可以设置单位数值。(如果圆角值为50%的时候 该盒子模型会变成圆的) 

        box-shadow  盒子阴影,可以设置四个值 box-shadow: 10px 10px 5px #888888; 分别是设置阴影x轴偏移、Y轴偏移 和阴影大小 颜色。

        边框图片,在css3中可以设置边框为图片,border-image属性,可以使用图像创建一个边框。border-image:url(border.png) 30 30 round;

      4.背景

        1)background-image 设置背景图片各种属性,路径 是否平铺等等

        2)background-size  设置背景图像的大小。

        3)background-Origin 

      5.css3 2D转换

        translate(x,y)以x和y轴平移,单独设置的写法为translateX()  translateY()

        transform: rotate(30deg);  把元素顺时针旋转30度(deg)

        transform: scale(2,4); 拉伸方法,把宽度设置为原来的2倍,高度设置为原来的4倍,也可以分开设定,同上

        skew() 翻转,transform: skew(30deg,20deg);沿着x轴翻转30deg,沿着y轴翻转20deg。分开的写法为skew(x-angle,y-angle);

      6.3D转换

        transform-origin : 改变被转换元素的位置。

        perspective : 设置元素被查看位置的视图

      7.css3过渡

        transition 可以设置过渡的曲线速度   

    linear 线性过渡

    ease 先慢后快

    cubic-bezier(n,n,n,n);  设置贝塞尔曲线  可能的值是 0 至 1 之间的数值。

    ease-in 以慢速开始的过渡效果

    ease-out 以慢速结束的过渡效果

    ease-in-out 以慢速开始和结束的过渡效果

       8.动画 animation

          @keyframes 声明规定动画,然后设置每个阶段效果,参照博客animation实现动画钟表效果。

          animation-duration 固定一个动画的完成周期

          animation-timing-function 规定动画的速度曲线,参照过渡

          animation-fill-mode 当动画没有播放的时候需要的样式

          animation-delay 延时播放

          animation-iteration-count 规定动画播放的次数

          animation-direction 规定动画是否在下一周期逆向的播放

          animation-play-state 设置动画是否正在运行或暂停

        9.css3 弹性盒子 

            后面有单独一篇介绍flex

        

             

  • 相关阅读:
    cookie secure属性 导致setcookie失败-test
    vim 常用操作总结(持续更新)-test
    网页重定向(外部重定向和内部重定向)-test
    pat 1002 A+B for polynomials (第二个测试点一直无法通过,最后解决)-test
    pat 1001 A+B Format-test
    验证码无法显示的其中一种原因-test
    str_replace替换换行符失败原因-test
    .net/C#语言web项目内新增js或css文件调用不到,url报错404
    在W10系统中配置Java环境变量后,cmd命令提示符找不到java
    JS使用知识点理解
  • 原文地址:https://www.cnblogs.com/wangzheng98/p/11238548.html
Copyright © 2020-2023  润新知