精通CSS(层叠样式单)语法请帮忙看看

最新推荐文章于 2024-08-24 00:02:10 发布

weixin_33696106

最新推荐文章于 2024-08-24 00:02:10 发布

阅读量88

点赞数

精通CSS(层叠样式单)语法请帮忙看看

在Web设计中，CSS(Cascading Style Sheet)其实是很熟悉的东西，不过在看一些复杂网页的CSS时，常常被一些莫名其妙写法搞得比较郁闷。于是在Google上翻啊翻，翻了一堆CSS的手册来看也没有彻底搞明白是怎么回事

。下面总结一下，希望能作为一个快速参考来对付那些"怪异"的CSS。

什么是"怪异"的CSS？比如这些：

< style >

.col, .col_wide

{

}{

border: 1px solid #ebf0fa;

}

.col_cap *, .mod_cap *

{

}{

cursor: move;

}

.col_head td, .col_head td a, .col_head td a:hover, .col_head td a:active

{

}{

background-color: #ebf0fa;

}

v\:*

{

}{

behavior: url(#default#VML);

}

#cbs, #cts

{

}{

text-align : left;

}

.sg, .sg*, .ad, .ad*

{

}{

color : #888888

}

.cb2#cft, .cb2#cfb

{

}{

display : none

}

div#nstext

{

}{

top: 0px;

}

</ style >

希望大家给于讲解并说说这么些用法有什么优点呢？

posted on 2005-03-14 20:16 birdshome 阅读(3978) 评论(30) 编辑收藏收藏至365Key 所属分类: Jscript&Dhtml开发

re: 精通CSS(层叠样式单)语法请帮忙看看

.col, .col_wide{} 这种表示两个样式名共用一个样式
#cbs表示和网页中的ID对应，例如#cbs表示设置id为cbs的样式<tag id="cbs">
.col_head td 这种表示这个样式只对td标签有效
behavior: url(#default#VML); 表示行为
div#nstext 表示id为nstext，并且标签为div的
* "可能"表示通配符

2005-03-14 21:21 |

re: 精通CSS(层叠样式单)语法请帮忙看看

恩，这个.col_head td a和.col_head td一样吗? CSS的Selector中空格有什么特殊含义吗？仅仅是分割？有什么顺序关序什么的说法吗？是不是td的Class还必须是"col_head"。

2005-03-14 21:26 |

re: 精通CSS(层叠样式单)语法请帮忙看看

.Text中也有用到类似的css语法，这里的.col_head td应该是指当你把某个td的class定义为"col_head"时，使用该段样式，否则该段样式不被采用，有点像层次化的结构。这种语法通常是用来保证整个网站样式统一才使用的，由于十分细化，因此可以满足统一样式的需要

2005-03-14 21:48 |

re: 精通CSS(层叠样式单)语法请帮忙看看

.xxx中的“.”是类选择符；#xxx中的“#”是ID选择符。

例如：
<div class="framed"></div>
在.css文件中表示为
.framed {
　　padding: 0;
　　/* 其它定义 */
}

<div id="title"></div>
<div class="framed"></div>
在.css文件中表示为
#title {
　　padding: 0;
　　margin: 0;
　　/* 其它定义 */
}

标准的CSS还有很多其它规则，可以下载苏沈小雨的《CSS 2.0手册》学习。那是我见过最好的学习手册了。

2005-03-14 22:29 |

re: 精通CSS(层叠样式单)语法请帮忙看看

.col_head td a:hover
就是表示如果一个td他的class是.col_head时,td里面的a:hover的样式是XXX

2005-03-14 22:33 |

re: 精通CSS(层叠样式单)语法请帮忙看看

@zsi
没有上面的一些情况吧，我看过。欢迎提供其他"怪异"的CSS写法，最好能说明其特别之处:)

2005-03-14 22:38 |

re: 精通CSS(层叠样式单)语法请帮忙看看

从外部CSS定义开始，到<style>再到style=""，后面的将把前面的覆盖。

那个怪异用好像只在ie中有。我只知道在下面有作用：

<table class="col_head">
<tr><td><a href="asdf4.htm">asdf4</a></td></tr>
</table>

2005-03-15 00:07 |

re: 精通CSS(层叠样式单)语法请帮忙看看

应该说类似上述情况吧。

2005-03-15 00:08 |

re: 精通CSS(层叠样式单)语法请帮忙看看

这里有很多

CSS 牵涉到不同浏览器的兼容性，要考虑能兼容多个浏览器的话这些小的 trick 非常多。

2005-03-15 00:16 |

re: 精通CSS(层叠样式单)语法请帮忙看看

2005-03-15 00:19 |

re: 精通CSS(层叠样式单)语法请帮忙看看

to：birdshome
我是否可以转载你的文章？

2005-03-15 00:21 |

