zoukankan      html  css  js  c++  java
  • 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;

  • 相关阅读:
    Vue 环境配置
    导入解决方案错误及其解决办法
    Dynamics 365创建用户提示:您正在尝试使用已由其他用户使用的域登录来创建用户。的解决办法
    iOS核心动画详解(CABasicAnimation)
    iOS核心动画详解(一)
    iOS 微信支付流程详解
    初探runtime
    iOS之block,一点小心得
    iOS scrollview循环播放加缩放
    用程序删除工程中多余的图片
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10795947.html
Copyright © 2011-2022 走看看