css新增元素属性

肥嘟嘟守卫门

已于 2024-04-08 19:35:17 修改

阅读量867

点赞数 12

文章标签： html 前端

于 2024-04-08 19:32:01 首次发布

本文链接：https://blog.csdn.net/2301_79794941/article/details/137521082

版权

1、h5兼容如何处理 js创建元素的方法引用谷歌提供的html5shiv.js插件处理 2、如何插入一段音频 3、如何插入一段视频 4、请写出至少5个h5新增的布局标签 header、footer、nav、 section、aside 5、请写出10个h5新增的表单元素 url、email、search、tel、number、range、color、date、datetime、datetime-local、month、 week 6、请写出5个h5新增的表单属性 max、min、step、placeholder、autofocus 一、css3简介 1、CSS3 模块选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面 2、CSS3的优点 CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持 CSS2。 3、渐进增强和优雅降级：渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。二、浏览器的私有前缀Autoprefixer插件生成私有前缀这个插件能检测你写出的css属性并且判断他是否是需要添加前缀的属性，如果是就会自动为该属性添加前缀。写好标准属性后按下F1，选择Autoprefixer:run运行三、css3新增选择器 1、属性选择器 css2中属性选择器： element[attr] 指定了属性名称，但没有指定属性值 element[attr = value] 指定了属性名称，并且指定属性值 element[attr~=value] 选择具有指定属性名称，并且属性值是词列表中的一个就可以选中 css3中新增的属性选择器 element[attr^=value] 选择拥有attr属性且属性值为val开头的E元素 element[attr$=value] 选择拥有attr属性且属性值以val结束的E元素 element[attr*=value] 选择拥有attr属性且属性值中包含val的E元素 /* element[attr^=value] */ /* div[class^="box"] { background-color: orange; } */ /* element[attr$=value] */ /* div[class$="box"] { background-color: blueviolet; } */ /* E[attr*="val"] */ div[class*="box"] {2、结构性伪类选择器 element:first-child 选择父元素中的第一个子元素E element:last-child 选择父元素中的最后一个子元素E element:nth-child(n) 选择父元素中的第n个子元素E n可以是数字 n可以是关键词 odd---奇数 even----偶数 n可以放表达式 background-color: yellow; }

- 1
- - 2
  - - 3
    - - 4
      - 5
        
        6
        
        7
        
        8
        
        9
        
        10
        li:nth-child(5) { background-color: blueviolet; } li:nth-child(odd) { background-color: burlywood; } li:nth-child(even) { background-color: cadetblue; } /* 表达式 */ li:nth-child(2n) { background-color: pink; } element:nth-last-child(n) 选择父元素中倒数第n个子元素E n可以是数字、关键词、表达式 :nth-of-type(n) 匹配属于父元素的特定类型的第 n 个子元素 :nth-last-of-type(n) 匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数 n可以是数字、关键词和表达式 3、状态伪类选择器 element:checked 匹配用户界面上处于选中状态的元素 element:enabled 匹配用户界面上处于可用状态的元素 element:disabled 匹配用户界面上处于禁用状态的元素四、css3新增属性 1、border-radius属性圆角属性单边圆角 /* nth-last-child() */ /* li:nth-last-child(2) { background-color: chartreuse; } */ /* li:nth-last-child(odd) { background-color: chocolate; } */ li:nth-last-child(2n) { background-color: darkblue; } .wrap div:nth-of-type(1) { background-color: darkgrey; } .wrap p.ele:nth-last-of-type(2) { background-color: darksalmon; } input[type="radio"]:checked + span { background-color: darksalmon; } input[type="text"]:enabled { background-color: yellow; } input[type="text"]:disabled { background-color: darkseagreen; }圆角复合写法：一个值两个值三个值四个值兼容性：IE9+及标准浏览器是支持的 2、box-shadow 盒子阴影 3、css3背景（1）多背景多个背景之间用逗号隔开多背景写在前面的会先显示（2）背景图大小 background-size 规定背景图片的尺寸 .box { width: 300px; height: 300px; background-color: pink; border-bottom-left-radius: 30px; } border-radius:top-left top-right bottom-right bottom-left; box-shadow: h-shadow v-shadow blur spread color inset; background-image：url(),url(); background-size: px | % | cover | contain;background-size一般设置两个值，第一个值是宽度，第二个值是高度如果只给一个值，另一个值默认为auto（会进行等比例缩放）如果背景图大小设置background-size:100% 100%，指的是宽度和高度跟盒子的大小保持一致 cover 遮盖，背景图片的宽高会被等比例拉伸到足够大，直到装满整个盒子（可能图片部分显示不完整的） contain 包含，背景图片的宽高等比例拉伸到最大尺寸，装满整个盒子（可能出现留白）（3）background-origin background-origin规定背景图片的定位区域，背景图片的左上角的起始位置 border-box 背景图片的左上角起始位置是从边框开始的 padding-box 背景图片的左上角起始位置是从padding区域开始的 content-box 背景图片的左上角起始位置时从content区域开始的（4）background-clip background-clip规定背景的绘制区域 border-box 背景的绘制区域从border开始，border以外的部分会被裁剪 padding-box 背景的绘制区域从padding开始，padding以外的部分会被裁剪 content-box 背景的绘制区域从content开始，content以外的部分会被裁剪（5）渐变线性渐变默认的线性渐变的方向是从上到下的兼容性： IE10+及标准浏览器最新版下支持 background-origin:border-box | padding-box | content-box; background-clip:border-box | padding-box | content-box; background:linear-gradient(direction，color1,color2，......) background: repeating-linear-gradient() .box7 { background: repeating-linear-gradient(red 10%,yellow 20%); } .box8 { background: -webkit-linear-gradient(right,red,yellow); background: -moz-linear-gradient(right,red,yellow); background: -o-linear-gradient(right,red,yellow); background: -ms-linear-gradient(right,red,yellow); /* 标准属性写在后面 */ background: linear-gradient(right,red,yellow); } background: radial-gradient(color1,color2,.....) background: repeating-radial-gradient()

