• 用户样式,作者样式和浏览器默认样式


    一.浏览器默认样式

    有个网站(http://www.iecss.com/)总结了IE6/7/8/9,FF3.6.3,webkit(r7042),opera10.51的默认样式,熟悉一下可以让我们更好的明白一些书写CSS过程中的差异。

    熟悉这些之后可以明白:

    1. 使用CSS reset的原因;

    2. *{margin:0;padding:0;}一刀切的做法为什么不提倡;

    3. 网上广泛流传的CSS reset为什么也有人不提倡。

     从对比图可以看出,部分标签其实是没有margin或者padding的。其中又有些标签一般是很少用到的,就算用到了,一般也会特殊定制。对于一般的应用,简单的css reset(按需)就可以了。比如:

    1 body,p,dl,dd,h1, h2, h3, h4, h5, h6,form{ margin: 0; }
    2 ul,ol,input,fieldset{ margin: 0; padding: 0; }
    3 ul,ol{list-style-type: none;}
    4 img{ border: 0; }
    5 option,em{ font-style:normal}
    6 a{ text-decoration: none; color: #c9c9c9;}
    7 a:hover{ text-decoration: underline; color: #31c8e1;}

    另外,直接翻看webkit的默认样式表,查找input:focus就可以知道为什么chrome的input框选中之后默认有一圈黄色边框

    要去掉直接重置就可以了。

    1 input,textarea{ outline:none; }
    2 textarea{ resize:none;}      //这个是去掉textarea默认的大小拖动


    至于查看浏览器的默认样式,IE不清楚,FF下网上有个方法是resource://gre/res/html.css,不过这个貌似只能在4.0之前的版本看,4.0之后的版本被打包到安装目录的omni.jar里面,解压之后才可以看。webkit和opera的暂不知道···

     

    二.用户样式

    CSS的来源有三种:

    1、user agent stylesheet 用户代理的默认CSS(就是浏览器默认的CSS);

    2、author style sheets 开发人员定义的CSS(前端开发人员写的external-style,embeded-style,inline-style);

    3、user style sheets 用户自定义的CSS(用户自己写的)。

    优先级如下,由上至下依次增高:

    user agent stylesheet

    user declarations (normal)

    author declarations (normal)

    author declarations (!important)

    user declarations (!important)

    前面两种可能用得比较多,第三种一般人也不会去设置,开发人员更不会设置,不过作为学习,个性化自己的浏览器或者整人的时候,倒是可以一用。

    测试的时候最好加上!important后缀。

    注意:下面各浏览器的设置可能应为版本的不同而略有不同,自己摸索,大同小异!

    Firefox:

    菜单->帮助->故障排除信息->应用程序摘要->显示文件夹

    会打开形如MozillaFirefoxProfiles79it7qoh.default的文件夹,在下面建立一个名为chrome的文件夹,然后新建名为userContent.css的样式表,在里面定义自己的CSS,重启Firefox之后才能生效(这也是Firefox最让人无语的地方)。操作如下图

    图一

    图二

    Chrome:

    对于WIN7用户来说,用户自定义样式表在形如C:UsersAppDataLocalGoogleChromeUser DataDefaultUser StyleSheets的文件夹下面(根据你自己chrome浏览器安装路径决定,如果看不到AppData文件夹就应该设置“显示隐藏文件”),一般这个不用自己新建,下面有个文件叫做Custom.css,写入用户自定义的CSS。对于chrome来说,可以即时生效,刷新都免了。

     

    Opera:

    菜单->设置->首选项->高级->内容->样式选项->我的样式表

    貌似不用重启,不过重启保险一下。

    IE:

    菜单->internet选项->常规->辅助功能

    下图是IE9的例子,设置后立即生效,不过和chrome的保存css文件即时生效不一样。

    Safari(win):

    菜单(设置)->偏好设置->样式表

    保存后生效。

    文章出处:http://www.cnblogs.com/xesam/

  • 相关阅读:
    python---模块与包
    python---迭代器与生成器
    python---装饰器
    Python---函数
    Python---文件操作
    Python---数据类型
    浅谈UBUNTU
    java 键盘输入多种方法
    动态规划解最长公共子序列问题
    线段树
  • 原文地址:https://www.cnblogs.com/ttcc/p/3853158.html
Copyright © 2020-2023  润新知