没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
CSS 学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 CSS 书写风
格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 CSS 代码原
则:
1.使用 Reset 但并非全局 Reset
不同浏览器元素的默认属性有所不同,使用 Reset 可重置浏览器元素的一些默认属性,
以达到浏览器的兼容。但需要注意的是,请不要使用全局 Reset:
*{margin:0;padding:0;}
这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距
和内边距。在此建议参考 YUIReset 和 EricMeyer 的做法。我跟 EricMeyer 的观点相同,
Reset 并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器
的兼容和操作上的便利性。我使用的 Reset 如下:
/*清除内外边距Š*/
body,h1,h2,h3,h4,h5,h6,hr,p,
blockquote,/*结构元素*/
dl,dt,dd,ul,ol,li,/*列表元素*/
pre,/*文本格式元素Š*/
form,fieldset,legend,button,input,textarea,/*表单元素Š*/
th,td,/*表格元素Š*/
img/*图片元素Š*/{
border:mediumnone;
margin:0;
padding:0;
}
/*设置默认字体*/
body,button,input,select,textarea{
font:12px/1.5'宋体',tahoma,Srial,helvetica,sans-serif;
}
h1,h2,h3,h4,h5,h6{font-size:100%;}
em{font-style:normal;}
/*重置列表元素Š*/
ul,ol{list-style:none;}
/*重置超链接元素Š*/
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;color:#F40;}
/*重置图片元素Š*/
img{border:0px;}
/*重置表格元素*/
table{border-collapse:collapse;border-spacing:0;}
2.良好的命名习惯
无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:
.aaabb{margin:2px;color:red;}
我想即使是初学者,也不至于会在实际项目中如此命名一个 class,但有没有想过这样的代
码同样是很有问题的:
<h1>Mynameis<spanclass="redblod">Wiky</span></h1>
问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:ŠŠ
.red{color:bule;}
这样的命名就会很让人费解,同样的命名为.leftBar 的侧边栏如果需要修改成右侧边栏也会
很麻烦。所以,请不要使用元素的特性(颜色,位置,大小等)来命名一个 class 或 id,
您可以选择意义的命名如:#navigation{...},.sidebar{...},.postwrap{...}
这样,无论你如何修改定义这些 class 或 id 的样式,都不影响它跟 HTML 元素间的联系。
另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚
刚说的那种情况,如
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}那么对于这样一个段落ŠŠŠŠŠŠ
<pclass="alignleft">我是一个段落!</p>
如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的 className 就为
alignright 就可以了。
剩余7页未读,继续阅读
资源评论
一个优秀的颓废程序猿
- 粉丝: 60
- 资源: 19
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功