大唐不夜城——皮卡晨

西安---陕西的省会，beautiful！

我们今天中午13：40上课

我们今天中午一点四十上课

高考加油

IE9+以上的浏览器支持H5部分特性 HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：使用javascript新增元素的方法解决使用js创建出来的元素是行级元素，需要转块使用谷歌提供的html5shiv.js插件解决兼容性问题三、HTML5移除的标签以上标签在h5中使用不会报错也不会出现异常，只是不被w3c标准所推荐。四、HTML5新增的多媒体标签 1、音频标签 src属性规定要播放的音频/视频的 URL controls属性规定浏览器应该为音频/视频提供播放控件 loop属性规定当音频/视频结束后将重新开始播放 muted属性规定要播放的音频/视频为静音 H5支持的音频格式浏览器的支持情况： IE9+及标准浏览器下可以支持 2、视频标签 src属性规定要播放的音频/视频的 URL controls属性规定浏览器应该为音频/视频提供播放控件 loop属性规定当音频/视频结束后将重新开始播放 muted属性规定要播放的音频/视频为静音 width属性规定视频播放器的宽度 height属性规定视频播放器的高度 poster属性预览图片 H5支持的视频格式浏览器的支持情况： IE9+及标准浏览器下可以支持 3、source标签为视频/音频定义媒介资源 src属性定义音频/视频的url type属性 MIME的类型五、HTML5中新增的表单元素 1、url 用于包含URL地址的输入域，输入完成浏览器会进行验证是否是url地址 2、email 用于包含e-mail地址的输入域，输入完成浏览器会进行邮箱简单的校验 3、search 用于搜索域

您的浏览器可能需要升级了~ 4 、tel 用于输入电话号码的文本域 5、number 用于包含数值的输入域 6、range 用于包含一定范围内数字值的输入域 7、color 用于选取颜色 8、date 用于从一个日期选择器选择一个日期 9、datetime 用于手动输入一个日期时间 10 、datetime-local 用于选择一个日期和时间 11 、month 用于选择一个月份 12 、week 用于选择周和年 1 3 、 t i m e 用于选择一个时间 1 4 、 d a t a l i s t 定义选项列表六、 H T M L 5 中新增的表单属性 1 、 m a x 、 m i n 、 s t e p 属性 m a x 属性规定输入域所允许的最大值 min 属性规定输入域所允许的最小值 s t e p 属性为输入域规定合法的数字间隔 2 、 p l a c e h o l d e r 属性 pla c e h old e r 属性描述输入域所期待的值，提示信息 3 、 a u t o f o c u s 属性 a u t o f o c u s 属性自动获取焦点 4 、 a u t o c o m p l e t e 属性 a u t o c o m ple t e 属性自动完成 a u t o c o m ple t e = " o n " 打开 a u t o c o m ple t e = " o ff " 关闭 5 、 f o r m 属性 f o r m 属性规定输入域所属的表单 6 、 r e q u i r e d 属性 r e q uir e d 属性规定必须在提交之前填写输入域，必填 < d a t a l i s t i d = " k e m u " > < o p t i o n v a l u e = " w e b " > w e b < / o p t i o n > < o p t i o n v a l u e = " j a v a " > j a v a < / o p t i o n > < o p t i o n v a l u e = " p y t h o n " > p y t h o n < / o p t i o n > < o p t i o n v a l u e = " U I " > U I < / o p t i o n > < / d a t a l i s t > 7、pattern属性 pattern 属性规定用于验证 input 域的模式 8、multiple属性 multiple属性规定输入域中可选择多个值 9、list属性 list属性实现数据列表的下拉效果只能填写0-9的数字：上传文件： web java python UI