• CSS3学习笔记


    第一课:
    background-attachment:fixed 背景图片不滚动
    background-image:url(""); 默认允许重复
    background-repeat:no-repeat repeat repeat-x repeat-y
    background-position:right;//==right和center
    background-position:0px 0px 更多 也可百分比

    CSS3背景
    background-size:
    background-origin
    background-clip

    第二课:文本
    text-indent:首行缩进
    text-transform:capitalize;首字母大写 lowercase全部小写
    uppercase;全部大写

    text-shadow:5px 5px 5px #ffo 影子距离左上距离
    清晰度 颜色

    text-wrap:normal; 自动换行

    第三课:字体
    font-family
    font-size
    font-weight

    CSS3的改进
    @font-face{
    font-family:自己命名
    src:url();
    }
    下一步直接引用

    第四课:链接
    a:link
    a:visited
    a:hover
    a:active

    text-decoration:none;
    background-color: 链接的背景颜色

    第五课:列表
    list-style:
    list-style-image:url("")
    list-style-postion:inside;往里边缘走
    list-style-position:outside;往外边缘走
    border-collapse:collapse;合并边框

    第六课:CSS轮廓
    outline
    outline-color
    outline-style:groove dotted... 突出
    outline-width:粗细

    第七课:基础语法
    如果值大于一个单词 加""

    第八课:盒子模型
    宽高是内容部分的;

    边框的样式
    border-style:double;dotted

    边框的单边样式
    border-top-style:

    border-
    border-top-单边框宽度
    border-color:边框颜色

    border-radius:圆角边框
    box-shadow:边框阴影
    border-image:边框图片

    外边距:
    接受任何长度单位和百分比

    第九课:定位
    position:relative 相对布局 z-index
    absolute 绝对布局 不占位置 z-index
    fixed 相对浏览器
    static 偏移量不起作用
    z-index:1 谁的值大覆盖在上面

    第九课:浮动
    float:
    inherit 从父级继承浮动属性

    clear:去掉浮动属性

    height:auto 自适应

    第十课:选择器

    a.class {}
    .class.class{}

    id选择器
    id选择器不能结合使用
    js需要用到id

    [title]{}属性选择器 [title=""]{}
    [title~=""]{}根据部分属性值,包含单词

    a[href=""]{}

    子元素选择器
    h1>strong{color:red}

    li+li{} 相邻兄弟元素 可选择紧接
    在另一个元素后的元素,且二者有相同的父元素

    第十一课:
    line-height:normal
    百分比

    max-width 满足单词不拆分 换行
    min-width

    cursor:auto 默认的 cell 等 设置鼠标指针

    display 列表里 横向还是竖向显示
    display:inline 一行

    visibility:hidden visible 可见效果

    第十二课:导航栏
    a:linked,a:visited{text-decoration:none;font-weight:bold;}
    a:active,a:hover{backgroundcolor:red;}
    垂直导航栏

    水平导航栏
    li{display:inline;}

    图片透明度 opacity:0 完全透明 1完全不透明


    第十三课:CSS动画

    2D 3D转换:transform: 浏览器问题注意
    2D转换方法:
    translate()
    transform:translate(100px,100px;)第一个x轴的移动距离,第二y
    -webkit-transform:translate(100px,100px);chrome safary浏览器支持
    -ms-transform:translate(100px,100px);ie浏览器支持
    -o-transform:translate(100px,100px);opera浏览器支持
    -moz-transform:translate(100px,100px);Firefox浏览器支持

    rotate:()旋转
    transform:rotate(180deg);
    scale()缩放
    transform:scale(2,1)第一个为宽 第二高 倍数
    skew()倾斜
    transform:skew(20deg,20deg)第一个x轴 第二个y轴
    matrix()矩阵效果


    3D转换方法:
    rotateX
    transform:rotateX(120deg)
    rotateY


    第十四课:动画过渡transition
    transition:width 2s,height 2s,transform 2s;
    -webkit-transition:width 2s,height 2s,-webkit-transform 2s;

    transition-delay:2s;延时执行


    第十五课:动画
    动画时常
    动画名称
    animation:anim 5s;
    -webkit-animation:anim 5s;

    @keyframes anim{
    0%{background:red;left:0px;top:0px}
    25%{background:blue;left:2px;top:0px}
    }
    @-webkit-keyframes anim{
    0%{background:red;left:0px;top:0px}
    25%{background:blue;left:2px;top:0px}
    }


    第十六课:多列
    colume-count:3;
    -webkit-colume-count:3; 3列
    colume-gap:50px; 间距
    colume-rule:5px outset #FF0000; 间距


    第十七课:瀑布流
    colume-250px;单列宽///

  • 相关阅读:
    POJ 2154
    POJ 1286
    Polycarp's problems
    Greedy Change
    Goods transportation
    Ugly Problem
    Happy Matt Friends
    Dense Subsequence
    Ray Tracing
    Batch Sort
  • 原文地址:https://www.cnblogs.com/yigexiaojiangshi/p/6593877.html
Copyright © 2020-2023  润新知