HTML5和CSS3的一些小总结

最新推荐文章于 2021-09-15 21:37:11 发布

哔哔嘎嘎

最新推荐文章于 2021-09-15 21:37:11 发布

阅读量333

点赞数

分类专栏： html5和css3 文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_44759795/article/details/105997417

版权

html5和css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html5

h5是h4的升级，它主要用于移动端应用比较多，新的标签语义化更加明确。footer标签为div标签。

声明文档：<!DOCTYPE html> 这是h5的标志
兼容性：支持所有现代浏览器，旧的不支持。在处理兼容性时，使用静态资源库csshack。
csshack：
谷歌：-webkit-border-radium
火狐：-moz-border-radium
IE：-ms-border-radium

html5标签

canvas——绘图标签
通过JS在这个上面进行绘图，他结合cocos-2d引擎可以用来制作网页游戏，qie它是基于JS的绘图API来制作。

新的多媒体标签

video——视频标签

<video src="./mp4/mov-666.mp4" autoplay></video>

其中src是视频路径，autoplay是指自动播放，loop是循环播放，controls属性是视频控制器。

audio——音频文件

<audio src="" autoplay controls loop></audio>

source——视/音频资源文件

<vedio>
	<source src="">
</vedio>

embed——嵌入内容，如插件

<embed src="">

新表单元素

datalist——列表
一般和input连用。其中datalist必须用ID选择器而不能用class选择器。

<input type="text" list="data"/>
<datalist id="data">
	<option>1</option>
	<option>2</option>
</datalist>

output——输出计算值
结合JS才有用。

新的语义和结构

<!--定义相对页面独立的内容和区域。类似于div标签-->
	<artical></artical>
<!--定义侧边栏，类似于div标签-->
	<aside></aside>
<!--类似于span标签-->
	<bdi></bdi>
<!--显示详细内容，只兼容谷歌-->
	<details>
		<summar>2020-05-02 日志</summar>
		<p>abc</p>
	</details>
<!--定义页脚-->
	<footer></footer>
<!--定义头部-->
	<header></header>
<!--文本突出显示，默认淡黄色-->
	<mark></mark>
<!--定义导航-->
	<nav></nav>
<!--定义了一个0-100，进度为50%的进度条-->
	<meter value="50" min="0" max="100"></meter>
	<progress value="50" min="0" max="100"></progress>
<!--定义内容区域-->
	<section></section>
<!--定义日期-->
	<time></time>
<!--自定义列表-->
	<dl>
		<dt></dt>
		<dd></dd>
	</dl>

CSS3

样式：

border-radius——圆角
四个值分别代表四个角左上，右上，右下，左下；
两个值：第一个代表左上右下，第二个右上左下；
box-shadow——边框阴影

box-shadow：0      0       10px       red;
			右	   下	  过渡宽度	  阴影颜色
			前两个值为0即为全边框阴影。
多色过渡：
box-shadow：0 0 30px red，1 2 50px blue；

