css样式书写规范,css的书写形式 框架式

css选择器、css的书写规范

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

创新新互联，凭借十年的网站设计、做网站经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有1000多家案例。做网站建设，选成都创新互联。

而与类选择器不同,id选择器在HTML文档仅仅使用一次,控制单个元素的样式。

.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

element#id id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

*属性选择器

*伪类选择器

*伪元素选择器

优先级:从高到低

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a;link 表示未被访问状态;

a:hover 表示鼠标悬停状态;

a:active 表示活动状态;

a;visited 表示已被访问状态;

他们的顺序应该是"LVHA"的顺序.

E:first-child 匹配元素E的第一个子元素

E:link 匹配所有未被点击的链接

E:visited 匹配所有已被点击的链接

E:active 匹配鼠标已经其上按下、还没有释放的E元素

E:hover 匹配鼠标悬停其上的E元素

E:focus 匹配获得当前焦点的E元素

E:lang(c) 匹配lang属性等于c的E元素

E:enabled 匹配表单中可用的元素

E:disabled 匹配表单中禁用的元素

E:checked 匹配表单中被选中的radio或checkbox元素

E::selection 匹配用户当前选中的元素

E:root 匹配文档的根元素，对于HTML文档，就是HTML元素

E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1

E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1

E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素

E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素

E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)

E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素

E:not(selector) 匹配不符合当前选择器的任何元素

参考

CSS编写时标准的格式规范是什么样的？

CSS用的是类C#语言的标准。

书写方法自由灵活，没有一定的局限。但是常期以来为了阅读和维护等方面的经验，一般都是这样的格式：

标名 {

属性：属性值;

属性：属性值；

}

当然这样大家都能理解，你自己也好维护，没有什么特殊的要求的！

为了便于阅读有人建议，CSS分为以下方面的控制：

先写位置等：

如：position:absolute;

top,left，width,height等,

空一行，再写布局方面的，如：margin,padding等；

空一行，写字体格式：如line-height等

再空一行，写字体相关！如：font-size,font-color等；

最后是其他的属性！

但一般情况下，我们还是没有必要写那么多的属性值对的！所以就很少有人去空行做这些东西了！

但是一般内容较少时，可以直接写在一行，并不影响阅读的！

纠正一点的是：CSS文件进行调用时并不像一楼所说！不换行可以减少代码的大小！这是毫无根据的臆断！因其会自动解释换行和空白的！代码的大小是因为我们写了一些没有必要的东西所形成的时空代价，比如在body中已经有font-size:9pt;而在BODY中的一个DIV中，如果要设置字体为9pt时没有必要再定义font-size:9pt了，如果再定义就是出现代码时的增大。还有一些默认也没有必要写出。

如果真如一楼所说，我想问一下一楼：你知道吗，在CSS中是可以加注释的，请问注释会不会增加代码量？答案是不会！因为其不运行！

sorry,对不起楼上，我说的是运行方面的，没有说下载方面的事。恕我直言，如果有一个人一个不足0。2K的CSS而写了N个GB的注释的话，那他一定有病了！注释不是发文章，一个CSS文件最多能有多少注释？不过我经常遇到写好的CSS进行压缩加密的情况，为了防止别人偷看，至于说能有多少，一个回车只是一个字符，占8bits,一个byte,请问一下，连写与其能有多大分别？再者请问一下为什么还要分开写呢？这是代码的维护时很难读懂的情况下还要讲时间代价吗？

程序的时空代价是指：运行时间与编写时间的相比，存储空间与运行空间的对比。

对于离散型网页来说，下载页面的同时还在下载CSS文件，而且CSS会放在机器的临时文件夹中，这样，整个网站也用不了下载几个CSS，且下次打开网页不须再下CSS。这样你认为呢？

CSS怎么写才标准？

针对IE6，IE7，firefox显示不同效果

做网站时经常会用到，衡量一个DIV+CSS架构师的水平时，这个也很重要。

区别不同浏览器的CSS hack写法：

区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;IE6 IE7 FF

* √ √ ×

!important × √ √

------------------------------------------------------

另外再补充一个，下划线"_",

IE6支持下划线，IE7和firefox均不支持下划线。 IE6 IE7 FF

* √ √ ×

!important × √ √

_ √ × ×

于是大家还可以这样来区分IE6，IE7，firefox

: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

一、CSS HACK

以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

stylegt;

#wrapper

{

width: 100px!important; /* IE7+FF */

width: 80px; /* IE6 */

}

