自定义博客园样式

博客园为用户开放了好多修改样式的权限,除了自由修改公告以外,我们通过其提供的css定制页面风格来修改其他样式,先要选择禁 用模板默认css,但这样整个博客的样式会变得杂乱无章,我们自己从新定义的话很费时间,可以直接复制博客园自己的css到我们的自定义css中(方法是 利用开发人员工具,选到css的下拉列表,就会看到博客园自己的css的连接(将连接放到地址栏就可以看到相关css了(甚至连head里 的<style type="text/css">定义的样式也能看见),

然后就可以复制过来了)也可以看到我们在博客园的自定义css(连接是http://www.cnblogs.com/***** /customcss.aspx))我们就可以用开发人员工具来查看我们想要修改的DOM对象的id或class及其属性设置,然后就可以随意修改其属性 值了(将这些css代码考到记事本里,通过查找定位,再修改))差不多对于任何网页里的美工效果我们都可以用开发人员工具来查看其美工代码经分析后进行模 仿,对于客户端脚本也是如此,但是IE浏览器的缓存功能会使有时不能马上看到效果,最好重开浏览器再看(chrome好像不用)。当然博客园不可能将每个 元素节点都加id或class,所以对于有些样式会直接写在该元素的style或其他样式属性里,而这些元素又没有id或class,我们可以用 jquery(当然要先导入到园子里)里的好多方法来找到该元素然后再用jQuery的修改属性的方法来修改这些样式,这个过程要很好的结合vs(如果你 怕出错的话,要先在vs里实验成功再将代码考到园子里)和开发人员工具(因为你要很好的了解这些元素的结构,比如<table>;输出时其内 会加一个<tbody>的元素,如果你不看开发人员工具而忽略此元素的话就找不到里面的tr和td了)。当然你也可以用纯js,但那比较麻烦 而且容易出错。

关于给同一元素重复定义相同的样式按出现的先后顺序覆盖,css文件与head里的<style type="text/css">以后面定义的样式为准(css文件和head里的<style type="text/css">在同一网页内是一视同仁的),元素通过style属性(inline-style)定义的重复样式也是按后面的样 式为准)