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;

posted on 2019-04-30 14:48  Web引领者  阅读(220)  评论(0编辑  收藏  举报