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 ...
随机推荐
- hacker101----XSS Review
所有你见过XSS行动在这一点上,但我们来回顾一下今天我们要讨论的XSS类型: 反射型XSS -- 来自用户的输入将直接返回到浏览器,从而允许注入任意内容 [浏览器输入,马上到服务器上,再反射回来直 ...
- vue项目 引入js文件
例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...
- 极*Java速成教程 - (3)
Java语言基础 访问权限控制 Java是一个面向对象的语言,当你不是它所设计的要面向的对象时,它就不会给你看你不该看到的东西,也就是"访问权限控制". 亲疏有别,才能权限控制 包 ...
- ARM汇编1
一. 指令和伪指令 1.1. 指令 a. (汇编)指令是CPU机器指令的助记符,经过编译后会得到一串10组成的机器码,可以由CPU读取执行. 1.2. 伪指令 b. (汇编)伪指令本质上不是指令(只是 ...
- Codeforces - 1198D - Rectangle Painting 1 - dp
https://codeforces.com/contest/1198/problem/D 原来是dp的思路,而且是每次切成两半向下递归.好像在哪里见过类似的,貌似是紫书的样子. 再想想好像就很显然的 ...
- 问题 I: 夫子云游
问题 I: 夫子云游 时间限制: 1 Sec 内存限制: 128 MB提交: 319 解决: 219[提交] [状态] [命题人:jsu_admin] 题目描述 改编自猫腻所著的同名小说<将 ...
- Java ——数字图像处理(Java Graphics及其API简介)
1.创建一个Graphics对象BufferedImage bi = new BufferedImage(120,120, BufferedImage.TYPE_INT_ARGB);Graphics2 ...
- web前端工程化
目标 1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架 5.掌握Element-UI的使用 1.模块化的分类 A.浏览器端的模块化 1).A ...
- Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)
介绍: 一星期从入门到实际开发经验分享及总结 代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...
- 记录几个ui框架
Web前端领域最近几年发展的特别迅速,可以说是百家争鸣.Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队).对于现在的开发者来说,都向着全栈方向发展, ...