如何学些html5 css3,Html5和CSS3学习

Html5和CSS3

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

HTML5的新特性

新增的语义化标签

header:头部标签

nav:导航标签

article:内容标签

section:定义文档某个区域

aside:侧边栏标签

footer:尾部标签

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

新增的多媒体标签

video:视频(支持mp4、ogg和webm,尽量使用mp4格式)

/* 考虑兼容性问题,一般会这么写 */

常用视频标签的使用:

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

循环播放loop="loop"

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

播放控件controls="controls"

audio:音频(支持mp3、wav和ogg,尽量使用mp3)

/* 考虑兼容性问题,一般会这么写 */

新增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:要过渡的属性 花费时间 运动曲线 何时开始;

属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过度,写一个all就可以。

花费时间:单位是秒(必须写单位)比如0.5s

运动曲线:默认是ease(逐渐慢下来)(可以省略)

何时开始:单位是秒(必须写单位)可以设置延迟出发时间 默认是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转换复合写法:

同时使用多个转换,其格式为:transform:translate() rotate() scale()等。

其顺序会影响转换的效果(先旋转会改变坐标轴的方向)。

当我们同事友位移和其他属性的时候,记得要将位移放到最前面。

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子元素开启立体空间

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值