css3与H5新特性

目录

目录

1.css3新特性

2.html5新特性

1. 语义化标签

---

​​​​​​​2.html5新特性

1. 语义化标签

---

1.css3中新增的一些特性大概可以分为：选择器，背景和边框属性，文本效果，2D/3D转换

1. 选择器

常规选择器

1.标签选择器(如：body,div,p,ul,li)

2.类选择器

3.ID选择器

4.全局选择器(如：*号)

5.组合选择器

6.继承选择器(如：div p)

7.伪类选择器(4种不同的状态：link、visited、active、hover。)

8.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

:nth-child(even) /* 按照偶数 */

:nth-child(odd)  /* 按照奇数 */

:disabled /* 选择每个禁用的dom元素 */

:checked /* 选择每个被选中的dom元素 */

:not(selector) /* 选择非 selector 元素的每个元素 */

::selection /* 选择被用户选取的元素部分 */

背景:

规定背景图片的尺寸:background-size

规定背景图片的定位区域:background-origin（content-box、padding-box、margin-box）

边框:

border-radius: 圆角

border-shadow/text-shadow: 阴影

border-image: 边框图片

text-shadow	向文本添加阴影
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色
text-outline	规定文本的轮廓
text-overflow	规定当文本溢出包含元素时发生的事情
text-wrap	规定文本的换行规则
word-break	规定非中日韩文本的换行规则
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行
text-decoration	文本修饰符：overline、line-through、underline (上划线、中划线、下划线)

4.2D/3D转换

变形transform：

有rotate旋转、scale缩放、translate位移、skew倾斜

过渡transition：

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

1. 语义化标签

1. 语义化标签：文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article
2. 增强型表单：HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
3. 新增表单属性：（placehoder、required、min 和 max）、音频视频：（audio、video、canvas ）画布、地理定位、拖拽、 本地存储：localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
10. 新事件:

onresize	当调整窗口大小时触发
ondrag	当拖动元素时触发
onscroll	当滚动元素滚动元素的滚动条时触发
onmousewheel	当转动鼠标滚轮时触发
onerror	当错误发生时触发
onplay	当媒介数据将要开始播放时触发
onpause	当媒介数据暂停时触发