巧妙地使用CSS选择器_经验交流

可以通过不同规则来定义不同内容块里的链接样式。类似这样:#nav a:link或者 #main a:link或者#footer a:link。也可以定义不同内容块中相同元素的样式不一样。例如,通过#main p和#sider p分别定义#main p和#sider p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。 

  一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p 加一个CSS的text-indent规则就可以实现缩进目的。p是结构化标签,text-indent是表现属性,前者属于HTML,后者属于CSS。(这就是传说中的结构与表现相分离) 

  良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="778" cellpadding="3" border="0" align="center">,现在可以只在HTML中写<table id="MrJin">,所有控制表现的东西都写到CSS中去,在结构化的HTML中, table就是表格,而不是其他什么(更不能被用来布局和定位)。 

  当然,CSS选择器不只是这么简单,除了id还有class还有后代选择器,属性选择器等等。

时间: 2024-09-29 10:23:51

巧妙地使用CSS选择器_经验交流的相关文章

学习样式表CSS参考-常用的CSS知识_经验交流

1. Block和inline元素对比 所有的HTML元素都属于block和inline之一. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度

不错的10个你未必知道的CSS技巧_经验交流

本翻译并未得到作者或网站授权.一切权利都归原作者及原网站所有. 如果你得到原作者或原发表网站的授权,可以自由使用本翻译. 1.CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去: font: bold 

不错的整理的24则css技巧_经验交流

虽然在许多的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错.我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以进行搜索,扩展您所想要得到的知识,相信您会有很多收获!  一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值.  二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class

css强制换行 css强制不换行的css方法_经验交流

以前总结过Div的换行和不换行的css写法.但对于表格单元格只知道一个属性nowrap可以使其不换行. 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? baidu了一下,令俺非常欣慰,还真的找到了办法,问题解决了. 用CSS实现表格单元格数据自动换行或不换行 1.自动换行: 自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行

解决IE6 3像素Bug的css写法_经验交流

只要触发IE的hasLayout,非浮动元素就会拥有布局.所以,利用IE6特有的hack规则,为它单独写样式就可修复此问题: _zoom:1; margin-left: value; _margin-left: value-3px; zoom 是IE触发Layout条件之一,因为它是IE特有的CSS规则,所以采用zoom. margin-left: value-3px 是修复IE6 中3px 的bug. 此前采用非浮动元素也浮动的方法修复bug,现在我们可以试试这个新的方法了! 注:前面的下划线

又一个典型css实例_经验交流

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

CSS锦囊_经验交流

翻译:onestab [2004.03.09]原文:mezzoblue CSS Crib Sheet 在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额.本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考. 如果您有所补充,请在这里发表您的意见. 本文的其他语言版:法语, 德语, 西班牙语 和 匈牙利语. 欢迎提供其他翻译. 有疑问,先验证    在调试时,先对您的代码进行验证往往能省去不少麻烦事.格式不正确的XHTML/CSS 会导致许多布局上的错误.

几个常用经典的css技巧_经验交流

使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里. 清除容器浮动 #main { overflow:hidden; } 期前也提到过这样的问题,更多信息可以看这里. 不让链接折行 a { white-space:nowrap; } 上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录). 始终让 F

字符不会撑大表格的常见css样式_经验交流

 我现在就碰到了这样的麻烦,请问高手,有没有解决的方法,可以做到不管是纯粹的输入中文还是输入英文,或者是中英字符混输,都不会将表格撑宽?就是这几个相关css: table-layput:fixed;word-wrap:break-wrod;word-break:break-all;