css类名命名规则-有助于SEO优化的DIV+CSS命名规则总结

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

id在一个页面只能使用一次，而class可以被多次引用。

我在页面上使用了多个相同的ID，在IE中显示正常。 ID和class好像没有什么区别。 使用多个相同的 ID 有影响吗？

如果页面上存在多个相同的ID，则该页面无法通过W3校准。

在页面显示方面，当前的浏览器仍然允许你犯这个错误，并且使用多个相同的ID可以在“正常情况下”正常显示。 而当你需要用JavaScript通过id来控制这个div时，就会出现错误。

ID是一个用来区分不同结构和内容的标签，就像你的名字一样。 如果一个房间里有两个同名的人，就会发生混乱；

阶级是一种风格，可以套在任何结构和内容上，就像一件外套；

从概念上讲，它是不同的：

ID是先找到结构/内容，然后为其定义样式； class是先定义一个样式，然后将其应用到多个结构/内容。

也就是说，在编写XHML+CSS时，如果是一维结构定位，建议使用id，否则使用class（这样就允许非结构定位的div块的id由程序员）

Web 标准期望您在编写代码时遵循严格的习惯。

3.使用css简写

使用缩写可以帮助减小 CSS 文件的大小并使其更易于阅读。 常用CSS简写的主要规则：

颜色

16的补码色调值，如果每两位的值相同，可以缩写为一半，例如：

#000000可简写为#000； #336699可以缩写为#369；

盒子尺寸

一般有四种写法：

属性：值1； 表示所有边的值都是value1；

属性：值1值2； 表示top和bottom的值为value1，right和left的值为value2

属性：值1值2值3； 表示top的值为value1，左右的值为value2，bottom的值为value3

属性：值1值2值3值4； 四个值依次代表top、right、bottom、left

一个方便的助记技巧是顺时针方向，从右上到左。 margin和padding的具体应用示例如下：

保证金：1em02em0.5em；

边界

边框的属性如下：

边框宽度：1px；

边框样式：实心；

边框颜色：#000；

可以简写成一句话：border:1pxsolid#000;

句型为border:widthstylecolor;

背景

背景的属性如​​下：

背景颜色：#f00；

背景图像：url（背景.gif）；

背景重复：不重复；

背景附件：固定；

背景位置：00；

可以缩写成一句话：background:#f00url(background.gif)no-repeatfixed00;

句型为background:colorimagerepeatattachmentposition;

可以省略一个或多个属性值，如果省略，属性值将使用浏览器默认值，默认值为：

颜色：透明

图片：无

重复：重复

附件：卷轴

位置：0%0%

字体

字体的属性如下：

字体样式：斜体；

字体变体：小型大写字母；

字体粗细：粗体；

字体大小：1em；

行高：140%；

字体系列：“Lucida Grande”，无衬线字体；

可以缩写为一句话：font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;

请注意，如果您缩写字体定义，则必须至少定义两个值font-size和font-family。

列表

要取消默认的点和序号，可以写list-style:none;

列表的属性如下：

列表样式类型：方形；

列表样式位置：内部；

列表样式图像：url(image.gif);

可以简写成一句话：list-style:squareinsideurl(image.gif);

4.明确定义单位，除非值为0

忘记定义规范的单位是 CSS 新手的一个常见错误。 在 HTML 中你可以只写 width=100，而在 CSS 中你必须给出一个精确的单位，例如：width:100pxwidth:100em。 只有两种情况无法定义单位：列宽和 0 值。 另外，其他数值必须跟在单位后面，注意，数值和单位之间不要加空格。

5.区分大小写

在 XHTML 中使用 CSS 时，CSS 中定义的元素名称区分大小写。 为了防止这些错误，我建议将所有定义名称大写。

class和id的值在HTML和XHTML中也是区分大小写的。 如果必须混合大小写书写，请仔细确认CSS中的定义与XHTML中的标签一致。

6、取消class、id之前的元素限制

当你为元素定义class或id时，可以省略后面的元素定义，因为id在一个页面中是唯一的，并且class可以在页面中多次使用。 对你来说限定一个元素是没有意义的。 例如：

div#id1{} 可以写成#id1{}

这节省了一些字节。

7. 默认值

一般情况下，padding和margin的默认值为0，background-color的默认值为透明。 并且默认值在不同的浏览器中可能会有所不同。 如果害怕冲突，可以在样式表开头将所有元素的 margin 和 padding 值定义为 0，如下所示：

