前端笔记——HTML5&CSS3

一、CSS权重

  • 概念和作用:

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

  • 权重等级

1、!important,加在样式属性值后,权重值为 10000
2、内联样式,如:style=””,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0;


二、CSS3新增选择器

1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素;
2、E:first-child:匹配元素类型为E且是父元素的第一个子元素
3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素

  • demo

......

1

2
3
4
5
  • 属性选择器

1、E[attr] 含有attr属性的元素;
2、E[attr='ok'] 含有attr属性的元素且它的值为“ok”
3、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”

  • demo

......
这是一个div元素

三、相关属性

①CSS3——圆角

设置左上角的圆角:border-top-left-radius:30px 60px;

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

设置四个圆角相同:border-radius:50%;

②CSS3—— transition动画

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

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

3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)

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 设置盒子背面是否可见

④CSS3—— animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

四、HTML5新增标签(基本不用)

  • 新增语义标签

1、

页面头部、页眉
2、
  • 音频视频

1、

五、HTML5 新增表单控件

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




















  • 新增常用表单控件属性:
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

你可能感兴趣的:(前端笔记——HTML5&CSS3)