官方微博: 腾讯  
首页 > ECSHOP教程 > ECSHOP二次开发 > 其他ECSHOP教程 > [CSS基础学习一]整理简单的统一CSS命名规则

[CSS基础学习一]整理简单的统一CSS命名规则

ECSHOP教程 / ecshop 教程网(www.ecshop119.com) 2012-05-27

一、CSS文件及样式命名

1、CSS文件命名规范

全局样式:global.css;

框架布局:layout.css;

字体样式:font.css;

链接样式:link.css;

打印样式:print.css;

 

2、CSS样式命名规范

容 器:container/box

头 部:header

主 导 航:mainNav

子 导 航:subNav

顶 导 航:topNav

网站标志:logo

大 广 告:banner

页面中部:mainBody

底 部:footer

菜 单:menu

菜单内容:menuContent

子 菜 单:subMenu

子菜单内容:subMenuContent

搜 索:search

搜索关键字:keyword

搜索范围:range

标签文字:tagTitle

标签内容:tagContent

当前标签:tagCurrent/currentTag

标  题:title

内 容:content

列 表:list

当前位置:currentPath

侧 边 栏:sidebar

图 标:icon

注 释:note

登 录:login

注 册:register

列 定 义:column_1of3 (三列中的第一列)

column_2of3 (三列中的第二列)

column_3of3 (三列中的第三列)

 

二、id和class的使用及区别

ID方法:#iytang{color:#333333},在页面中调用<div id="iytang">内容<div>

CLASS方法:.iytang{color:#333333},在页面中调用<div class="ityang">内容<div>

id一个页面只可以使用一次,class可以多次引用。

我在页面中用了多个相同id在IE中显示也正常,id和class好象没什么区别,用多个相同id有什么影响吗?

页面存在多个相同的ID影响就是不能通过W3的校验,JS用到多个ID就会错误!

三.使用css缩写

1、margin:1em 0 2em 0.5em; 分别是外边距上、右、下、左;

2、边框:border:1px solid #000;,是border-width:1px;border-style:solid;border-color:#000;的缩写;

3、背景:background:#f00 url(background.gif) no-repeat fixed 0 0;

4、字体:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

5、列表:取消默认的圆点和序号可以这样写list-style:none;

 

四、区分大小写

当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

五、CSS的优先级
行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属性(attribute)选择符 > 类别(type),伪对象(pseudo-element)

解释:

*内联样式(inline style):元素的style属性,比如 <div style="color:red;"></div> ,其中的color:red;就是行内样式

*ID选择符:元素的id属性,比如 <div id="content"></div> 可以用ID选择符#content

*伪类(pseudo-class):最常见的是锚(a)伪类,比如a:link,a:visited.

*属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素

*类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素

*伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第一个单词。

 

六.多重CSS样式定义,属性追加重复最后优先原则

一个标签可以同时定义多个class,也可以是同一个class中重复定义属性。例如:

我们先定义两个样式

.one{width:200px;}

.two{border:10px solid #000;}

在页面代码中,我们可以这样调用:

<div class=one two></div>最后优先原则;

七.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

@import url(main.css);

然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法:

@import main.css;

这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。想了解@import语法的详细说明,可以看这里《centricle’s css filter chart》

八、CSS hack

1.注释的方法
(a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector):

html>body p {

}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {

}

(c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用反斜线技巧:

* html p {

declarations

}

(d)下面这个写法只有IE7浏览器可以理解(对其他浏览器都隐藏)

*+ html p {

}

2.条件注释(conditional comments)的方法
另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:

<!--[if IE]>

<link rel=stylesheet type=text/css href="http://www.ecshop119.com/style/ie.css" />

<![endif]-->

还有更多的CSS hack大家可以通过网上找找,但是有很多hack都是不符合w3c标准的,本人根据以上的hack写了一个能区分IE6、IE7、FF的样式,而且可以符合w3c标准,代码如下:

.classname {width:90px!important;width:100px;}

*+html .classname {width:95px!important;}

这样写后在IE6下宽是100px,IE7下是95px,火狐下是90px。

转载请注明:ECshop119模板屋-ECshop教程网(全国最专业的ECSHOP插件制作商-专业ECSHOP二次开发)

帮助目录

在线反馈

可以将问题或建议反馈给我们。

提交在线反馈

与网友交流ECSHOP开发修改。

加入QQ群交流