HTML5 新属性的讲解
1.选择器:
标签选择器:
class选择器:
id选择器:
后代选择器:div li div下所有li
子代选择器:div>li div的所有子一代 li 元素
交集选择器:div.class 这个元素式div且类名叫class
并级选择器:.class,.ad 选择两个元素一个类叫class 一个类叫ad
通配符选择器:
伪类选择器:
结构选择器:div:nth-of-type(2) 选择第二个div
属性选择器:div[name='zhang'] 选择div标签 name属性 属性值为zhang的
兄弟选择器:div~p 只选div后面的兄弟p
相邻选择器:div+p div相邻的p元素
2.文本属性
text-align 文本对齐
text-decoration 文本修饰
text-indent 文本缩进
text-shadow 文本阴影
text-overflow 文本溢出 怎么显示内容;
text-shadow的属性值;
第一个:x轴偏移距离 可以为负 向左偏;
第二个:y轴偏移距离 可以为负 向上偏;
第三个:r 阴影范围;
第四个:阴影颜色;
案例:
text-shadow:10px 10px 5px #000;
text-overflow:属性值;
clip 修剪文本;
ellipsis 文本溢出以省略号的形式出现;
text-overflow:ellipsis 超出以省略号的形式表现出来 但这个属性必须配合 overflow:hidden white-space:nowrap 一起使用 三个都不能少;
text-justify:文本对齐:一般是两端对齐
text-wrap:规定文本的换行规则:(仅作为了解,所有的主流浏览器都不支持);
word-wrap:break-word;
word-break:break-word; 单词是否拆分,拆分单词;
浏览器对英文单词,如果单词之间没有空格,浏览器就会默认这是一个单词,即使超出了,默认不换行,加了这个属性中的任何一个,一旦单词超了,即使一个单词也要换行;
box-shadow 给元素周边添加阴影;
与text-shadow的用法相同;
渐变:
浏览器的区别;
移动端安卓内置chrome浏览器,不需要考虑兼容性,但是在pc上考虑 css3的新增属性 ie,火狐等不兼容,因为各个浏览器内核不一样,针对这些内核,css3给元素属性前面加上相对应的前缀;
比如:
ie -ms-text-shadow;
chrome -webkit-text-shadow;
firefox -moz-text-shadow;
opera -o-text-shadow;
HTML5 新属性的讲解的更多相关文章
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- (二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
- 【HTML】html5新属性-datalist
摘要: 为实现输入域自动填充的效果 方法一: jquery-ui的autocomplete方法, 不是jquery 自带的方法. 方法二: 采用html5新特性,datalist,例子如下:坏处很明显 ...
- HTML5新属性-----拖放
最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
- HTML5新属性
1.contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时,元素将从父元素继承. 所有主流浏览器都支持 contentedita ...
- html5 新属性
<p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> <input id="email&qu ...
- html5新属性contenteditable 对于那些不可编辑的标签,现在都可以编辑了
contenteditable = true 表示该html标签的内容可以编辑,对于那些不可编辑的标签,现在都可以编辑了.
- sad 关于一些html5新属性还需要用https才能支持
像我昨天在搞一个录音的小东西 在本地正常录音正常播放 但是放到线上环境http环境上就出现了如上的错误 功能都不能正常使用 然后就改成https线上环境 然后就正常了 如上 大家有什么赐教的欢迎留言 ...
- HTML5新的标签和属性
<article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...
随机推荐
- markDown 生成带侧边栏的目录
1.首先安装马克飞象 2.第二步安装 npm install -g i5ting_toc 3.进入 md 文件所在的文件夹后, 输入命令: i5ting_toc -f sample.md -o s ...
- 键盘按键KeyCode大全
- keep-alive 被 beforeRouteEnter 骗了
大家中秋假期快乐,假期分享一些实战文章给大家,原创不易,欢迎转发,一起学习 现在大家基本都在单页应用里面使用了 keep-alive 来缓存不活动的组件实例,而不是销毁它们. 如果你还没有使用,可以看 ...
- 问题 M: 最亲密的x个人
问题 M: 最亲密的x个人 时间限制: 1 Sec 内存限制: 128 MB提交: 412 解决: 38[提交] [状态] [命题人:jsu_admin] 题目描述 有一天,地球受到了降维打击,从 ...
- BCR-ABL融合基因及检测
费城染色体 费城染色体(Philadelphia chromosome, Ph (or Ph') chromosome),或称费城染色体易位(Philadelphia translocation),是 ...
- HashMap对象转换为JavaBean对象
问题: 在日常代码中,使用 spring包中的 BeanUtils.copyProperties(source,target),可以将A对象的属性复制到B对象中,但是有个问题 无法将HashMap中的 ...
- Python之路-面向对象&继承和多态&类属性和实例属性&类方法和静态方法
一.面向对象 编程方式 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强…” 什么是面 ...
- 行人重识别(ReID) ——数据集描述 DukeMTMC-reID
数据集简介 DukeMTMC 数据集是一个大规模标记的多目标多摄像机行人跟踪数据集.它提供了一个由 8 个同步摄像机记录的新型大型高清视频数据集,具有 7,000 多个单摄像机轨迹和超过 2,700 ...
- C#/.NET VS2017+ EF+SQLite.CodeFirst——真正实现CodeFirst
本文所介绍的是真正的EF+CodeFirst,不需要提前建表,由代码自动生成! 进行前需要准备的: 1.下载Sqlite Experthttp://www.sqliteexpert.com/downl ...
- sqli(7)
前言 第7关 导出文件GET字符型注入 步骤OK,但是就是不能写入文件,不知是文件夹的问题还是自己操作的问题.但是确实,没有导入成功. 1. 查看闭合,看源码,发现闭合是((‘ ’)): 2.查看所在 ...