关于html5+css3常用属性的介绍

html5 + css3主要知识点

html5新增标签

• header头部标签
• nav导航栏标签
• article段落标签
• section块级标签
• aside侧边栏标签
• footer尾部标签

html5多媒体标签

• 音频标签 audio
  • autoplay
  • source
  • controls
  • loop
  • src
• 视频标签 video
  • autoplay
  • controls
  • width
  • height
  • loop
  • prepload
    • auto/none 是否预加载视频
  • src
  • poster 加载等待的画面图片
  • muted 静音播放，可以用于解决浏览器兼容的问题，例如谷歌浏览器禁止视频预播放，当设置了该属性时，就可以播放
• input表单元素
  • email
  • url
  • date
  • time
  • month
  • week
  • number
  • tel
  • search
  • color
• 其他表单元素
  • required
    • required 表单拥有该属性表示其内容不为空，必填
  • placeholder
  • autofocus
    • autofocus 自动聚集属性，页面加载完成自动聚焦到指定表单
  • autocomplete
    • off/on 用户在字段键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete = "on" 关闭 autocomplete = "off"。使用时需要表单有name属性以及已经成功提交。
  • multiple 可以多选文件提交。

CSS3属性

• 属性选择器

  • selector[attr] 选择具有attr属性的选择器
  • selector[attr="val"] 选择具有attr属性且属性值为val的选择器
  • selector[attr^="val"] 选择具有attr属性且属性值是以val开头的选择器
  • selector[attr$="val"] 选择具有attr属性且属性值是以val结尾的选择器
  • selector[attr*="val"] 选择具有attr属性且属性值且包含val的选择器

• 结构伪类选择器

  • E:first-child 匹配父元素中的第一个子元素E
  • E:last-child 些配父元素中最后一个E元素
  • E:nth-child(n) 匹配父元素中的第n个子元素E
    • n可以是数字、关键字、公式
    • n如果是数字就是选择第几个
    • 常见的关键字有even（偶数）、odd（奇数）
    • 常见的公式
      • 2n 偶数
      • 2n+1 奇数
      • 5n 5 10 15...
      • n+5 从第五个开始
      • -n+5 前五个（包含第五个）
    • 第0个元素或是超出元素的范围会被省略
  • E:first-of-type 指定类型E的第一个
  • E:last-of-type 指定类型E的最后一个
  • E:nth-of-type(n) 指定类型E的第n个

• 伪元素选择器

  • ::before
  • ::after
  • before 和 after 必须有content属性，它们创建的元素属于行内元素，在dom中是看不见的，故称为伪类选择器，权重与标签选择器一样为1

• 三类选择器的权重与类选择器一样

• 2d转换 transform

  • translate
    • css中移动盒子的位置：定位、外边距、2d转换移动
    • translate移动不会影响到其他元素的位置
    • translate中的百分比单位是相对于自身元素的translate:(50%,50%)
    • 对行内标签没有效果，对于行内块级元素有效
    • 可以用于块级元素的居中 left + traslate
  • rotate
    • 需要旋转的角度+自身已经旋转的角度
    • 设置旋转中心：transform-orgion: x y;
      • 参数x和y使用空格分隔
      • 默认中心点是（50%，50%）
      • 还可以设置方位名词：top、bottom、left、right、middle
  • scale
    • 参数没有单位，表示缩放的倍数
    • 只有一个参数表示同时作用域宽和高
    • scale缩放是有中心点向四周发散，不会影响其他的盒子，相比之下，重新设置width、height则会影响，因为这两个属性是在定位的右上角处根据长宽来设置。
  • 结合transition一起使用，transform表示移动的方式，transition表示整个移动的过程
  • 2d转换综合写法
    • 同时使用多个转换，其格式为：transform:translate() rotate() scale()...
    • 它的顺序回影响旋转效果
    • 一般同时设置了位移和其他属性时，要把位移放在最前面

• animation 动画

  • 先定义再使用
  • 定义：keyframes name {}
    • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
    • 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改变为新样式的的话效果。
    • 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意次数。
    • 可以使用from 和 to 以及 0% 和 100% 来定义动画。
  • 常见属性:
    • @keyframes 规定动画
    • animation 所有动画属性的简写属性，除了animation-play-state属性
    • animation-name 规定@keyframes动画的名称
    • animation-duration 规定动画完成一个周期需要的时间（秒或者毫秒）
    • animation-timing-function 规定动画的速度曲线，默认是“ease”
      • linear 动画从头到尾的速度是相同的 匀速
      • ease 默认。动画以低速开始，然后加快，在结束前变慢
      • ease-in 动画以低速开始
      • ease-out 动画以低速结束
      • ease-in-out 动画以低速开始和结束
      • steps() 指定了时间函数中的间隔数量（步长）
    • animation-delay 规定动画何时开始，默认是0
    • animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
    • animation-direction 规定动画是否在下一周期逆向播放，默认是normal,alternate逆播放
    • animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"pause"
    • animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards
  • 动画简写属性
    • animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
    • animation: myfirst 5s linear 2s infinite alternate;
    • 简写属性里面不包含animation-play-state
    • 暂停动画:animation-play-state: puased;经常和鼠标经过等其他配合使用
    • 想要动画走回来，而不是直接跳回来:animation-direction : alternate
    • 盒子动画结束后，停在结束位置: animation-fill-mode : forwards
  • 多个动画使用“，”分隔

• 3d转换

  • translate3d(x,y,z) 和 translateZ()
    

    • translateZ后面单位使用px，translate3d()省略的参数需要用0代替

  • 透视perspective

    • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
    • 模拟人类的视觉位置，可认为安排一只眼睛去看
    • 透视我们也称为视距∶视距就是人的眼睛到屏幕的距离
    • 距离视觉点越近的在电脑平面成像越大，越远成像越小
    • 透视的单位是像素
    • 透视写在被观察元素的父盒子上面的，可以父元素设置一个perspective而不同的子元素设置不同的translateZ()实现不同子元素的立体感不同
    • d就是视距(perspective)，越大看见的物体越小，z就是物体到屏幕的距离(translateZ())，越远，看见的越大。
      

  • rotate3d 3d旋转

    • transform:rotateY(45deg) : 沿着y轴正方向旋转45deg（往屏幕里面旋转，左手准则，大拇指指向x轴方向）
    • transform:rotateY(45deg) : 沿着y轴正方向旋转45deg（往屏幕里面旋转，左手准则，大拇指指向y轴方向）
    • transform:rotateZ(45deg) : 沿着Z轴正方向旋转45deg
    • transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度（了解即可）
      • xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
      • transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
      • transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg

  • 3d呈现 transform-style

    • 控制子元素是否开启三维立体环境
    • transform-style:flat子元素不开启3d立体空间默认的
    • transform-style:preserve-3d;子元素开启立体空间
    • 代码写给父级，但是影响的是子盒子

• 浏览器前缀

  • 私有前缀

    • -moz-:代表firefox浏览器私有属性
    • -ms-∶代表ie浏览器私有属性
    • -webkit-:代表safari、chrome私有属性
    • -O-∶代表Opera私有属性

  • 提倡写法

    -moz-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    

总结：

• html5中主要新增了一些标签，主要是headr、nav、article、section、aside、footer和一些多媒体标签，例如：audio、video，另外还有增加了input表单元素的一些类型。
• css3中主要增加了选择器（属性选择器、结构伪类选择器、伪元素选择器）、2d转换、动画、3d转换以及浏览器前缀等。
• 这些都是一些常用的标签、属性，还有一些不常用的没有列举出来。要想了解所有的属性、标签，mdn、菜鸟教程、w3c等是不错的选择。