0
点赞
收藏
分享

微信扫一扫

css笔记

小黑Neo 2022-02-18 阅读 66
css

一、选择符

1、元素选择符
  *{}   #id{}  .class{}   标记{ }

2、关系选择符
   (1)后代选择符(包含选择符) div  p{}
   (2)子选择符div>p{}
   (3)相邻选择符  E+F    E和F是相邻的,并且F必须是E后面的元素
   (4)兄弟选择符 E~F     E和F是兄弟,并且F必须是E后面的元素

3、伪类选择符

    (1)超链接类的 a:link a:visited a:hover a:active
    (2)E:hover  任何元素都可以加经过
    (3):focus{outline:none;}  表单获取焦点去掉黑框
    (4)E:nth-child()   数字   2n(even) 偶数   2n+1(odd) 奇数
         E是孩子是标记,不分类型  父亲的孩子
    (5)E:first-child{}   E:last-child{}   E:only-child{}
    
    (6)E:nth-last-child()  倒数

    (7)E:nth-of-type(){} 孩子 特指某一类型的孩子   (按类型数)
    (8)E:only-of-type{}

    (9)E:target   E:checked   可以去了解一下

4、伪对象选择符

        伪对象选择符:

        E::before{content:'';}
         E::after

         E::placeholder
         E:selection
    
 /*兼容性  谷歌*/
        input::-webkit-input-placeholder {
            color: red;
        }
   /*兼容性  火狐*/
        input::-moz-input-placeholder {
            color: red;
        }
   /*兼容性  IE*/
         input::-ms-input-placeholder {
            color: red;
        }
   /* 标准写法 */
        input::placeholder {
            color: red;
        }

二、文字图标的运用
 阿里巴巴矢量库

三、css3制作三角形
   百度一下

四、属性选择符


五、引入外部字体

  @font-face {
            /* font-family: "Raleway"; */
            font-family: "jiaxu";
            src: url(./fonts/Raleway/Raleway-Regular-2.ttf) format('truetype');
        }

        p {
            /* font-family: "Raleway"; */
            font-family: "jiaxu";
            font-size: 30px;
            color: brown;
        }

六、过渡动画

 /* transition-property: width,height;
    transition-duration: 1s,2s;
    transition-timing-function: ease, linear;
    transition-delay: 0s,3s;
 */

    transition: all 1s ease 2s;

七、clip裁剪

        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        /* 上 右 下 左 */
        clip: rect(0 78px 156px 0); position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        /* 上 右 下 左 */
        clip: rect(0 78px 156px 0);

八、动画
   /* 拆分 */
            /* 动画名字 */
            /* animation-name: changes; */
            /* 动画的持续时间 */
            /* animation-duration: 3s; */
            /* 动画形式  ease  ease-in  ease-out  ease-in-out linear */
            /* animation-timing-function: ease; */
            /* 动画延迟时间 */
            /* animation-delay: 1s; */
            /* 动画的方向 */
            /* animation-direction: reverse; */
            /* animation-direction: alternate; */

            /* 动画的执行次数  infinite 无限循环*/
            /* animation-iteration-count: infinite; */
            /* animation-iteration-count: 2; */

            /* 动画对象的状态 running   paused */
            /* animation-play-state: paused; */

            /* 动画时间之外的状态   forwards 结束时*/
            /* animation-fill-mode: forwards; */

            /* 复合属性 */
            animation: changes 3s ease 0s   forwards;


九、变换
  transform:rotate(30deg) translate(50px,50px) scale(1.2);  变换:  位移   旋转  缩放
  transform-orign:left top;   旋转缩放中心点
  transform-style:preserve-3d;  真3d
  perspective:500px;   透视
  perspective-origin:center center; 消失点 灭点
  backface-visibility:hidden; 背面不可见
 

举报

相关推荐

CSS笔记

CSS菜鸟笔记

CSS学习笔记

CSS笔记4

CSS笔记1.5

css笔记1

CSS笔记3

CSS笔记1

css 学习笔记...

css笔记(一)

0 条评论