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 新属性的讲解

最新文章

热门文章