高效的CSS代码(1)
——阅读笔记,欢迎纠错
平时写CSS时常用的两个CSS文档(小杂感觉用的蛮喜欢,也是看了些书,尝试使用效果不错)
/************CSS reset *********/
/********顾名思义CSS标签重置,不改动,适合初学者吧,小杂也是初学者,对各个标签进行初始化后比较不会出现一些意外的结果,也是对各个浏览器的兼容性的考虑*****/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0; } table{border-collapse: collapse; border-spacing:0; } fieldset,img{border:0; } address,caption,cite,code,dfn,em,strong,th,var{font-style:normal; font-weight:normal; } ol,ul{list-style:none; } caption,th{text-align:left; } h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal; } q:before,q:after{content:''; }
/********CSS base*********/
/*******CSS的基础层,具体怎么使用看个人,小杂每次使用都是看页面需要什么才加入,可以用于CSS组合,平时常用的有这些,这些是看书后的笔记****/
/* 文字排版 */.f12{font-size:12px;} .f13{font-size:13px;} .f14{font-size:14px;} .f16{font-size:16px;} .f20{font-size:20px;} .fb{font-weight:bold;} .fn{font-weight:normal;} .t2{text-indent:2em;} .lh150{line-height:150%;} .lh180{line-height:180%;} .lh200{line-height:200%;} .unl{text-decoration:underline;} .no_unl{text-decoration:none;} /*定位*/ .tl{text-align: left;} .tc{text-align: center;} .tr{text-align:right;} .bc{margin-left:auto; margin-right:auto;} .fl{float:left;display:inline;} .fr{folat:right;display:inline;} .cb{clear:both;} .cr{clear:right;} .cl{clear:left;} /*clearfix是为了在父容器直接清除子元素浮动,让浮动元素的父容器能根据浮动元素的高度而自适应高度,把这个clearfix 给父容器挂上*/ .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;} .clearfix{display: inline-block}*html .clearfix{height:1%;} .Clearfix{display:block;} .vm{vertical-align:middle;} .pr{position:relative;} .pa{position:absolute;} .pf{position:fixed;} .abs-right{position: absolute;right: 0;}/*this character i haven't uesd*/ .zoom{zoom:1;}/*用于LAYOUT的启动*/ .hidden{visibility:hidden;} .none{display:none;} /*width height*/ .w10{width:10px;} .w20{width:20px;} .w30{width:30px;} .w40{width:40px;} .w50{width:50px;} .w60{width:60px;} .w70{width:70px;} .w80{width:80px;} .w90{width:90px;} .w100{width:100px;} .w200{width:200px;} .w250{width:250px;} .w300{width:300px;} .w400{width:400px;} .w500{width:500px;} .w600{width:600px;} .w700{width:700px;} .w800{width:800px;} .w{width:100%} .h50{height:50px;} .h80{height:80px;} .h100{height:100px;} .h200{height:200px;} .h{height:100%;} /*margin padding*/ .m10{margin:10px;} .m15{margin:15px;} .m30{margin:30px;} .mt5{margin-top:5px;} .mt10{margin-top:10px;} .mt15{margin-top:15px;} .mt20{margin-top:20px;} .mt30{margin-top:30px;} .mt50{margin-top:50px;} .mt100{margin-top:100px;} .mb5{margin-bottom:5px;} .mb10{margin-bottom:10px;} .mb15{margin-bottom:15px;} .mb20{margin-bottom:20px;} .mb30{margin-bottom:30px;} .mb50{margin-bottom:50px;} .mb100{margin-bottom:100px;} .mr5{margin-right:5px;} .mr10{margin-right:10px;} .mr15{margin-right:15px;} .mr20{margin-right:20px;} .mr30{margin-right:30px;} .mr50{margin-right:50px;} .mr100{margin-right:100px;} .ml5{margin-left:5px;} .ml10{margin-left:10px;} .ml15{margin-left:15px;} .ml20{margin-left:20px;} .ml30{margin-left:30px;} .ml50{margin-left:50px;} .ml100{margin-left:100px;} .p10{padding:10px;} .p15{padding:15px;} .p30{padding:30px;} .pt5{padding-top:5px;} .pt10{padding-top:10px;} .pt15{padding-top:15px;} .pt20{padding-top:20px;} .pt30{padding-top:30px;} .pt50{padding-top:50px;} .pb5{padding-bottom:5px;} .pb10{padding-bottom:10px;} .pb15{padding-bottom:15px;} .pb20{padding-bottom:20px;} .pb30{padding-bottom:30px;} .pb50{padding-bottom:50px;} .pb100{padding-bottom:100px;} .pl5{padding-left:5px;} .pl10{padding-left:10px;} .pl15{padding-left:15px;} .pl20{padding-left:20px;} .pl30{padding-left:30px;} .pl50{padding-left:50px;} .pl100{padding-left:100px;} .pr5{padding-right:5px;} .pr10{padding-right:10px;} .pr15{padding-right:15px;} .pr20{padding-right:20px;} .pr30{padding-right:30px;} .pr50{padding-right:50px;} .pr100{padding-right:100px;}
作者:承蒙时光
出处:http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
高效的CSS代码(1)相关推荐
- 高效整洁CSS代码原则
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...
- 高效整洁CSS代码原则 (下)
2019独角兽企业重金招聘Python工程师标准>>> 6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开 ...
- 精简高效的CSS命名准则/方法
2019独角兽企业重金招聘Python工程师标准>>> 一."无"的哲学 佛家讲究"因果报应",有果必有应.此段看似与主题没有血缘关系,实际讲 ...
- 精简高效的CSS命名准则和方法
一."无"的哲学 佛家讲究"因果报应",有果必有应.此段看似与主题没有血缘关系,实际讲的是"因". 我个人比较喜欢老子的道家思想,并喜欢以其 ...
- [css] 【转载】 精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
- CSS代码重构与优化之路
写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置 ...
- 编写更好的CSS代码
编写好的CSS代码,有助提升页面的渲染速度.本质上,引擎需要解析的CSS规则越少,性能越好.MDN上将CSS选择符归类成四个主要类别,如下所示,性能依次降低. ID 规则 Class 规则 标签规则 ...
- 写出完美CSS代码的5个重要方面
每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.我在博客中也一直与大家讨论,学习CSS编码与CSS技巧.但是CSS还 可以更好吗?开始用这5个Tips改进你的CSS吧! 一.关于 CS ...
- CSS代码重构与优化之路(转)
CSS代码重构与优化之路 阅读目录 CSS代码重构的目的 CSS代码重构的基本方法 CSS方法论 我自己总结的方法 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如 ...
最新文章
- mysql社区版与cluster 区别_MySQL版本Enterprise/Community/Cluster等版本的区别
- Spring+Hibernate整合
- 韩军星:汇报工作的四个层级
- 界面原型创建工具Axure 基本操作
- C 语言链表其他实现
- 今日代码(200708)--缺失值处理
- python xyz_python中xyz坐标的欧几里德距离
- 一般二叉树的顺序存储Java_100-顺序存储二叉树思路图解
- Entity Framework 6 Code First的简单使用和更新数据库结构
- [转]硬盘分区表知识——详解硬盘MBR
- ex.php,Exphp代码走读
- 内网主机通过外网地址访问内网服务器
- 华为5102路由器虚拟服务器,华为路由WS5102怎么设置wifi中继功能
- H3CNE《第1章 计算机网络概述》
- Linux 平台上的软件包管理
- ktt算法 约化_深度学习面试题
- java-读取Excel文件,自定义读取固定行、列(不区分xls、xlsx)
- ZUCC_计算机系统原理实验_大作业 bomb 破解
- 怎么把安卓手机便签小工具添加到手机桌面显示呢?
- 计算机文件打开方式这么还原,dat文件还原默认打开方式如何设置?还原默认打开方式的详细步骤...
热门文章
- 企微 - 使用jsdk的 openDefaultBrowser 实现打开默认浏览器
- python人工智能入门书籍推荐-人工智能入门到进阶必读Python书籍PDF!
- Panel Designer教程
- git提交报configuration specifies to merge with the ref ‘’refs/heads/master‘
- 别人的假期 VS 我的假期
- 你也不知道吧?VIVO手机为什么很少出现质量问题?答案意想不到
- office控件设置书签
- 用python编写一个点餐程序_用python做一个点餐系统,热敏打印机怎么连?
- Twincat导出Scope数据(机器人控制),并采用origin绘图
- 质量在中国中小企业中价值几何?