border-image_边框图像
border-image：url（“”）10px round；
background-image背景图片
background:linear-gradient(90deg,red #fff,blue);或(to bottom right,red,blue);或(90deg,right 10%,yellow 30%);这是线性渐变，径向渐变用radial-gradient,设置形状在括号里加如circle。

文本样式
text-shadow 文本阴影
text-overflow 文本溢出
文本溢出解决办法：

单行溢出：
overflow：hidden；超出隐藏
text-overflow：ellipsis；超出省略
white-space：nowrap；文字不折行
多行溢出：
display：-webkit-box；
overflow：hidden；
text-overflow：ellipsis；
-webkit-box-orient：vertical；
-webkit-line-clamp：3；三行。

CSS3字体文件引入
全局引入：
@font-face{
font-family：字体名;
src:url("");
}

CSS3动画

2D转换（设置2D样式）

代码	含义
translate	平移默认轴心为x轴
rotate	旋转默认轴心为z轴
scale	伸缩
skew	变形

<style>
	.box{
		transform:translatex(20px);//沿x轴正方向平移20px；
		transform:rotatex(45deg);//绕x轴旋转45度
		transform:scale(1,2);//宽变为原来的一倍，高变为原来的两倍。若为一个值则宽高改变的量相同。
		transform:skew(45deg,30deg);//x轴水平倾斜45度，y垂直30度。
	}
</style>

设置旋转中心：
transform：rotate(45deg);
transform-origin:100% 100%;
上述操作之后旋转中心转移到了右下角。
注意：旋转和平移具有先后顺序，县旋转会改变平移方向，后旋转不改变。

3D
transform-style：preserve-3d；就能把模型转化为立体的。transform：rotatex(45deg) rotatey(45deg);通过旋转即可看到立体模型。
perspective是设置从何角度查看图形的，设置其透视效果。

过渡动画
过渡的是css样式属性。过渡一定要有过渡样式的设置。
transition-delay：过渡延迟；
transition-duration：过渡时间；
transition-property：过渡属性；
transition-timing-function：过渡方式。
过渡方式：
ease 低速开始中间加快，后逐渐变慢
ease-in 低速开始
ease-in-out 低速开始低速结束
ease-out 低速结束
linear 匀速过渡
复合的过渡：transition：border-radius 1s(延迟时间) .5s(持续时长) linear，box-shadow .5s linear;多重动画过渡中间用逗号隔开。

动画
1、定义动画播放器

<!--法1-->
@keyframes 动画名{
	from{transform:translatex(0px) rotatez(0deg);}
	to{transform:translatex(500px) rotatez(360deg);}
}
<!--法2-->
animation:动画名 3
@keyframes 动画名{
	0%{top:0;}
	20%{top:30px;}
	100%{top:40px;}
}

2、加入动画

复合格式：animation:动画名 4s linear;
延迟时间：animation-delay:2s;
动画持续时间：animation-duration:4s;
动画方式：animation-timing-function:linear;
动画名称：animation-name:name;
动画播完位置：animation-fill-mode:forwards(停留)backwards(返回)none；
播放次数：animation-iteration-count:3/infinite(循环播放)；
播放方向：animation-direction:alternate(奇数次正向播放，偶次反向)reverse(反向播放);
动画状态：animation-play-state:running/paused;

在制作一个盒子滚动时，from处和to处分别添加一个颜色即可实现颜色的缓慢过渡：

   <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            text-align: center;
            line-height: 200px;
            /*加入动画*/
            animation:boxanimate 3s ease-in infinite alternate;
        }
        .box:hover{animation-play-state: paused;}
        @keyframes boxanimate {
            from{
                transform:translatex(0px) rotatez(0deg);
                background-color: rgba(125, 210, 241, 0.67);
            }
            to{
               transform:translatex(800px) rotatez(360deg);
                background-color: rgba(241, 106, 223, 0.64);
            }
        }
    </style>

移动端响应
<meta name="viewport" content="width=device-width initial-scale=1.0">

css3弹性盒子
flex:1;均分，后面的数字未分配比例。
diplay:flex;flex-direction:column;
justify-content：center(水平居中)；space-between(平分中间间隙)
align-self：center(垂直居中)；

CSS多媒体查询
根据不同的设备显示不同的box，若不加限制条件则所有屏幕共有样式。

代码	功能
all	所有设备
screen	屏幕设置：电脑，ipad，手机
print	打印设备
not print	不含打印设备

写大小限制时注意min-width要从小到大写，max-width要从大到小写。

@media screen and(min-width:320px;){
		.box{width:310px;}
}
@media screen and(min-width:768px;){
		.box{width:758px;}
}
<!--还可以写成区间形式-->
@media screen and(min-width:320px;)and(max-width:768px;){
		.box{width:100%;}
}
<!--一般使用外部css文件-->
<link rel="style-sheet" href="" media="screen"and(min-width:320px)/>

css3选择器
属性选择器

<style>
	input [type]{};选择input
	input [type=text]{}; 选择类型是text的input
	input [type=text][name=user]{};选择类型是text，且name为user的所有input元素
	input[type $=t]{};选择以t结尾的，^=t 以t为开头的 *=t 包含t的
</style>
<input type="text" name="user"/>