*{

填充：0；

保证金：0

或者它是为元素定义的：

ul,li,div,span{

填充：0；

保证金：0

八、CSS的优先级

内联样式（inlinestyle） > ID选择器 > 样式（class）、伪类（pseudo-class）和属性（attribute）选择器 > 类别（type）、伪对象（pseudo-element）

解释：

*内联样式（inlinestyle）：元素的样式属性，例如color：red； 是内联样式

*ID选择器：元素的id属性，例如可以使用ID选择器#content

*伪类：最常见的是anchor(a)伪类，如a:link、a:visited。

*Attribute Selectors（属性选择器）：如div[class=demo]，富含类demo的div元素

*类别选择器（typeselector）：HTML标签选择，如div.demo，div元素下有很多class为demo的元素

* 伪元素选择器（pseudo-elementselector）：如div:first-letter，div元素下的第一个短语。

9. 无需重复定义可继承的值

CSS中，子元素手动继承父元素的属性值，比如颜色、字体等，这些属性值在父元素中已经定义好了，在子元素中可以直接继承，并且不存在需要重复定义，除非是改变当前元素的样式。 使用父元素的属性值，并注意浏览器可能会使用某些默认值覆盖您的定义。

10.多种CSS样式定义、属性添加和重复最后优先原则

一个标签可以同时定义多个类，也可以在同一个类中重复定义属性。 例如：

我们首先定义两种样式

.one{宽度:200px;背景:url(1.jpg)no-repeatlefttop;}

.two{边框：10pxsolid#000;背景：url(2.jpg)no-repeatlefttop;}

在页面代码中，我们可以这样调用：

那么这个div样式最终的显示效果是怎样的呢？ ？ 哪一个是重复的？ ？

应用的样式如下：

宽度：200px；

边框：10pxsolid#000；

背景：url(2.jpg)no-repeatlefttop;

因为，当应用两种或两种以上样式时，浏览器应用的样式是按照属性添加、重复最后优先的原则

也就是说，定义了两个或多个或重复的样式名，浏览器应用的样式是有序的。 如果定义了重复的属性值，则以最后定义为准。 如果应用了两个或多个样式名称css类名命名规则，则会添加上面定义的不重复的属性值，如果属性值重复，则以最后一个为准。 这里需要注意的是，样式的顺序不是页面上使用的名称的顺序，而是样式表中样式的顺序。

11.使用后代选择器

使用子选择器是阻碍其效率的因素之一。 子选择器可以帮助您保存大量的类定义。 我们看一下下面的代码：

此代码的 CSS 定义是：

div#subnavul{}

div#subnavulli.subnavitem{}

div#subnavulli.subnavitema.subnavitem{}

div#subnavulli.subnavitemselected{}

div#subnavulli.subnavitemselecteda.subnavitemselected{}

您可以将之前的代码替换为以下代码

样式定义为：

#子导航{}

#subnavli{}

#subnava{}

#子导航。 选择{}

#subnav.sela{}

使用子选择器可以使您的代码和 CSS 更加简洁且易于阅读。

如果一个容器中有多个相同的元素，但这些元素的样式不同，请避免使用此方法，建议使用不同的类，例如：

12.背景图片路径无需添加破折号

为了节省字节，我建议不要在背景图像路径中添加破折号，因为破折号不是必需的。 例如：

背景图像:url("图像

保证金：0自动；

然而，IE5/Win无法正确显示该定义。 我们使用一个特别有用的方法来解决它：使用text-align属性。 像这样：

身体{

文本对齐：居中；

＃裹{

宽度：760px；

保证金：0自动；

文本对齐：左对齐；

文本对齐：居中； 第一个body的规则定义了IE5/Win中body的所有元素居中（其他浏览器只将文本居中），第二个text-align:left; 是将#warp 中的文本左对齐。

13.导入和隐藏CSS

由于较旧的浏览器不支持 CSS，因此常见的做法是使用 @import 方法来隐藏 CSS。 例如：

@importurl(main.css);

不过这个方法对IE4不起作用css类名命名规则，让我一时间很头晕。 然后我用了这样的写法：

@importmain.css；

这样在IE4中也可以隐藏CSS了，呵呵，节省了5个字节。 @import句型的详细说明可以看这里的“centricle'scssfilterchart”

14. CSS 小屋

有时，你需要为IE浏览器的bug定义一些非常规则，CSS方法太多（hacks），我只使用其中两个，不管Google是否在正式发布的IE7测试版中更好地支持CSS，这两个哪些是最安全的。

1、标注方式

(a) 要在 IE 中隐藏 CSS 定义，可以使用子选择器：

html>正文{

(b) 下面的文字只能被IE浏览器看懂（其他浏览器隐藏）

*htmlp{

(c) 其他时候，您希望 IE/Win 有效而 IE/Mac 隐藏，可以使用反斜杠的方法：

*htmlp{

声明

(d) 下面的文字只能被IE7浏览器理解（对其他浏览器隐藏）

*+htmlp{

2. 条件注释的方式

另一种方式，我认为比CSSHacks更容易测试，是使用Google的私有属性条件注释（conditional comments）。 这样就可以单独为IE定义一些样式，而不影响主样式表的定义。 像这样：

还有更多的CSShacks你可以在网上搜索，而且有很多不符合w3c标准的hacks。 我根据上面的hacks写了一个可以区分IE6、IE7、FF的样式，但是可以符合w3c标准。 代码如下：

.classname{宽度：90px！重要；宽度：100px；}

*+html.classname{宽度:95px!重要;}

这样写后，宽度在IE6下为100px，IE7下为95px，Maxthon下为90px。

15、调试方法：层有多大？

当调试 CSS 时出现错误时，你必须像排版工人一样逐行分析 CSS 代码。 我通常在有问题的图层上定义背景颜色，这样图层占用的空间就很明显了。 有人建议使用border，这通常是可以的，但问题是有时border会降低元素的规格，border-top和boeder-bottom会破坏水平边距的值，所以使用background更安全。

另一个经常出现问题的属性是轮廓。 轮廓看起来像 boeder，但不影响元素的大小或位置。 只有少数浏览器支持 Outline 属性，据我所知，只有 Safari、OmniWeb 和 Opera。

十六、CSS代码编写风格

在编写CSS代码时，每个人对于缩进、换行、空格都有自己的书写习惯。 经过不断的练习，我决定采用以下的写作风格：

。班级名称{

宽度：100px；

使用联合定义时，我通常将每个选择器写在自己的行上，以便很容易在 CSS 文件中找到它们。 在最后一个选择器和大括号 { 之间添加一个空格，将每个定义写在单独的行上，并将分号直接放在属性值后面，而不添加空格。

我习惯在每个属性值前面加分号，虽然规则不允许最后一个属性值前面不加分号，但如果要添加新的样式，很容易忘记填写分号而导致错误，所以我还是补充一下更好。

最后，右花括号 } 自己写在一行上。 空格和换行符有助于阅读。