zoukankan      html  css  js  c++  java
  • CSS3学习笔记

    1 2D转换:transform 变换
      1.1 translate(x,y)
        1.1.1 移动元素,x为正表示在x轴向右移动,y为正表示在y轴向下移动
      1.2 rotate
        1.2.1 旋转角度,单位(deg)
      1.3 scale
        1.3.1 缩放大小,单位(x)整体扩大x倍
        1.3.2 scale(x,y),width扩大x倍,height扩大y倍
      1.4 skew
        1.4.1 skew(x,y) 倾斜角度
      1.5 3D转换:rotateX(),rotateY()
    2 transtion 过度
      2.1 设定某属性动画执行的时间
      2.2 transtion-delay 延迟执行的时间
    3 animation 动画
      3.1 animation{动画名称 动画时间 infinite}
      3.2 infinite 指的是永不停止的运行
      3.3 @keyframes
    4 columns 多列布局
      4.1 column-count
      4.2 column-gap
      4.3 column-rule
        4.3.1 列之间的线的样式 如:5px outset red
    5 新增属性选择器
      5.1 [id*=mydiv] 选择id中包含mydiv字符的元素
      5.2 [id^=mydiv] 选择id名中前面包含mydiv字符的元素
      5.3 [id¥=mydiv] 选择id名中后面包含mydiv字符的元素
    6 结构性伪类选择器
      6.1 first-line 选择某个元素内容中的第一行内容
      6.2 first-letter 选择某个元素内容中的第一个字母
      6.3 before 修改某个元素内容前面的内容
      6.4 after 修改某个元素内容后面的内容
    7 选择器详解(一)
      7.1 :root 选择器,选择整个页面最底部的元素,即选择html
      7.2 :not 选择器 排除某些元素, 如 div *:not(p)
      7.3 :empty 选择器 当内容为空的时候该样式起作用
      7.4 :target 选择器 当触发a链接中target时,为其添加样式
    8 选择器详解(二)
      8.1 first-child 第一个子元素
      8.2 last-child 最后一个子元素
      8.3 nth-child 如:li:nth-child(3) 选择li中第三个子元素
      8.4 nth-last-child 如:li:nth-last-child(3) 选择li中倒数第三个子元素
      8.5 nth-child 如:li:nth-child(odd) 选择li中序号为奇数的子元素
      8.6 nth-last-child 如:li:nth-last-child(odd) 选择li中序号为奇数的子元素(从后向前数)
      8.7 nth-child 如:li:nth-child(even) 选择li中序号为偶数的子元素
      8.8 nth-last-child 如:li:nth-last-child(even) 选择li中序号为偶数的子元素(从后向前数)
      8.9 :nth-of-type(odd) 选择同类型中的奇数项
      8.10 :nth-of-type(even) 选择同类型中的偶数项
      8.11 :only-child 选择只有一个子元素的子元素
    9 选择器详解(三)
      9.1 :hover 如 input[type="text"]:hover
      9.2 :focus 获取焦点是显示,点击
      9.3 :active 鼠标按下时显示
      9.4 :checked 当选框被选择后显示
      9.5 :enabled 选择可用的
      9.6 :disabled 选择不可用的
      9.7 通用兄弟元素选择器 ~ 选择同一个父级下的所有兄弟选择器
    10 文字样式
      10.1 text-shadow 文字阴影
      10.2 使用服务器端字体
        10.2.1 <style type="text/css"> @font-face{ font-family: webfont; /*//字体名自定义*/ src:local("webfont"),url("字体位置")format("truetype"); } div{ font-family: webfont; } </style>
    11 盒子相关样式
      11.1 block,inline,inline-block,inline-table,list-item
      11.2 inline-block 表示具有inline的属性,并且有block的属性
      11.3 inline-table 表示表格具有inline的属性,并且有block的属性
      11.4 list-item 表示其他元素具有list的属性,如可以添加list-style-type设置序号
      11.5 overflow:hidden 超出隐藏 scroll超出滚动 auto 自动
      11.6 overflow-x overflow-y 可以针对x,y方向进行设置
      11.7 子主题 7
    12 white-space
      12.1 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。
    13 background 新增属性
      13.1 background-clip background-clip:border-box 给边框内边距内容都添加背景样式 background-clip:padding-box 给内边距内容都添加背景样式,border没有样式 background-clip:content-box 给内容都添加背景样式,border,padding都没有样式
    14 border-radius 设置圆角
    15 border-img 给边框添加背景图片
    16 动画功能
      16.1 transitions transtion:width属性 3s过度时间 linear 线性过度形式
      16.2 animations
      16.3 实现动画的的方式
        16.3.1 linear 匀速变化 ease-in 先慢后快 ease-out 先快后慢 ease 慢 快 慢 ease-in-out 慢 快 慢
    17 分支主题 17
      17.1 子主题 1
  • 相关阅读:
    非模式窗体和模式窗体(转
    一次性帮你解决毕业论文的所有排版问题
    c# Wndproc的使用方法
    ref和out 转
    c# 基本语法(转)
    U盘装/虚拟光驱 装双系统
    U盘启动盘 装系统
    Hibernate查询条件封装对象Expression介绍 Hi
    asp.net实现 gridview 鼠标单击任意字段选中一行 ,并获取数据 Hi
    C#如何取出非公共成员 Hi
  • 原文地址:https://www.cnblogs.com/yinzf/p/5422819.html
Copyright © 2011-2022 走看看