re: 精通CSS(层叠样式单)语法请帮忙看看

@木野狐
非常感谢您的资料! 不过我暂时不是考虑兼容性，只想把IE弄明白:)

2005-03-15 00:23 |

re: 精通CSS(层叠样式单)语法请帮忙看看

@GirlSpicy
转到火星吗?!

2005-03-15 00:29 |

re: 精通CSS(层叠样式单)语法请帮忙看看

*
选定文档目录树（DOM）中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
目前IE5.5+尚不支持此种选择符。

2005-03-15 08:22 |

re: 精通CSS(层叠样式单)语法请帮忙看看

老兄，其实很简单，空格表示嵌套，比如.ccc td就表示ccc类中的td标签，如果是div td就表示div中的td标签。前面加.就表示类比如.ccc就表示class="ccc"，如果前面加#就表示id，如#ccc就表示针对id="ccc"的元素，如果前面没有修饰副则表示标签，比如div，这样就表示div标签。a:hover之类的表示a标签的几种状态

2005-03-15 08:27 |

re: 精通CSS(层叠样式单)语法请帮忙看看

to：birdshome
想往我的个人网站上转，还没转呢！

2005-03-15 08:39 |

re: 精通CSS(层叠样式单)语法请帮忙看看

<div class=div1>
...........
<a href="">123</a>
...........
</div>

请问怎么样对该div中的a添加CSS样式控制呢？

.div1 div a:link
好像不行啊？

2005-03-15 09:14 |

re: 精通CSS(层叠样式单)语法请帮忙看看

@fuyude
如果没记错的话，你这样写就行
div a:link

2005-03-15 09:27 |

re: 精通CSS(层叠样式单)语法请帮忙看看

@djshow
这个解释没有记错应该是苏沈小雨的css手册上说的，不过看完还是很puzzle@_@。

能解释上面那些条目的网友都很精通CSS的，能不能说说这些"怪异"用法的优点呢？难道只使用的.xxx和#xxx不能搞定了吗？

2005-03-15 10:41 |

re: 精通CSS(层叠样式单)语法请帮忙看看

在css标准中使用.XXX和#XXX是有原因的。
关于.XXX的用法，是在html中使用class属性直接使用，如
<div class="XXX"></div>
这个div标签中的class属性就必须定义为.XXX的样式。

而#XXX这样的样式是id选择器，如：
<div id="xxx"></div>
当html引用了一个.css文件时，并且css中含有#xxx这样的css样式，ie将自动把这个样式赋予这个div标记。

使用这两种样式指定方式的原因是使用方便。假如你的网站中的页头和页脚全部使用一种样式，那么就可以使用#XXX这样的方式指定样式，只要元素的id已经在css中定义，那么就可以保证整个网站的页头和页脚样式一致。

而.XXX是专门给一个元素要在使用中动态改变显示样式时使用的，如一个<div></div>元素，它包含有一个<span></span>元素，你设定span的正常显示是.CSSA，那么可以这样
<span class="CSSA">内容</span>
当用户执行一些操作时，可以将这个<span></span>元素隐藏，那么就必须更改这个span元素的css样式，那么就可以在客户端脚本中动态指定另一个css，如.CSSB，当用户操作时，只要代码正确，那么元素就自动隐藏起来了。

另外，你说的
<div id="DivA">
<a href="...">...</a>
</div>
这样的CSS使用，实际上很简单，CSS有一个过滤器，他可以使用这样的方法过滤，如上面的那个a链接：
#DivA a:link{...}
就是指定这个链接的样式，很简单的。

2005-03-15 11:33 |

re: 精通CSS(层叠样式单)语法请帮忙看看

to 笑望人生

3xs.

2005-03-15 12:22 |

re: 精通CSS(层叠样式单)语法请帮忙看看

样式表用的多了，你就会发现这些都会用到，在某些特殊的场合下，不用到也不行。当然一般还是class用的最多。

2005-03-16 09:14 |

re: 精通CSS(层叠样式单)语法请帮忙看看

我发个评论还要验证码！

2005-03-28 22:04 |

re: 精通CSS(层叠样式单)语法请帮忙看看

csdn那个blog还只让注册用户re，那才叫bt！
btw: 现在你在哪里还能看见不要验证码的匿名提交啊？

2005-03-28 22:52 |

请教高手

请问各位大虾，如何在服务器端动态调用CSS？

2005-09-09 14:30 |

re: 精通CSS(层叠样式单)语法请帮忙看看

随便找几个吓吓楼主

*:target{background-color:#yellow}
.infobox :link {text-decoration:none;}
a[href^=http]:after{content:url('img/extURL');}
#post_comment input[type=submit] { width: 7em; }
tr:nth-child(2n+1) { background-color: red; }

ps: css2 的东西，ie不一定全支持

2005-09-28 15:37 |