阅读模式:

Html5和CSS3学习

阅读量:11  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:Html5和CSS3广义的H5指的是HTML5本身+CSS3+JavaScriptHTML5的新特性新增的语义化标签header:头部标签nav:导航标签article:内容标签section:定义文档某个区域aside:侧边栏标签foot......

Html5和CSS3学习

Html5和CSS3

广义的H5指的是HTML5本身+CSS3+JavaScript

HTML5的新特性

新增的语义化标签

  • header:头部标签
  • nav:导航标签
  • article:内容标签
  • section:定义文档某个区域
  • aside:侧边栏标签
  • footer:尾部标签

效果类似于div,这些标签主要是针对于搜索引擎的,这些新标签页面中可以使用多次,在IE9中,需要把这些元素转化为块级元素,其次我们的移动端更喜欢使用这些标签。

新增的多媒体标签

  • video:视频(支持mp4、ogg和webm,尽量使用mp4格式)
<video src="文件地址" controls="controls">
	/* 考虑兼容性问题,一般会这么写 */
	<source src="move.ogg" type="video/ogg">
	<source src="move.mp4" type="video/mp4">
</video>

常用视频标签的使用:

自动播放autoplay="autoplay" muted="muted"(静音播放)

循环播放loop="loop"

加载等待画面post="图片地址"

播放控件controls="controls"

  • audio:音频(支持mp3、wav和ogg,尽量使用mp3)
<audio src="文件地址" controls="controls">
	/* 考虑兼容性问题,一般会这么写 */
	<source src="happy.ogg" type="audio/ogg">
	<source src="happy.mp3" type="audio/mpeg">
</audio>

新增input类型

input标签中添加type="类型",设置input类型。

新增表单属性

required="required"(表示内容不能为空)

placeholder="提示文本的内容"(表单的提示信息)

/* 修改颜色 */
input::placeholder{
  color:pink;
}

multiple="multiple"(可以多选文件提交)

autofocus="autofocus"(自动聚焦)

autocomplete="off/on"(记录历史,默认是on)

CSS3的新特性

CSS3新增选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。权重为0,0,1,0,注意中括号中的才是属性选择器,下面例子重视标签选择器+属性选择器。

/* 标签[包含的属性] */
input[value] {
	color: pink;
}
/* 还可以选取包含特定属性以及特定值的标签 */
input[value="请输入"] {
	color: pink;
}
/* 还可以使用通配符,^表示以后面的特定值开头的标签 */
input[value^="请"] {
	color: pink;
}
/* 还可以使用通配符,$表示以后面的特定值结尾的标签 */
input[value$="入"] {
	color: pink;
}
/* 还可以使用通配符,*表示存在后面的特定值的标签 */
input[value*="入"] {
	color: pink;
}

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素。权重为0,0,1,0。

/* ul中的第一个孩子*/
ul :first-child{
    background-color: pink;
}
/* ul中的第一个孩子,这个孩子必须是li*/
ul li:first-child{
    background-color: pink;
}
/* ul中的最后一个孩子,这个孩子必须是li */
ul li:last-child{
    background-color: pink;
}
/* ul中的第二个孩子,这个孩子必须是li,nth-child中可以是数字、公式和关键字,其中关键子可以为even(偶数)和odd(奇数) */
ul li:nth-child(2){
    background-color: pink;
}
/* 其中如果为公式,可以填写包含n的公式,这里n会从0开始赋值,第0个和超过元素个数的会被忽略,2n就是偶数,2n+1就是奇数 */
ul li:nth-child(n){
    background-color: pink;
}

fitst-of-type和first-child区别:前者是先找出所有指定的标签,再从中找到指定序号的标签。后者是先找到指定序号的标签,再判断标签的类型是否相同。

伪元素选择器(重点)

可以利用CSS来创建标签元素,而不需要HTML标签,从而简化HTML结构。

::before在元素内部的前面插入内容

::after在元素后面的前面插入内容

  • 伪元素为行内元素
  • 文档树中无法找到
  • 语法:element::before{}
  • before和after必须有content属性(不能不写,content中输入显示内容)
  • before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
  • 权重为0,0,0,1

盒子模型

CSS3可以通过box-sizing来指定盒模型,有两个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了变化。

box-sizing:content-box盒子的大小为width+padding+border(默认的形式)

box-sizing:border-box盒子最终的大小为width

CSS3滤镜filter

filter:blur(5px)(blur是一个模糊函数,数值越大,越模糊)

CSS3中calc函数

calc()括号中能够添加一些计算

/* 子盒子比父盒子小30px */
.son {
    width: calc(100%-30px);
    height: 100px;
    background-color: pink;
}

CSS3过渡