/stylegt;

2, IE6/IE7对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

style

#wrapper

{

#wrapper { width: 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 fixed */

*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */

}

/style

注意:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

二、万能 float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]

将以下代码加入Global CSS 中,给需要闭合的div加上 style

/* Clear Fix */

.clearfix:after

{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix

{

display:inline-block;

}

/* Hide from IE Mac */

.clearfix {display:block；}

/* End hide from IE Mac */

/* end of clearfix */

/style

关于闭合浮动元素（clearing float）的方法现在已经很多了，个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看上去不够简洁。

现在看到有个方法超级简单。介绍一下这个方法。原文在：

这 一方面的原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ID的问题了，再加上“_height:1%”，这 个问题就完全解决了。

下面的例子作为比较

1、没有闭合浮动元素；2、非IE下闭合浮动元素；3、完全闭合元素。相关代码如下：

XHTML代码：

Example Source Code [ww

w.52css.com]

div id="wrap"

div class="column_left"

h1Float left/h1

/div

div class="column_right"

h1Float right/h1

/div

/div

CSS样式：

Example Source Code [ww

w.52css.com]

#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}

.column_left{ float:left; width:20%; padding:10px;}

.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

三、其他兼容技巧(再次啰嗦)

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

2, 居中问题.

1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)

2).水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，

但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下：

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，

只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

5 IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，

正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}htmlbody #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个div 放到 body 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

HTML代码div id="box" div id="left"/div div id="right"/div/div

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或padding 时。

例：

div id="box"

p对象中的内容

/div

CSS：#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center;}

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性

Web前端开发规范之css规范

今天小编要跟大家分享的文章是关于Web前端开发规范之css规范。Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看css规范的原则吧！

css规范

1、编码规范为utf-8。

2、协作开发及分工：i会根据各个模块，同时根据页面相似程序，事先写**体框架文件，分配给前端人员实现内部结构表现行为。共用css文件base.css由i书写，协作开发过程中，每个页面请务必都要引入，此文件包含reset及头部底部样式，此文件不可随意修改。

3、class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的，为JS预留钩子的除外。

4、为JS预留钩子的命名，请以js_起始，比如：js_hide，js_show。

5、class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文数字来组合命名，如i_comment，fontred，width200。避免使用中文拼音，尽量使用简易的单词组合。总之，命名要语义化，简明化

6、规避class与id命名(此条重要，若有不明白请及时与i沟通)：a)通过从属写法规避，示例见d。b)取父级元素id/class命名部分命名，示例见d。c)重复使用率高的命名，请以自己代号加下划线起始，比如i_clear。d)a，b两条，适用于在2中已建好框架的页面，如，要在2中已建好框架的页面代码中加入新的div元素，按a命名法则：...，样式写法：#mainnav.firstnav{.......}按b命名法则：...，样式写法：.main_firstnav{.......}

7、css属性书写顺序，建议遵循：布局定位属性--自身属性--文本属性--其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：布局定位属性主要包括：displaylist-styleposition(相应的top，right，bottom，left)floatclearvisibilityoverflow;

自身属性主要包括：widthheightmarginpaddingborderbackground。

文本属性主要包括：colorfonttext-decorationtext-alignvertical-alignwhite-space

其他content。

8、书写代码前，提高样式重复使用率。

以上就是小编今天为大家分享的关于Web前端开发规范之css规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

大侠们求助，CSS的编写规范是什么？老被老板骂：输写不规范。

我刚做WEB项目时，也有这样的感触。老板说CSS兼容问题，比较复杂，没让我做。工作之余，我还是自己摸索了一番，网上查了很多资料。都不太靠谱，很片面。我个人觉得这完全是经验问题，而非一字一句能说的清楚的。我就分享一下我的经验吧。如果调用CSS最好在API上看看详细信息。比如哪些浏览器不支持等等。如果不支持，再去网上找能实现同样效果的CSS样式，这样基本上的兼容问题都能得到解决。

个人经验之谈，不一定是最好的。但对我很有用。

追问：

楼主这么长时间没结贴，问题是解决了还是没解决？？

没解决大家继续探讨！！

Css书写规范，什么时候用id，什么时候用class

你好！id与class的区别：1、根据W3c标准，ID在一个页面中有且只能有一个。所以使用ID表示的CSS样式只能表示一个元素的样式2、CLASS在一个页面中可以有多个，也就是说定义一个CSS样式后，可以有多个元素引用这个class。class的使用更灵活