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 ...
随机推荐
- logstash异常
logstash异常 1 2 3 Unrecognized VM option 'UseParNewGC' Error: Could not create the Java Virtual Machi ...
- SpringBoot使用RestTemplate 摘要认证
SpringBoot使用RestTempate SpringBoot使用RestTemplate摘要认证 SpringBoot使用RestTemplate基础认证 SpringBoot使用RestTe ...
- jquery点击切换在点击切换
<div style=" position: absolute; top: 6rem; right: 4rem;" id="hides" > < ...
- 基于Filter实现Gzip数据压缩
在web开发中,当服务器端向客户端返回的数据量比较大时,我们可以通过Gzip对数据进行压缩处理 注意:如果小数据量进行压缩,压缩后的数据可能比原始数据还大:所以response返回数据量比较小时不推荐 ...
- Web API 入门一
之前我也了解过Web API 这部分,但是没有系统学习,更没有相关记录,故现在,写些博客记录入门学习过程.首先,关于API,只要学习编程的都应该知道,也都用过,API(应用程序编程接口)是一些预先定义 ...
- VS2017运行emwin模拟机不能运行的解决部分
宇宙第一开发工具的功能太强大了,今天我们来介绍怎么解决VS2017的C++功能运行emwin模拟机不能运行的解决部分 编译软件:Visual Studio 2017: emwin模拟机版本:S ...
- HDU 6468 /// DFS
题目大意: 把 1~15 的数字典序排序后为 1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9 此时给定 n k, 求1~n的数组字典序排序后 第k个 ...
- 实现类似add(1)(2)(3)结果为6的效果
前两天看到一个问题说怎样实现add方法实现add(1)(2)(3)结果为6,于是开始引发了我的思考. 1.想要实现add()()这样调用方式,add()方法的返回值务必是一个函数 function a ...
- 使用IP在局域网内访问System.Net.HttpListenerException:“拒绝访问。”
记录一下,自己写的程序之前运行没有遇到这个问题,突然遇到这个问题,找了一圈没有找到有效的解决方案,到最后发现,以管理员身份运行程序即可.简单记录一下. 还有就是 .UseUrls("http ...
- AOP记录日志
1.自定义注解 @Target(ElementType.METHOD) //注解放置的目标位置,METHOD是可注解在方法级别上 @Retention(RetentionPolicy.RUNTIME) ...