私有前缀处理兼容性渐进增强和优雅降级文字阴影盒子阴影圆角阿里字体图标属性选择器伪类选择器状态伪类选择器否定伪类选择器动态伪类选择器目标伪类选择器

191 阅读2分钟
1.标签语义化
    概念:有意义,见名知意。提倡用正确的标签去描述相应的内容
    常见的语义化标签:
        header
        main
        footer
        nav
        section
        aside
        article
    音频:
        <audio src='' controls autoplay></audio>
    视频:
        <video src='' controls poster=''></video>
    好处: 代码具有可读性、方便seo

2.表单新增的属性和标签
    <form novalidata>
        <input required autofocus maxlength placeholder>
    </form>

    datalist

    <input list='id名'>
    <datalist id='id名'>
        <option value=''>内容</option>
    </datalist>

1.css3兼容性处理 方法:添加私有前缀 代表浏览器 浏览器内核 前缀 欧朋 presto -o- IE trident -ms- 火狐 gecko -moz- 谷歌 webkit -webkit-

2.渐进增强和优雅降级 项目开发中的两种思想而已。 渐进增强:先完成最基本的功能,后面针对高版本的浏览器,再添加功能或者是酷炫的效果。意味着向后看。 优雅降级:先完成所有的功能,再针对低版本的浏览器,进行功能、酷炫效果、交互的删减,保证最基本的功能的实现。意味着向前看

3.css3新增的属性 1.文字阴影 text-shadow:x的偏移 y的偏移 模糊程度 阴影的颜色;

2.盒子阴影
    box-shadow: x的偏移 y的偏移 模糊程度 阴影的颜色 inset;
    inset代表内阴影,不要就是外阴影;

3.圆角
    border-radius:*px | *%;

4.字体图标 使用方式1: 1.设置字体类型 @font-face{ font-family:'字体名称'; src:url('*.ttf'); 设置字体文件的路径 }

    2.在html中写对应的结构
        <i> 对应图标的unicode </i>
    
    3.给图标设置字体类型为第一步设置的字体名称

使用方式21.引入iconfont.css
    2.加图标对应的类名就可以使用
        <span class='iconfont 类名'></span>

5.其他选择器 1.属性选择器 e[attr] 匹配含有attr属性的元素e

2.结构伪类选择器
    1.选中第一个子元素e         e:first-child{   }
    2.选中最后一个子元素e       e:last-child{   }
    3.选中第m个子元素e          e:nth-child(m){  }
            m是乘法因子,可以是数字、英文单词、数学表达式;   2n代表偶数  2n+1代表奇数
    4.选中倒数第n个子元素e      e:nth-last-child(n){ }
    5.选中唯一的子元素e         e:only-child{  }

    注意:child系列强调的是元素在所有的同级兄弟之间的排列顺序  【种类不限】

    type系列:写法只是将child改成 of-type,他强调元素在所有同类型兄弟之间的排列顺序。

3.状态伪类选择器
    e:disabled  {  }       选中不可用的e元素 
    e:enabled   {  }       选中可用的e元素 
    input:checked   {  }   选中被选中的e元素 

4.动态伪类选择器(了解)
    未激活的链接      :link
    激活的链接       :active
    已经访问的链接   :visited
    鼠标悬停         :hover

5.否定伪类选择器
    e:not(f)       选中e元素中,除去f的元素

6.目标伪类选择器
    e:target{  }   选中为目标区域的元素e