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 ...
随机推荐
- The bean 'dataSource', defined in BeanDefinition defined in class path resou
SpringCloud对应SpringBoot不匹配 Greenwich 2.1.x Finchley 2.0.x Edgware 1.5.x Dalston 1.5.x SpringBoot Spr ...
- “希希敬敬对”团队--‘百度贴吧小爬虫’Alpha版本展示博客
希希敬敬对的 Alpha阶段测试报告 随笔链接地址 https://www.cnblogs.com/xiaoyoushang/p/10078826.html Alpha版本发布说明 随笔链接地址 ...
- mysql修改库、表、字段 字符集,中文排序
查看字段编码: show full columns from t2;show variables like '%character%';show variables like 'collation_% ...
- ### Error building SqlSession. ### The error may exist in SQL Mapper Configuration ### Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration. Cause: org.apache.ibat
这是一个由粗心导致的错误,具体报错如下: org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSessio ...
- struts2 spring 优缺点
struts框架具有组件的模块化,灵活性和重用性的优点,同时简化了基于MVC的web应用程序的开发.优点:Struts跟Tomcat.Turbine等诸多Apache项目一样,是开源软件,这是它的一大 ...
- 前端开发HTML&css入门——盒子模型以及部分CSS样式
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...
- HBase HA分布式集群搭建
HBase HA分布式集群搭建部署———集群架构 搭建之前建议先学习好HBase基本构架原理:https://www.cnblogs.com/lyywj170403/p/9203012.html 集群 ...
- Java JNA (五)—— 释放Memory对象分配的内存
Java进程的内存包括Java NonHeap空间.Java Heap空间和Native Heap空间. JNA中的Memory对象是从Native Heap中分配空间.但java的GC是针对Java ...
- [译]深度学习(Yann LeCun)
深度学习 严恩·乐库 约书亚•本吉奥 杰弗里·希尔顿 摘要深度学习是计算模型,是由多个处理层学习多层次抽象表示的数据.这些方法极大地提高了语音识别.视觉识别.物体识别.目标检测和许多其他领域如药物 ...
- Git命令——提交、查看、后退、前进
Git常用命令 1. 命令git init把这个目录变成Git可以管理的仓库: 2. 命令git commit把文件提交到仓库 这里需要注意的是,Git只能跟踪文本文件的改动,如txt文件,网页,所有 ...