CSSDay11 关于HTML5与CSS3新增内容

CSS初始化

在进行网页开发的时候，会对css做一些全局通用的设计，提高设计效率，比如列表样式，字体样式，清除浮动等

/* 去掉浏览器内外边距 */
*{
    margin:0;padding:0
}
/* 去掉em和i的倾斜特效 */
em,i{
    font-style:normal
}
/* 去掉li的小圆点 */
li{
    list-style:none
}
/* 照顾低版本浏览器图片外包含了链接会有边框的问题 */
img{
    border:0;vertical-align:middle
}
/* 鼠标经过buttom变成“手”的标志 */
button{
    cursor:pointer
}
/* 所有链接设置颜色，去掉修饰 */
a{
    color:#666;text-decoration:none
}
/* 设置鼠标经过链接的颜色 */
a:hover{
    color:#c81623
}
/* 设置按钮和表单元素的字体字号等 */
button,input{
    font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}
​
body{
    /* 抗锯齿性，让文字更清晰 */
    -webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}
​
.hide,.none{display:none}
/* 清除浮动 */
.clearfix:after{
    visibility:hidden;clear:both;display:block;content:".";height:0
}
.clearfix{
    *zoom:1}

HTML5新标签

video设置

再页面中插入视频，主要属性值是用来设置视频的播放，静音以及加载时的图片

表示为

<video src=""></video>

 

属性	值	描述
autoplay	autoplay	设置视频自动播放（谷歌浏览器需要添加muted来解决自动播放的问题）
controls	controls	向用户展示播放控件
width	px	视频播放器宽度
height	px	视频播放器高度
loop	loop	设置循环播放
preload	auto（预加载）none（不预加载）	设置是否预加载视频
src	url	视频url地址
poster	lmgurl	加载等待时的图片
muted	muted	设置静音播放

audio设置

在页面中插入音乐

<audio src=""></video>

属性	值	描述
autoplay	autoplay	设置视频z自动播放播放
controls	controls	显示播放控件
loop	loop	设置循环播放
src	url	音频url地址

新增表单元素及属性值

CSS3新增选择器

属性选择器

选择文档标签的元素的属性来选择该元素

主要有两种方式 一种是选择该元素，另一种是选择元素的值等于该元素的值

 

例子如下

input[value]{具体样式}
input[value="text"]{具体样式}

更多可了解如下

选择符	简介
E[att]	选择具有att属性的元素
E[att="val"]	选择具有att属性且属性值等于val的元素
E[att^="val"]	匹配具有att属性值且值以val开头的元素
E[att$="val"]	匹配具有att属性值且值以val结尾的元素
E[att*="val"]	匹配具有att属性值且值中存在val的元素

结构伪类选择器

主要根据文档结构选择元素，常用于父级元素选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素
E:last-child	匹配父元素中的最后一个子元素
E:nth-child(n)	匹配父元素中的第n个子元素
E:first-of-type	匹配指定类型的第一个元素
E:last-of-type	匹配指定类型的最后一个元素
E:nth-of-type(n)	匹配指定元素中的第n个子元素

常用于隔行变色设计

E:first-nth-child(even)  把所有的偶数匹配出来
E:first-nth-child(odd)   把所有的奇数匹配出来
​

注意child和of-type的不同，前者是匹配所有的子元素，后者是匹配特定的元素

伪类选择器

帮助css创建一个新的标签元素，而不需要HTML标签，从而简化HTML结构，常用于设计遮罩层和侧边栏指示符。

选择符	简介
::before	在元素的前面插入内容
::after	在元素的后面插入内容

CSS过渡

设计一种样式让鼠标经过某一部分时有一种类似渐变的效果

transition：要过度的属性 花费的时间 运动曲线 何时开始；

实例：进度条

 .box {
            width: 200px;
            height: 30px;
            border-radius: 25px;
            border: 1px solid black;
​
        }
​
        .box-1 {
            width: 50%;
            height: 100%;
            background-color: red;
            border-radius: 25px;
            transition: width .5s ease 0s;
​
        }
​
        .box:hover .box-1 {
            width: 100%;
​
        }

 

盒子模型

解决padding会撑大盒子的问题，但可能会引起light-height计算方式需要改变

box-sizing:border-box