有利于搜索引擎优化的div+CSS命名规则摘要

I.CSS文件和样式命名

1. CSS文件命名规则

全球风格：global.css;

框架布局：布局规则;

Font.css;

链接样式：link.css;

印刷风格：打印样式;

2. CSS样式命名规则

我的建议：它可能由字母，符号，-符号和数字组成。它必须以字母开头，不能是纯粹的数字。为了便于开发后的样式名称管理青岛seo，请使用有意义的单词或缩写对其进行命名，以便同事能够理解哪种样式，这样可以节省搜索样式的时间，例如：

标题样式使用标题，标题左侧的标题或标题左侧的标题，以及--box 1of3（三列中的第一列）（如果使用列结构），框F3（三列中的第二列）和box 3of3（三列中的第三列）。我不会为他人树立榜样。只需按照上述规则命名。

以下列出了一些常用的命名词，以方便您使用：（将来，您将在工作中逐渐分享您积累的单词，以便您的生活更加统一，不再有单词。）

容器：容器/盒子

标题：标题

主要飞行员：mainnav

子飞行员：subnav

顶部导航：topnav

网站标志：徽标

公告：banner

中央页面：mainbody

背景：页脚

菜单

菜单内容：Menu content

子菜单：子菜单

子菜单内容：Sub menu content

搜索：搜索

搜索关键字：关键字

搜索范围：范围

标签文本：tagtitle 165

标签内容：标签内容

当前标签：Tag Current/Current Tag 177

标题：标题

内容

列表：列表

当前位置：currentpath

侧栏：侧栏

图标

注意：注意

登录：登录

注意：注册

列定义：列_1of3（三列中的第一列）

Column53f3（三列中的第二列）

Column_3of3（三列中的第三列）

二。ID和class的使用和区别

我们知道，当样式表定义样式时，可以定义ID或类，例如：

Id方法：##test{color：##333333}。Call

content

在页面上。

