从头学前端-H5和CSS3提升

html5新特性

新的标签

header 头部标签
nav 导航栏标签
section 某个区域
footer 尾部标签
aside 侧边栏
article 内容标签
以上都相对于是div标签

多媒体标签

audio 音频标签

video 视频标签

muted 静音
controls 播放按钮
autoplay 自动播放
loop 循环
poster 封面

新的表单和表单属性

input表单：

type属性值新增选项：email,url,date,time,month.week,time,search,tel,color,number等

表单属性：

required，placeholder、autofocus、autocomplate、multiple;

CSS3新特性

新增选择器

属性选择器：（权重是10 和class类选择器一样）

利用属性选择器可以不用借助于类和id选择器 E[attr]
根据属性=值选择元素 E[attr=val]
选择属性值结尾、包含或开头的某些元素 E[attr$=‘val’] E[attr*=‘val’] E[attr^=‘val’]

结构伪类选择器

根据文档结构进行选择，常用于根据父级选择器选择子元素
E:first-child last-child 第一个和最后一个
nth-child(n) nth-child(2n) n可以是数字，关键字(even或odd)或公式
E:first-of-type last-of-type nth-of-type(n)
nth-clild会把所有的盒子都排列序号，所以只使用序号会不准确，而nth-of-type不会，只会把指定类型排列序号；

伪元素选择器

伪元素选择器可以利用css创建标签元素,属于行内元素
伪元素选择符主要有 ::before和::after 必须包含有content属性
伪元素选择器的权重和标签一样都是1

CSS3盒子模型：

通过box-sizing指定盒模型：两个值：content-box和border-box
content-box是默认值， border-box盒子的大小为width

滤镜filter，计算函数calc(),

img{ filter:blur(5px) }  //图片模糊
div { width: calc(100% - 50px); }

CSS3过渡 transition

transtion: 要过渡的属性花费时间运动曲线何时开始
最后两个属性可以不写；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3过渡</title>
    <style>

        div{
            width: 200px;
            height: 200px;
            background-color: palegoldenrod;
            transition: width 2s,height 2s;
        }

        div:hover{
            width: 100%;
            height: 400px;
        }

    </style>
</head>
<body>
    
    <div></div>

</body>
</html>

从头学前端-H5和CSS3提升

html5新特性

CSS3新特性

猜你喜欢