表格相关属性、控制光标属性、媒介查询

154 阅读2分钟
border-collapes:设置表格里行和单元格边框的显示方式
    seperate:边框分开,使得单元格分割线成双线
    collapse:边框合并,使得单元格分割线为单线
border-spacing:设置表格标题位于表格那边,该属性必须和<csption/>元素一起使用,该属性有四个值,top、bottom、left、right,分别对应表格标题放在表格上下左右四个方位
    empty-cells:该属性控制单元格没有内容时,是否显示单元格边框,只有当border-collapse属性设置成seperate,该属性才有效,该属性支持show(显示)和hide(隐藏)两个值
    lable-layout:设置表格宽度布局的方法,该属性支持auto和fixed两个属性值,其中auto是默认值,也就是平时常见的表格布局方式,fixed则是指定使用固定布局方式
    
光标属性
        cursor:none(not IE、safari、opera)
        cursor:context-menu(not firefox、chrome)
        cursor:cell(not safari)
        cursor:vertical-text
        cursor:alias(not safari)
        cursor:copy(not safari)
        cursor:no-drop
        cursor:not-allowed
        cursor:ew-resize
        cursor:ns-resize
        cursor:new-resize
        cursor:nesw-resize
        cursor:nwse-resize
        cursor:col-resize
        cursor:row-resize
        cursor:all-scroll
    创建自己的指针
        cursor:url(images/cursor.cur);
        cursor:url(images/cursor.png) x y,auto;
        在IE中使用需要一个windows指针文件(.cur)
        火狐、谷歌、苹果浏览器中需要一副图片,推荐使用24位alpha透明的png图片
        火狐浏览器还需要一个非url指针设置作为备用值
        opera不支持这种写法
        x y是火狐、谷歌、苹果浏览器的可选属性,他定义了图像从左上角开始的精确指针位置,如何省略都默认为0
        
媒介查询
    media query功能
    这种匹配机制允许设置在css样式中添加media query表达式,这种表达式不仅可以对媒体类型进行匹配,也可以对媒体分辨率、色深等各种细节进行匹配,因此可以针对不同类型、不同参数细节的媒体设计提供精准控制
    语法:
    @media 设备名 only(选取条件)not (选取条件)and(设备选区条件),设备二{srules}
    媒体设备格式类型如下
        all:适用于所有的设备类型
        aural:适用于语音和音频合成器
        braille:适用于触觉反馈设备
        embossed:适用于凸点字符(盲文)印刷设备
        handheld:适用于小型或者手提设备
        pprint:适用于打印机
        projection:适用于投影设备,如幻灯片
        screen:适用于计算机显示器
        tty:适用于固定间距字符格式的设备,如电传打字机和终端
        ·tv:适用于电视设备

1.png