黑马程序员技术交流社区

标题: css3 [打印本页]

作者: 超雪 时间: 2019-4-11 08:47
标题: css3
HTML5：
1.新增的语义化标签  ：header nav  aside footer
2.音频audio标签：语法       属性          浏览器的兼容性             加背景音乐
其基本语法：< audio controls="condtrols ">
                        <source src=有两种格式  要么是MP3格式要么是Ogg格式，因为存在浏览器兼容性的问题，只有用这种方法解决。
   视频video标签和音频标签解决浏览器的兼容性问题是一样的，其语法格式也是相同，视谷歌浏览器把自动播放这个功能禁止播放了，解决谷歌浏览器  是需要静音  加自动播放这样效果才能显示出来。
3. 新增的input表单标签
  限制输入内容是的格式，
type="email"  限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="number"  限制用户输入必须为数字类型
type="tel"  手机号码
type="search"  搜索框
type="date" 限制用户输入必须为日期类型
这些基本常用的标签
input表单属性
   1.required =required表单拥有该属性表示其内容不能为空，必填
   2.placeholder提示文本表单的提示信息，存在默认值将不显示autofocus=autofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
   3.autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
   4.multiple=multiple可以选中多个文件提交一次上传多个文件
4. CSS3
属性选择器
   元素 [属性]
   元素[属性和属性值比如 id="tel"]
   元素[att^="val"] ^代表的是以val开头的属性值
   元素[att$="val"] $代表的是以val结尾的属性值

结构伪类选择器

   类选择器、属性选择器、伪类选择器，权重为 10
结构伪类选择器
:first-child
:last-child
:nth-child(n)
n可以是数字、单词、公式（从0开始计算）
不考虑元素的类型
指定父元素
:first-of-type
:last-of-type
:nth-of-type()
考虑元素的类型
伪元素选择器
::before
::after
content不能省略，可以设置为空
伪元素要注意的：before和after  属于行内元素  在做页面的时候要转化
                        伪元素和标签选择器的权重都为1
5. 2D转换
转换 transform    translate移动    旋转 rotate 缩放 scale
语法：
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
2d移动一般和过度还有定位搭配使用
旋转语法 transform：rotate (...deg)这个度数单位不能省略
转换中心是transfom-origin  默认的是以中心点转换的还有左上角右上角等
一.移动translate 的步骤
1. 给元素添加转换属性  transform

2. 属性值为移动 translate(x,y)  如  transform:translate(50px,50px);

3.rotate 旋转
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转注意deg这个单位度数不能省略。
4.2d缩放 scale
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
他的放大个缩小是以四周发散的一个过程。不像宽高影响其他盒子。
语法：
transform:scale(0.5)  缩小小于1 都是缩小
transform:scale(2) 宽和高都放大了2倍大于1是放大
中间是以逗号隔开的
综合写法：
transform：translate（）位移  rotate（）旋转 scale（）缩放  中间用空格隔开，其顺便不能变。
二.动画 animation
动画可以设置变化的次数甚至是无数次
1.语法步骤：
  /* 我们想页面一打开，一个盒子就从左边走到右边 */
      /* 1. 定义动画 */
      @keyframes move {
         /* 开始状态 */
         0% {
            transform: translateX(0px);
         }
         /* 结束状态 */
         100% {
            transform: translateX(1000px);
         }
      }
      div {
         width: 200px;
         height: 200px;
         background-color: pink;
         /* 2. 调用（使用）动画 */
         /* 动画名称 */
         animation-name: move;
         /* 持续时间 */
         animation-duration: 2s;
      }
2.动画属性
规定动画 @keyframes
规定 @keyframes动画的名称：animation-name
动画持续时间：animation-duration
动画的速度曲线：animation-timing-function
   1. linear：匀速
      2.ease：慢-快-慢  默认值
      3.ease-in：慢-快
   4.ease-out：快-慢
      5.ease-in-out：慢-快-慢。
动画延迟时间也就是何时开始：animation-delay
动画循环方向：animation-direction
默认值normal    反向运动reverse    正反正alternate    反正反alternate-reverse

速度曲线细节

透视 perspective
3D呈现 transfrom-style
l控制子元素是否开启三维立体环境。。
ltransform-style: flat 子元素不开启3d立体空间  默认的
ltransform-style: preserve-3d; 子元素开启立体空间
l代码写给父级，但是影响的是子盒子
l这个属性很重要，后面必用

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2