css重置样式表（CSS技巧：五个方面促进你写出更加专业的CSS代码）

本文目录

• CSS技巧：五个方面促进你写出更加专业的CSS代码
• css怎么用样式表把单元格之间的空隙消掉如果是两个table之间的距离又要怎么消掉
• css外部样式的reset.css是干嘛的
• CSS 如何恢复到默认样式
• less的LESS 原理及使用方式
• 在css中设置重置按钮怎么弄

CSS技巧：五个方面促进你写出更加专业的CSS代码

每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？用这五个方面改进你的CSS，会让你显得更加专业，也能使代码有好！
一、重置
首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset，或者你自己编写的重置代码，只要使用就对了。
它能很简单的移除所有元素的填充（padding）和边距（margin）：
html, body, div, h1, h3, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式表。噢，请停止使用：
* { margin: 0; padding: 0; }
花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。
二、排序
一个小的测试：这个例子就是要让你思考如何更快的找到右边距属性？
Example#1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Example#2
div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}
你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。
我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。
三、组织
你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：
/*****Reset*****/移除元素的填充（padding）和边距（margin）。
/*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素
/*****Header*****/定义所有Hearder元素
/*****Content*****/定义所有内容框内的元素
/*****Footer*****/定义所有Footer的元素
/*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组，将更快的找到你想要的。
四、一致性
无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。
就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
所以找到你喜欢的工作方式然后保持一致。
五、从正确的地方开始
在完成标记语言之前不要去尝试靠近你的样式表。
当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。
通过先标记文档，你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译）。
利用CSS子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：没有一个良好的格式化文档（或者标记结构）CSS是无价值的。

css怎么用样式表把单元格之间的空隙消掉如果是两个table之间的距离又要怎么消掉

table{border-collapse:collapse;}

/*在需要清楚空隙的表格里面加上这个样式，我这个样式是清除了页面所有表格的的空隙，如果需要单独清楚某一个表格，给那个表格加上类或者ID 把table换成ID名或者样式名就可以了*/

css外部样式的reset.css是干嘛的

Reset是重置的意思。
现在的浏览器五花八门，光ie就有好多版本，还有火狐，Chrome等等。每个浏览器的默认样式也是不同的。所以就要考虑一个兼容问题。比如你用ie打开网站正常，但是用火狐或其他浏览器打开的时候，网站就变形了。这些都属于兼容问题。
为了避免这种问题，我们需要把一些常用的html标签重置(CSS Reset)，将它们统一定义，就可以产生相同的显示效果。比如：
html, body, div, span,object, iframe,h1, h3, h3, h4, h5, h6, p, blockquote, abbr,del, dfn, em, img, ins,strike, strong, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, object, col, colgroup, caption, summary, tbody, tfoot, thead, th{margin:0; padding:0; border:0;}
这个方法让所有的选择器的padding、margin和border都设置成0。
当然。reset.css只是一个名字，方便阅读，标准一些而已。你可以自己随意命名。
***隐藏网址***

CSS 如何恢复到默认样式

有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题。 

查找一些教材中（w3schools等），只说css的顺序是“元素上的style” 》 “文件头上的style元素” 》“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知优先级如下排列：

 1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：

id选择器指定的样式 》 类选择器指定的样式 》 元素类型选择器指定的样式所以上例中，#navigator的样式优先级大于.current_block的优先级，及时.current_block是最新添加的，也不起作用。 

2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高

注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后：

.class1 { color: black;}
.class2 { color: red; }
.class1 {color: black;}
.class2 {color: red;}

而某个元素指定class时采用 class="class2 class1"这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。

3. 如果要让某个样式的优先级变高，可以使用!important来指定：

.class1 {color: black !important;}  
.class2{color: red;}

less的LESS 原理及使用方式

***隐藏网址***
《link rel=stylesheet/less type=text/css href=styles.less》
LESS 源文件的引入方式与标准 CSS 文件引入方式一样：
《link rel=stylesheet/less type=text/css href=styles.less》
需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。 LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：
@import “variables.less”;
.less 文件也可以省略后缀名，像这样：
@import “variables”;
引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。 LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
我们可以从下面的代码了解变量的使用及作用：
清单 3 LESS 文件 @border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }
经过编译生成的 CSS 文件如下：
清单 4. CSS 文件 .mythemes tableBorder { border: 1px solid #b5bcc7; }
从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。
该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。
清单 5. LESS 文件 @width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px }
经过编译生成的 CSS 文件如下：
清单 6. CSS 文件 #homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; } Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
我们先简单看一下 Mixins 在 LESS 中的使用：
清单 7. LESS 文件// 定义一个样式选择器 .roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的样式选择器中使用 #header { .roundedCorners; } #footer { .roundedCorners(10px); }
经过编译生成的 CSS 文件如下：
清单 8. CSS 文件 #header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：
清单 9. LESS 文件// 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 使用已定义的样式选择器 #header { .borderRadius(10px); // 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器 }
经过编译生成的 CSS 文件如下：
清单 10. CSS 文件 #header { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .btn { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
我们还可以给 Mixins 的参数定义一人默认值，如
清单 11. LESS 文件.borderRadius(@radius:5px){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .btn { .borderRadius; }
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件 .btn { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
像 JavaScript 中arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } #header { .boxShadow(2px,2px,3px,#f36); }
经过编译生成的 CSS 文件如下：
清单 14. CSS 文件 #header { -moz-box-shadow: 2px 2px 3px #FF36; -webkit-box-shadow: 2px 2px 3px #FF36; box-shadow: 2px 2px 3px #FF36; }
Mixins 是 LESS 中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS 文件 #mynamespace { .home {...} .user {...} }
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace 》 .user。 在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段 《div id=home》 《div id=top》top《/div》 《div id=center》 《div id=left》left《/div》 《div id=right》right《/div》 《/div》 《/div》清单 17. LESS 文件 #home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; } #center{ border:outset; height : 300px; width : 90%; #left{ border:outset; float : left; width : 40%; } #right{ border:outset; float : left; width : 40%; } } }
经过编译生成的 CSS 文件如下：
清单 18. CSS 文件 #home { color: blue; width: 600px; height: 500px; border: outset; } #home #top { border: outset; width: 90%; } #home #center { border: outset; height: 300px; width: 90%; } #home #center #left { border: outset; float: left; width: 40%; } #home #center #right { border: outset; float: left; width: 40%; }
从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。
清单 19. LESS 文件a { color: red; text-decoration: none; &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素 color: black; text-decoration: underline; } }
经过编译生成的 CSS 文件如下：
清单 20. CSS 文件 a { color: red; text-decoration: none; } a:hover { color: black; text-decoration: underline; } 在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：
清单 21 . LESS 文件 @init: #111111; @transition: @init*2; .switchColor { color: @transition; }
经过编译生成的 CSS 文件如下：
清单 22. CSS 文件 .switchColor { color: #222222; }
上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。
使用这些函数和 JavaScript 中使用函数一样。
清单 23 LESS 文件init: #f04615; #body { background-color: fadein(@init, 10%); }
经过编译生成的 CSS 文件如下：
清单 24. CSS 文件 #body { background-color: #f04615; }
从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。
LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。 同类框架还有 SASS :与 LESS 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。
LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法。

在css中设置重置按钮怎么弄

css里面是可以做样式的，而表单的重置按钮就已经有重置的功能了
《input type="reset" value="重置" /》, 具体的可以参考php中文网的资料 ,php.cn上面有这块的知识，希望可以帮助你！