transition:要过渡的属性 花费时间 运动曲线 何时开始;

  1. 属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过度,写一个all就可以。
  2. 花费时间:单位是秒(必须写单位)比如0.5s
  3. 运动曲线:默认是ease(逐渐慢下来)(可以省略)
  4. 何时开始:单位是秒(必须写单位)可以设置延迟出发时间 默认是0s(可以省略)
div {
    width: 200px;
    height: 100px;
    background-color: pink;
    /* 谁做过渡给谁加,过渡效果一般和hover一起使用,如果要写多个属性用逗号分割,如果全部变化,则使用all */
    transition: width 0.5s ease 0s;
}
div:hover{
    width: 400px;
}

CSS3中的2D转换

transform转换

  • 移动:translate
  • 旋转:rotate
  • 缩放:scale
/* 移动 */
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 水平和垂直都移动100px,也可以分开来写 */
    /* transform: translateX(100px);
    transform: translateY(100px); */
    transform: translate(100px,100px);
  	/* 使用百分号,则是根据盒子自身的高度和宽度来对比的 */
		/*transform: translate(50%,50%);*/
}

translate不会影响其他样式的位置,对行内标签没有效果

/* 旋转 */
div {
    width: 100;
    height: 100px;
    background-color: pink;
    /* 正数为顺时针转,负数为逆时针转 */
    transform: rotate(45deg);
}

设置旋转的中心点

div {
    width: 100;
    height: 100px;
    background-color: pink;
    /* 默认是50% 50% ,这里设置为按左下角旋转 值可以是像素、百分比和方位名词*/
    transform-origin: left bottom;
    /* 正数为顺时针转,负数为逆时针转 */
    transform: rotate(45deg);
}

缩放

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 1.里面直接写不带单位的数字,是倍数的意思,缩放相同倍数的时候只需要写一个值*/
    transform: scale(2,2);
  	/* 设置盒子缩放中心点 */
  	transform-origin:left bottom;
} 

使用scale缩放的优势:不会影响其他盒子,而且可以设置缩放的中心点。

2D转换复合写法:

  1. 同时使用多个转换,其格式为:transform:translate() rotate() scale()等。
  2. 其顺序会影响转换的效果(先旋转会改变坐标轴的方向)。
  3. 当我们同事友位移和其他属性的时候,记得要将位移放到最前面。

CSS3动画

动画(animation)相比过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

/* 定义动画 */
@keyframes move {
    /* 0%(from)表示动画的开始 */
    0% {
        transform: translateX(0px);
    }
    /* 100%(to)表示动画的结束 */
    100% {
        transform: translateX(1000px);
    }
}
/* 元素使用动画 */
div {
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 100px auto;
    /* 调用动画(动画的名称) */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 5s;
}
@keyframes move {
    /* 多步动画,百分比是用来划分时间的 */
    0% {
        transform: translate(0px,0px);
    }
    25% {
        transform: translate(1000px,0px);
    }
    50% {
        transform: translate(1000px,500px);
    }
    75% {
        transform: translate(0px,500px);
    }
    100% {
        transform: translate(0px,0px);
    }
}

其他的属性

  • animation-timing-function:动画的曲线(其中steps()是让动画分几步完成,可以用来做gif图)
  • animation-delay:何时执行
  • animation-iteration-count:动画播放次数(infinite为无限循环,默认是1)
  • animation-direction:是否在下一周期逆向播放
  • animation-fill-mode:规定动画结束状态(forwards保持结束状态,backwards回到起始状态)
  • animation-play-state:设置动画播放状态

动画复合写法:

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;

3D转换

x轴:向右是正的

y轴:向下是正的

z轴:面向人的方向是正的

3D移动translate3d

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* x,y,z是不能够省略的,不需要就写0 */
    transform: translate3d(180px,180px,100px);
}

透视perspective

如果想要在网页中产生3D效果图,则需要使用透视效果,透视也称为视距(人的眼睛距离屏幕的距离)视距越大成像越小,视距越小成像越大。

透视写在需要观察的元素的父元素上面。

想要体现出3D效果,首先需要固定透视距离(视距),然后物体在z轴移动的时候大小就会变化。

3D旋转rotate3d

transform:rotateX(45deg):沿着x轴正方向旋转45度

transform:rotateY(45deg):沿着y轴正方向旋转45度

transform:rotateZ(45deg):沿着z轴正方向旋转45度

Transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度

3D呈现transfrom-style

子盒子3D旋转,父亲盒子3D旋转,会使得子盒子变成2D的旋转(不开启3D空间)。

在父元素中添加,影响子盒子。

transform-style:flat子元素不开启3d立体空间

Transform-style:preserve-3d子元素开启立体空间

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: