菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 20221022-解婵css3 [打印本页]

作者: 美什么鱼 时间: 2022-10-25 19:37
标题: 20221022-解婵css3
H5C3
html5部分
html5的新特性
主要增加了一些新的标签，新的表单和新的表单属性等，这些特性都有兼容性问题，基本上IE9+以上的浏览器才能支持，如果不考虑兼容性的话，可以大量使用新标签
常用的H5标签
：<header></header>
：<nav></nav>
：<article></article>
：<aside></aside>
：<footer></footer>
HTML5标签的优缺点
优点：便于搜索引擎来解析
缺点：会有兼容问题
HTML5新增的input的type属性的属性值
属性值说明
email 限制用户输入必须为Email类型
URL 限制用户输入必须为URL类型
date 限制用户输入必须为date类型
time 限制用户输入必须为time类型
month 限制用户输入必须为month类型
week 限制用户输入必须为week类型
number 限制用户输入必须为number类型
search 搜索框
color 生成颜色选择表单
tel 手机号码
注意：属性值为Tel是，声明的input标签为电话输入，因为世界上电话号码都不尽相同，所以不能做出明确的显示，需要JS和正则表达式来进行限制
HTML5新增属性
属性属性值说明
required required 表单拥有该属性表示不能为空，必填项
placeholder 提示文本填写表单的提示信息，如果有默认 value 值的话则不会显示提示信息
autofocus autofocus 自动聚焦，页面首次加载时聚焦到该表单元素
autocomplete on/off 当用户提交搜索内容时，浏览器记录用户提交过的内容，默认是ON，如果要关闭的话将值设为off，同时要添加name属性，而且要提交成功
multiple multiple 可以进行多选文件
HTML5新增的多媒体标签
<Audio>标签，音频标签
当前常用的三种浏览器
浏览器 MP3 Wav Ogg
IE Y N N
Chrome Y Y Y
firfox Y Y Y
safari Y Y N
opera Y Y Y

常用的属性和属性值
controls：controls；向用户展示播放控件
autoplay：autoplay；自动播放
loop：loop；当音频结束时重新播放
src：需要播放的音频URL地址
例：<audio src="" controls="controls" loop="loop" autoplay="autoplay"></audio>

<video>标签，视频标签
当前常用的三种浏览器
浏览器 MP3 Wav Ogg
IE Y N N
Chrome Y Y Y
firfox Y Y Y
safari Y N N
opera Y Y Y

常用属性和属性值
属性属性值说明
autoplay autoplay 视频自动播放（谷歌要添加muted属性才能生效）
controls controls 向用户展示播放控件
width 像素值设置播放器的宽度
height 像素值设置播放器的高度
loop loop 循环播放视频
preload auto/none 预加载视频，auto：预加载，none：不进行加载操作，如果有auto属性，那么该属性会被忽略
src URL 视频URL地址
poster 图片地址加载视频时等待的画面
muted muted 静音播放
例：video多格式轮询
<video controls="controls" width="1000px">
<sourc src="" type="video/MP4">
</video>
CSS3新增属性
CSS怪异盒模型
css3中可以通过box-sizing来指定盒模型，他有两个值，分别是content-box、border-box。
box-sizing：content-box；盒子大小是width+padding+border（默认值）
box-sizing：border-box；盒子的大小为width
注意点：
使用box-sizing：border-box；时，padding+border都不要超过盒子本身的宽度

CSS3新增选择器
属性选择器
概念：可以根据元素的特性来选择，这样就不用借助类或者id选择器
总结表格
选择符说明
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个子元素E
E:nth-child(n) 匹配父元素中的第N个子元素E
E:first-of-type 匹配指定类型E的第一个元素
E:last-of-type 匹配指定类型E的最后一个元素
E:nth-of-type 匹配指定类型E的第N个元素
结构伪类选择器
概念：主要是根据文档的结构来选择元素，通常根据父元素来进行选择里面子元素的情况
nth-child(0)：
n是数字的情况（代表从0开始不断递增）
n是关键字的情况
n是公式的情况
nth-child和nth-of-type的区别
nth-child对父元素里面所有的子元素进行排序（序号是固定的），先找到第N个孩子，然后再看是否和相应元素匹配
nth-of-type对父元素里面的所有指定的元素进行排序选择，先去进行相应元素的匹配，再排序区选择第n各元素

伪元素选择器
概念：伪元素选择器可以帮助我们利用css创建标签元素，为不需要新增html标签，从而简化了html的结构
注意：before和after创建的元素是行内元素
创建的元素我们在html的结构树中找不到，所以叫做伪元素
before和after必须有content属性
before是在父元素内容的前面创建元素，after是在父元素内容的后面添加元素
伪元素选择器he元素选择器的权重一样，都是1
CSS过渡
概念：可以再不使用flash或者js的前提下可以实现从一种样式转换撑另一种样式的效果（IE9以下不支持）
语法：
transition：要过渡的属性，花费的时间，运动曲线，何时开始
过渡属性：
想要变化的css属性，可以宽度、高度、背景颜色、内外边距等等，如果想要变化所有属性那么直接写all就可以了
花费时间：
单位是秒，必写单位：例：0.5s
运动曲线：
默认的值是ease（可忽略）
linear：匀速
ease：逐渐变慢
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
何时开始（可以忽略）
单位是秒（必写单位），可以设置延迟出发的时间，默认是0
CSS3的2D转换
属性：transform
对盒子的X轴和Y轴进行位移
transform：translate(X,Y);
对盒子单独进行X轴的位移
transform：translateX(n);
对盒子单独进行Y轴的位移
transform：translateY(n);
特点：
translate不会影响其他元素的位置（和相对定位类似）
如果translate内的值写为百分比，就代表移动自己本身的宽高的百分比
translate对行内元素没有效果
利用translate进行盒子的水平居中
2D转换角度rotate（度数）
使用该属性值可以对元素进行旋转设置；transform：rotate(度数)
例如：transform：rotate(180deg)；代表元素顺时针旋转180°，当旋转角度为负值时，则是逆时针旋转
scale（2D缩放）
语法：transform：scale（X,Y）;里面的x代表x轴的缩放倍数，Y代表y轴的缩放倍数
使用方法：
transform:scale(1,1);代表缩放本身的1倍，也就是没有变化
transform:scale(2,3);代表X轴放大本身的2倍，Y轴放大本身的3倍
transform:scale(4);代表宽高都放大本身的4倍
transform:scale(0.5,0.5);代表宽高缩小本身的0.5倍
scale缩放和width/height设置盒子大小的区别
属性：transform-origin
语法：transform-origin：X,Y;
1、使用方位名词来设置中心点
2、利用像素值来设置元素的中心点
注意：当单位为具体的像素值时，距离的相对起始位置在元素左上角
CSS3动画制作
动画序列
1、0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
2、在@keyframes中来规定css的样式，keyframes叫做关键帧
3、可以用百分比来规定变化发生的时间，或者用关键字from和to来规定，等同于0%~100%
动画的使用步骤：
1、定义动画
2、调用动画
animation-name:move;
3、定义持续时间
animation-duration:3s;
常用属性：
@keyframes：定义动画
animation：所有动画的简写属性，但是animation-play-state属性不包含在内
animation-name：调用@keyframes的动画名称（必须值）
animation-duration：规定完成一个周期的动画所花费的时间，默认是0（必须值），单位可以是秒也可以是毫秒
animation-timing-function：规定动画速度曲线，默认是ease
animation-delay：规定动画何时开始默认是0
animation-interation-count：规定动画的次数，默认是1，如果是无线循环可以设置为infinite
animation-direction：规定动画是否在下一个周期进行逆向播放，默认是“normal”，如果是你想播放则设置为alternate
animation-play-state：规定动画是否在运行或者停止，默认是running，暂停是paused
animation-fill-mode：规定动画结束后的状态，保持结束后的状态forwards，如果要回到起始位置就是backwards

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)