文章标签 ‘css’
等了2天还没有结果，估计够呛了，怨天尤人也没有用，还是要让自己变的更加强大。碰到的一些问题和一些个人理解，会陆续在BLOG上公布出来。
题目:
.a .c{ color:blue; }
.b .c{ color:red; }
<div class=”a”>
<div class=”b”>
<div class=”c”>
just a test!
</div>
</div>
</div>
just a test! 文字部分显示何种颜色?
———————————————————————————
当时由于从来没有考虑过这样的情况存在，便根据我对CSS的了解猜了red，
理由是，后定义的样式应该覆盖先定义的样式。
———————————————————————————
回来的时候，查询了一下CSS对样式特异性的一些规则：
CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则：
1. 元素的 style 样式属性，加 1,0,0,0。
2. 每个 ID 选择符（#id），加 0,1,0,0。
3. 每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
4. 每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
5. 其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。
最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。
除了 Specificity 还有一些其他规则：
1. !important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
2. 如果优先权一样，则按源码中“后来者居上”的原则。
3. 由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。
如下表：
|
选择符 |
特性值 |
| h1 {color:blue;} | 1 |
| p em {color:purple;} | 1+1=2 |
| .apple {color:red;} | 10 |
| p.bright {color:yellow;} | 1+10=11 |
| p.bright em.dark {color:brown;} | 1+10+1+10=22 |
| #id316 {color:yellow} | 100 |
通过上面，就可以很简单的看出，HTML标记的权重是1，CLASS的权重是10,ID的权重是100，继承的权重为0。
———————————————————————————
解释：
我认为题目中应该这样理解，根据Specificity计算.a .c的特性值为20，而.b .c的特性值也为20，那么根据“后来者居上”的原则原则，文字部分的颜色应该为 red。
全是个人理解，如有更好的解释请告诉我，谢谢了。
———————————————————————————
参考资料:
http://www.blueidea.com/tech/web/2009/6801.asp
http://www.planabc.net/2008/05/06/css_specificity/
和程序员探讨了一整个下午，其实有些事情是不容置疑的，但是我却也解释不出来，乘着周末，适当的总结一下：
程序员的观点更偏向于程序，要求把所有的样式写到一个文件中，以便于使用统一的MasterPage，方便以后程序代码的管理，殊不知，样式写在同一个文件中，会有这样的问题：
1。样式表里的代码混乱，随着项目的进展，前面写的样式不敢有任何改变，几百个页面的的网站，谁知道改动一些会造成什么样的后果，而且在项目进行中的时候，也要每修改一个地方，整个全部的项目页面都要重新测试过，IE6、IE7、FF等等等等，非常耽误时间。
2。样式表的文件体积越来越大，一个页面即使没有用到大多数的样式，但仍然只能引用所有的样式，在没有缓存的情况下，加载页面有延时。
3。样式表里的代码过多，维护极度不易，所有的选择器，类型全部混在一起，可能会上下重复或不一致。
4。其他一些未被发现的问题。
我更偏向于这样的样式管理：
分开模板级的和应用级的。使用:
common.css 管理基础的，整站都必须使用的样式，例如:css reset等
layout.css 布局的，框架布局的样式，不需要改变布局的情况下，这个文件就始终不用动
global.css 颜色，边框等样式
forms.css 表单级的样式，一些常用表单的布局和样式，以方便修改表单的展示风格
index.css 主页的样式，一般大型的网站首页都拥有着和其他内容不同风格的样式，可能会覆盖上面global.css里面的一些样式
print.css 打印样式
突然想到曾经送给原公司一位新来同事的一本书: 《CSS Mastery》，好像其中也有一章介绍如何组织CSS的，如果你想研究请步移: http://www.cnblogs.com/JustinYoung/articles/763052.html
再谈一下我的个人想法，算是抛砖引玉：
1。权威的理论支持，好处不言而喻
2。低耦合，方便分离和组合
3。修改方便，很容易找到你想修改的部分
4。最坏的是就算修改错了某一部分，只要不修改框架布局，整体页面布局也不会变的一塌糊涂。
谁有更好的组织方式，请赐教。
在 巧用负margin实现导航菜单分割符 一文中,也提到过会有这个技巧,现在文章送上!
通常在制作积分排行的时候,都是会把排名的图片切成一张一张的,然后通过程序判断顺序,以实现在不同的名次前面显示不同的排名图片!这里介绍的是,通过CSS的方式简化程序的判断,让程序员把更多时间留给业务逻辑!
本方法的核心思路就是,利用一张已经写好序列的背景图作为背景实现的,如下:
演示: 排名的另外一中展示形式
代码如下:
.paihang {
background:#000;
width:178px;
background:url(images/no_list_bg_1.gif) 8px 1px repeat-y;
}
.paihang dl {
width:190px;
background:url(images/no_list_1.gif) 8px 0px no-repeat;
display:block;
clear:both;
}
.paihang dl dd {
height:23px;
width:190px;
display:block;
clear:both;
padding-top:7px;
margin:0px 4px 0px 4px;
background: url(images/hr_1.gif) center bottom repeat-x;
}
.paihang dl dd .name {
float:left;
margin-left:28px;
}
.paihang dl dd .jifen {
float:right;
width:60px;
text-align:left;
font-size:10px;
color:#339933;
}
<div class="paihang">
<dl>
<dd><span class="name"> <a href="#">admin</a></span><span class="jifen"><img src="images/ico_23.gif" /> 10000</span></dd>
<dd><span class="name"> <a href="#">user1</a></span><span class="jifen"><img src="images/ico_23.gif" /> 100</span></dd>
<dd><span class="name"> <a href="#">user2</a></span><span class="jifen"><img src="images/ico_23.gif" /> 100</span></dd>
<dd><span class="name"> <a href="#">user3</a></span><span class="jifen"><img src="images/ico_23.gif" /> 100</span></dd>
<dd><span class="name"> <a href="#">user4</a></span><span class="jifen"><img src="images/ico_23.gif" /> 100</span></dd>
<dd><span class="name"> <a href="#">user5</a></span><span class="jifen"><img src="images/ico_23.gif" /> 100</span></dd>
<dd><span class="name"> <a href="#">user6</a></span><span class="jifen"><img src="images/ico_23.gif" /> 100</span></dd>
</dl>
</div>
最近比较忙,一直在处理某医院CMS整站的布局问题,多而繁杂,确实没有实际操作过大站CSS+DIV的经验,由于每个页面均不同,目前我是这样操作的:
1. reset.css 这个不用解释
2. global.css 全局样式,其中包括字体,颜色,以及LayOut中的共同部分,如:header,footer,sidebar等等
3. 独立样式文件 所有页面中不同的部分被放到这个文件里,并且样式文件名和页面文件相同
这是我能想到最好的处理方式了,如果哪位大人有更好的建议,请赐教!
某CMS里面能安装许多插件,为了让程序少写点代码,决定研究之,页面代码部分尽量和原插件提供的一样,这样程序员就可以直接CTRL+C了!也顺便学习一下高人的代码嘛!目前工作部分已经完成,总结学习结果如下:
1. 巧用负margin实现导航菜单分割符
2. 排名的另外一种展示形式
这里先说”巧用负margin实现导航菜单分割符”,先看效果:
我的处理方式,一般会在最后一个链接作文章,例如:
<div id=”menu”>
<a href=”#">栏目1</a>
<a href=”#">栏目2</a>
<a href=”#">栏目3</a>
<a href=”#">栏目4</a><a href=”#">栏目5</a>
<a href=”#" class=”last”>栏目6</a>
</div>
让.last不显示背景或者不显示边框来实现最后一个栏目没有分割符号,而看到的方法是用了负margin来实现,大致思路如下图:
代码如下:
.sitenav {
height:29px;
overflow:hidden;
}
.sitenav ul {
overflow:hidden;
float:left;
margin:8px 10px auto;
display:inline;
list-style:none;
}
.sitenav ul li {
float:left;
margin-left:-1px;
border-left:1px solid #E3E3E3;
}
.sitenav ul li a {
float:left;
padding-left:10px;
padding-right:10px;
display:block;
color:#666666;
height:13px;
text-decoration:none;
white-space:nowrap;
}
.sitenav ul li a:hover {
color:#FF3300;
}
本来不习惯在上班的时候写Blog的,只是今天看到我们的一个设计师制作出来的的CSS文档例如:
.ben1{ width:700px; padding:10px 0 0 0; text-align:left;}
.compay_ind{ background:#282828; padding:15px; }
.online1{ background:#282828; float:left; }
.img2{ padding:5px 0 0 0;}
.font1{ color:#f1b603; font-weight:bold; font-size:13px;}
.img3{ float:left; padding:0 10px 0 0;}
.more{ display:block; float:right;}
.pro_tit{ margin:10px auto 0; }
.pro_ben{ width:950px; margin:5px auto;}
.pro_img1,.pro_img2,.pro_img3,.pro_img4{ float:left; text-align:center; }
.pro_img1{background:#282828; margin:2px; display:inline; }
.pro_img3{background:#1c1c1c; margin:10px 10px 0 10px; display:inline;}
.pro_img4{background:#000; margin:10px 10px 0 10px; display:inline;}
.font2{ line-height:24px; color:#cbcbcb;}
.font3{ line-height:24px; color:#ffea00; font-weight:bold;}
.ben2{ margin:10px 0 0 0; height:50px; background:#fff; }
.img4{ margin:10px 0 0 20px;}
看的我头相当的大,这样就不得不让我想起重新提一下CSS中的命名.
软件工程的命名法通常有下面三种,这是多年来专业人士的实践经验累积,CSS虽然不是编程语言,但是足可以借鉴其中的命名法:
1. 匈牙利命名法
听说是MS的程序员Charles Simonyi(查尔斯西蒙尼)最新提出来的,并广泛应用在MS WIN编程中…
写法: 它是通过在变量名前加上相应的小写字母符号作为前缀,标识出变量的作用域,类型等!
例如: pfnSmartDog, pfn类型描述,表示指向函数的指针,SmartDog对变量的描述,所以它表示指向SmartDog函数的函数指针变量.
2. 骆驼式命名法
在很多新的语言环境下用的比较多,但是历史无法追溯了.
写法: 规定每一个单词首字母应使用大写字母来标记,但名称的首字母要小写.
例如: myFunction
还有一种下划线的衍生: my_Function
3. 帕斯卡命名法
写法: 和骆驼式命名法类似,只是第一个单子字母为大写.
例如: MyFunction
其实本人习惯于几种情况的结合,变量使用: strTempalte, GetCommInfo等等
正所谓没有规矩不成方圆,CSS命名规则应该遵循一定的规则,所以团队合作,修改,维护通通会碰到问题!
1. 要区分大小写,尽量使用小写,特殊单词首字母可以大写!
2. 要注意命名合法性,字母开头,后面可以接数字,字母,下划线等等!
3. 要反映出用途和相关信息,绝对不能使用上文中的XX1,XX2,XX3!
说了这么多,那么CSS命名有几种方法呢?据我所知,以下二种比较常用:
1. 语义化
id=”left-side”
id=”center-column”
.red{ color:red; }
.f12{ font-size:12px; }
.left{ float:left; }
2. 结构化
id=”navbar”
id=”sidebar”
id=”sub_nav”
下面提供几个常用的布局名称:
wrap/wrapper container site nav columns
layout sidebar logo banner toolbar
header footer homepage title current
summary msg textbox tips btn
arr/arrow
文件类型:
master.css 主布局文件 themes.css 主题文件 layout.css 布局和版式文件
base.css 基本公共文件 font.css 字体文件 forms.css 表单文件
print.css 打印样式文件 mend.css 补丁文件
其实,上面的一些名称提示,不单纯的可以用在布局上,如果你用它来命名图片的话,也不错的!
#header{ background:#474747; height:147px; width:100%; }
#top{ padding:18px 0 0 0 ; }
#top img{ margin:0; padding:0; border:0;}
#headerpanel{ width:940px; height:95px; }
#headerpanel img{ margin:0 0 0 40px;padding:0; }
#menu{ padding-top:37px; }
#menu ul{ text-align:center; list-style:none; margin:0; padding:0 0 0 124px; }
#menu ul li{ display:inline; margin:0; padding:0; }
#menu ul li a{ display:block; float:left; width:98px; }
#menu ul li .menulast{ width:97px; }
#menu ul #active a{ background:url(../../images/menubgactive.gif) no-repeat; }
上面是我的一些写法,可能也不完全按照所介绍的规则来的,还请高手指正一二!