HTML5+CSS3-白红宇

CSS3的权重

1.什么是权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式

2.权重的等级划分

!important，加在样式属性值后，权重值为 10000

内联样式，如：style=””，权重值为1000

ID选择器，如：#content，权重值为100

类，伪类和属性选择器，如： content、:hover 权重值为10

标签选择器和伪元素选择器，如：div、p、:before 权重值为1

通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

css新增选择器

E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）

E:first-child：匹配元素类型为E且是父元素的第一个子元素

E:last-child：匹配元素类型为E且是父元素的最后一个子元素

E:only-child：匹配元素类型为E且是父元素中唯一的子元素

E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素

E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）

E:first-of-type：匹配父元素的第一个类型为E的子元素

E:last-of-type：匹配父元素的最后一个类型为E的子元素

E:only-of-type：匹配父元素中唯一子元素是E的子元素

E:empty 选择一个空的元素

E:enabled 可用的表单控件

E:disabled 失效的表单控件

E:checked 选中的checkbox

E:not(s) 不包含某元素

CSS3圆角、阴影、rgba

1.CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：

border-top-left-radius:30px 60px;

同时分别设置四个角：border-radius:30px 60px 120px 150px;

设置四个圆角相同：

border-radius:50%;

2.CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;

分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影

3.rgba（新的颜色值表示法）

盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;

rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color

2、transition-duration 设置过渡的时间，比如：1s 500ms

3、transition-timing-function 设置过渡的运动方式

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲线设置网站：

4、transition-delay 设置动画的延迟

5、transition: property duration timing-function delay 同时设置四个属性

CSS3 transform变换

1、translate(x,y) 设置盒子位移

2、scale(x,y) 设置盒子缩放

3、rotate(deg) 设置盒子旋转

4、skew(x-angle,y-angle) 设置盒子斜切

5、perspective 设置透视距离

6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示

7、translateX、translateY、translateZ 设置三维移动

8、rotateX、rotateY、rotateZ 设置三维旋转

9、scaleX、scaleY、scaleZ 设置三维缩放

10、tranform-origin 设置变形的中心点

11、backface-visibility 设置盒子背面是否可见

HTML5新结构标签

h5新增的主要语义化标签如下：

1、header 页面头部、页眉

2、nav 页面导航

3、article 一篇文章

4、section 文章中的章节

5、aside 侧边栏

6、footer 页面底部、页脚

PC端兼容h5的新标签的方法，在页面中引入以下js文件:

HTML5 新增表单控件

新增类型：网址邮箱日期时间星期数量范围电话颜色搜索

网址:
 邮箱:
 日期:
 时间:
 星期:
 数量: 
范围:
 电话:
 颜色:
 搜索:

新增常用表单控件属性：

1、placeholder 设置文本框默认提示文字

2、autofocus 自动获得焦点

3、autocomplete 联想关键词

HTML5 音频和视频

html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法。

audio标签

支持格式：ogg、wav、mp3

对应属性：

1、autoplay 自动播放

2、controls 显示播放器

3、loop 循环播放

4、preload 预加载

5、muted 静音

举例：

source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。

video标签

支持格式：ogg、mp4、webM

属性：

1、width

2、height

3、Poster

可选第三方播放器：

1、cyberplayer

2、tencentPlayer

3、youkuplayer

移动端页面布局

移动端app分类

1、Native App 原生app手机应用程序

使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C

2、Hybrid App 混合型app手机应用程序

混合使用原生的程序和html5页面开发的手机应用

3、Web App 基于Web的app手机应用程序

完全使用html5页面加前端js框架开发的手机应用

Viewport 视口

视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

背景图强制改变大小，可以使用background新属性

background新属性

background-size:

length：用长度值指定背景图像大小。不允许负值。

percentage：用百分比指定背景图像大小。不允许负值。

auto：背景图像的真实大小。

cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

PC及移动端页面适配方法

设备屏幕有多种不同的分辨率，页面适配方案有如下几种：

1、全适配：流体布局+响应式布局

2、移动端适配：

流体布局+少量响应式

基于rem的布局

弹性盒模型

流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

calc()

可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);

box-sizing

1、content-box 默认的盒子尺寸计算方式

2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

响应式布局

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。