类方法：。测试{color:#333333}。在页面上，call

content

ID：页面只能使用一次，并且可以多次引用该类。

我在页面上使用了多个相同的ID来正常显示它们，即ID和类似乎没有区别。多个相同ID的影响是什么？

W3验证失败，因为页面上存在多个相同的ID。

在页面显示上青岛seo，当前浏览器允许您犯此错误。它也可以使用多个相同的ID正常显示。但是当您需要使用JavaScript通过ID控制此Div时，将会发生错误。

ID是一个标签，用于区分不同的结构和内容，就像您的名字一样。如果一个房间里有两个人有相同的名字，他们会感到困惑;

一个班级是一种可以嵌入任何结构或内容的风格，就像一件衣服一样;

概念不同：

ID是首先查找结构/内容，然后定义样式;类是首先定义样式，然后设置为多个结构/内容。

也就是说，如果维度1的结构位于其中，我们建议您在编写xhml+CSS时使用ID;否则，使用类（以便为非结构化Div块的ID提供由用户）

Web标准旨在严格写入习惯.

Iii.使用CSS缩写

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

Color

hexadecimal颜色值。如果两个值相同，则可以将它们缩写为一半。例如：

#000000可以缩写为#000;#336699可以缩写为#369;

盒子大小

通常有四种写作方法：

属性：value1;表示所有边均为value1;

属性：value1 value2;顶部和底部的值为value1，左右值为value2。

属性：value1 value2 value3;表示顶部值为value1，右侧和左侧值为value2，底部值为value3。

属性：value1 value2 value3 value4;四个值依次代表顶部，右侧，底部，左侧

易于记忆是顺时针的，右上角左下角。边距和填充的具体应用示例如下：

保证金：1em 0 2em 0.5em;

边界（边界）

边界属性如下：

边框宽度：1px;

边框样式：坚实;

边框颜色：#000;

它可以缩写为border:1px solid#000;

语法：边框：宽度样式颜色;

背景（背景）

背景的属性如下：

背景颜色：#f00;

背景图像：url(background.gif);

背景重复：无重复;

背景附件：固定;

背景位置：0 0;

可以缩写为：Background:#f00 url(background.gif)没有重复固定0 0;

语法是Background:彩色图像重复附件位置;507

您可以省略一个或多个属性值。如果省略此属性值，则使用浏览器的默认值。默认值是：

颜色：透明

图片：无

重复：重复

附件：滚动

职位：0%0%

字体）

字体属性如下：

字体样式：斜体;

字体变体：小帽;

字体重量：粗体;

字体大小：1em;

Line-Height:140%;

Font-family:"lucida Grande"#，sans-serif;

它可以缩写为：字体：斜体小字体粗体1em/140%"lucida Grande"，无衬线;

注意：如果字体定义简短，则至少必须定义字体大小和字体系列值。

列表（列表）

要取消默认的点和序列号，您可以写入列表样式：无;

列表属性如下：

列表样式类型：正方形;

列表样式位置：内部;

列表样式图像：url(图片);

可以缩写为：列表样式：url内部的正方形(图片);

有关更多属性编写，请参阅CSS样式手册，在线手册地址：http://www.jb51.net/css/

4. 除非值为0，否则定义单位。

忘记定义大小的单元对于CSS初学者来说是一个常见的错误。在HTML中，您只能写入width=100，但在CSS中，您必须给出一个准确的单位，例如width:100px width:100em。只有两个例外。该单位未定义：行高和0值。其他值必须跟随该单位。请注意，不要在值和单位之间添加空格。

V.案件敏感

在XHTML中使用CSS时，CSS中定义的元素名称区分大小写。为避免此错误，我们建议所有定义名称均应使用小写字母。

类和ID的值在HTML和XHTML中也是区分大小写的。如果必须将它们与大写和小写组合使用，请确保CSS定义与XHTML中的标签一致。

6. 在class和ID

之前取消元素限制

当您编写一个元素来定义一个类或ID时，您可以省略以前的元素限制，因为ID在页面中是唯一的，并且该类可以在页面上多次使用。限制一个元素是没有意义的。例如：

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

这样可以节省一些字节。

7. 默认值

通常，填充和边距的默认值为0，并且背景颜色的默认值是透明的。但是，不同浏览器中的默认值可能不同。如果存在冲突，您可以首先定义所有元素的边距和填充值在样式表的开头为0，如以下代码所示：

*{

填充：0;

保证金：0

}

或定义元素：

Ul，Li，Div，span{

填充：0;

保证金：0

}

 

八。CSS优先级

内联样式和gt;ID选择器和gt;类，伪类和属性选择器和gt;类型），伪对象（伪元素）

解释：

*内联样式：元素的样式属性，例如

。颜色：红色是内联样式。

*ID选择器：指定元素的ID属性。例如，您可以使用ID选择器#内容。

*伪类：最常见的是锚点（a）的伪类，例如a：链接，a：已访问。

*属性选择器：例如，div[class=demo]包含其类为demo的div元素。

*类型选择器：HTML标签选择，例如Div.Demo。DIV元素包含其类为demo的元素。

*伪对象选择器：例如div：第一个字母，div元素下的第一个单词。

9. 不需要重复定义可以继承的值

在CSS中，子元素自动继承父元素的属性值，例如颜色和字体。在父元素中定义，子元素可以直接继承而无需重复定义，除非父元素的属性值未用于更改当前元素样式，请注意，浏览器可能会用某些默认值覆盖定义。

10. 多个CSS样式定义，以及添加重复属性的最终优先级原则

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

Let's首先定义两种样式

. 一{width:200px;Background:URL(http://www.jb51.net/1.jpg)没有重复左上;}

. Two{border:10px solid#000;Background:URL(http://www.jb51.net/2.jpg)没有重复左上;}

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

那么这种Div样式的最终显示效果是什么？？重复哪一个？？

应用的样式如下：

宽度：200px;

Border:10px solid#000;

背景：URL(http://www.jb51.net/2.jpg)没有重复左上角;

因为当应用两种或更多种样式时，浏览器应用的样式基于重复属性附加的最终优先级原则。

也就是说，定义了两个或多个样式名称。浏览器应用的样式是顺序的。如果定义了重复的属性值，请参考最后的定义，如果应用了两个或多个样式名称，则会附加未重复定义的属性值，并且重复的属性值将受制于最后一个。请注意，样式的顺序不是页面上应用程序名称的顺序，而是样式表中的样式顺序。

11. 后代选择器）

使用儿童选择器是影响其效率的原因之一。子选择器可以帮助您保存大量的类定义。让'看看以下代码：

• Item 1

• Item 1

• Item 1

此代码的CSS定义为：

Div#subnav ul{}

Div#subnav ul Li。subnavitem{}

Div#subnav ul Li。subnavitem A.subnavitem{}

Div#subnav ul Li。subnavitemselected{}

Div#subnav ul Li。subnavitemselected A.subnavitemselected{}

您可以使用以下方法替换上述代码

• "项目1

• "项目1

• "项目1

样式定义为：

#Subnav{}

#Subnav Li{}

#Subnav{}

#Subnav。Sel{}

#Subnav。Sel{}

使用子选择器可以使代码和CS更简洁，更易于阅读。

如果容器包含多个相同的元素并且这些元素样式不同，请避免使用此方法创建不同的类，例如：

12. 不要引用背景图像路径1119

为了减少字节数，我们建议您不要引用背景图像的路径，因为不需要引号。例如：

背景图像：URL（"图像

边距：0自动;

}

但是，ie5/win无**确显示此定义。我们使用一种非常有用的技术来解决这个问题：使用text-align属性。就像这样：

身体{

文本对齐：中心;

}

##Wrap{

宽度：760px;

保证金：0自动;

文本对齐：左;

}

文本对齐：第一个主体的中心。该规则定义ie5/win中的身体所有元素都居中（其他浏览器仅将文本居中），第二个文本对齐：左;将文本置于#warp的左侧。

17. 导入和隐藏CSS

因为旧版本的浏览器不支持CSS，所以通常的做法是使用@import技术来隐藏CSS。例如：

@导入url(main.css);

但是，这种方法不适用于ie4，这让我头痛了一段时间。后来我使用了以下陈述：

@导入main.css;

这样，CS可以隐藏在ie4中，并保存5字节。有关@import语法的更多信息，请参阅centricle's CSS过滤器图表。

18. CSS-hack

有时，您需要为IE浏览器错误定义一些特殊规则。这里有太多CSS技能（**）。我只使用它们中的任何一个，无论Microsoft是否能够在即将到来的IE7 beta版本中更好地支持CSS，这两种方法都是最安全的。

1. 注释方法

（A）隐藏CSS定义，即可以使用子选择器）：

HTML>body P{

 

}

（B）以下陈述只能被IE理解（隐藏在其他浏览器中）

*Html p{

 

}

（C）有时您希望IE/win在IE/MAC隐藏时有效。您可以使用反睫毛技术：

 

*Html p{

声明

}

 

（D）以下声明只能由IE 7浏览器（从其他浏览器隐藏）理解

*+Html p{

 

}

2. 有条件的评论

我认为另一种方法优于CSS hacks，即使用Microsoft's专有属性条件注释）。使用此方法，您可以为IE定义某些样式，而不会影响主样式表的定义。就像这样：

<！--[如果IE]>

<！[Endif]->

可以在Internet上找到更多CSS-hack文件。但是，许多hack文件不符合W3C标准，基于上述hack，我编写了一种可以区分IE6，IE7和ff的样式，并且可以符合W3C标准。代码如下：

. Classname{width:90px！重要;宽度：100px;}

*+Html。classname{width:95px！重要;}

这样，IE6的宽度为PX，IE7的宽度为95px，Firefox的宽度为90px。

19. 调试技巧：该层有多大？

当发生CSS调试错误时，您需要像印刷工程师一样逐行分析CSS代码。我通常在有问题的图层上定义背景颜色，因此很明显该图层占据了很多空间。有些人建议使用边界，这通常是可以接受的，但问题是有时边界会增加元素s尺寸。边框顶部和boeder底部会破坏垂直边距值，因此使用背景更安全。

另一个经常出现问题的属性是大纲。轮廓看起来像一个boeder，但不影响元素的大小或位置。只有少数浏览器支持outline属性。我所知道的是safari，omniweb和opera。

20. CSS代码写作风格

编写CSS代码时，每个人都有编写缩进，虚线和空格的习惯。经过不断的练习，我决定采用以下写作风格：

. Classname{

宽度：100px;

}

使用联合定义时，我通常为每个选择器写一行，以便在CSS文件中找到它们。在最后一个选择器和大括号之间添加一个空格{，每个定义也分别写入一行。分号直接在属性值之后不添加空格。

我曾经在每个属性值之后添加点。尽管该规则允许最后一个属性值后跟分号，但如果要添加新样式，则很容易忘记添加分号以生成错误，因此最好同时添加两者。

最后，关闭大括号}写出一行。空间和线路饲料帮助和阅读

 

内容来自：脚本主页www.jb51.net