马克斯maxcmsCSS超详细解释.docVIP

最近又下雨，在公司太无聊了。整理了一些关于div+css的参考资料和大家分享，希望对你能有所帮助。几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好ol 有序列表。12345表现为：112233ul 无序列表，表现为li前面是大圆点而不是1231234很多人容易忽略 dl dt dd的用法dl 内容块dt 内容块的标题dd 内容可以这么写：12标题34内容15内容267dt 和dd中可以再加入 ol ul li和p理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，就需要统一class与id的名称，前天花了一点时间，按照大多人的习惯，制定了下面的常用关键字：容 器：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 (三列中的第三列)代码精简使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。表格的嵌套问题搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。而DIVCSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。搜索引擎优化及营销都是非常有利的。搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但樂思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。内容来自中国站长资讯网()我想，这样的情况可能不是排名规则，最大的可能还是spider爬行网站时，出现以上差异导致收录质量的不同。毕竟廖胜于无，建议建站或改版的朋友们，技术许可的情况下，还是选择DIVCSS布局为好。CSS布局常用的方法：float:none|left|right取值：none:默认值。对象不飘浮left:文本流向对象的右边right:文本流向对象的左边它是怎样工作的，看个一行两列的例子xhtml:12这里是第一列3这里是第二列45CSS:1#wrapwidth:100;height:auto;2#column1float:left;width:40;3#column2float:right;width:60;4.clearclear:both;1position:static|absolute|fixed|relative取值：static:默认值。无特殊定位，对象遵循HTML定位规则absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范relative:对象不可层叠，但将依据 left，right，top，bottom等属性在正常文档流中偏移位置它来实现一行两列的例子xhtml:12这里是第一列3这里是第二列4CSS:1#wrapposition:relative;width:770px;2#column1position:absolute;top:0;left:0;width:300px;3#column2position:absolute;top:0;right:0;width:470px;他们的区别在哪?显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是 float布局！CSS常用布局实例单行一列1bodymargin:0px;padding:0px;text-align:center;2#contentmargin-left:auto;margin-right:auto;width:400px;两行一列1bodymargin:0px;padding:0px;text-align:center;2#content-topmargin-left:auto;margin-right:auto;width:400px;3#content-endmargin-left:auto;margin-right:auto;width:400px;三行一列1bodymargin:0px;padding:0px;text-align:center;2#content-topmargin-left:auto;margin-right:auto;width:400px;width:370px;3#content-midmargin-left:auto;margin-right:auto;width:400px;4#content-endmargin-left:auto;margin-right:auto;width:400px;单行两列1#bodycenterwidth:700px;margin-right:auto;margin-left:auto;overflow:auto;2#bodycenter#dv1float:left;width:280px;3#bodycenter#dv2float:right;width:420px;两行两列1#headerwidth:700px;margin-right:auto;margin-left:auto;overflow:auto;2#bodycenterwidth:700px;margin-right:auto;margin-left:auto;overflow:auto;3#bodycenter#dv1float:left;width:280px;4#bodycenter#dv2float:right;width:420px;三行两列1#headerwidth:700px;margin-right:auto;margin-left:auto;2#bodycenterwidth:700px;margin-right:auto;margin-left:auto;3#bodycenter#dv1float:left;width:280px;4#bodycenter#dv2float:right;width:420px;5#footerwidth:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;单行三列绝对定位1#leftposition:absolute;top:0px;left:0px;width:120px;2#middlemargin:0px190px0px190px;3#rightposition:absolute;top:0px;right:0px;width:120px;float定位xhtml:123这里是第一列4这里是第二列567 这里是第三列89CSS:1#wrapwidth:100;height:auto;2#columnfloat:left;width:60;3#column1float:left;width:30;4#column2float:right;width:30;5#column3float:right;width:40;6.clearclear:both;float定位二xhtml12Thisisthemaincontent.345Thisistheleftsidebar.678Thisistherightsidebar.9CSS01body02margin:0;03padding-left:200px;04padding-right:190px;05min-width:200px;0607.column08position:relative;09float:left;1011#center12width:100;1314#left15width:200px;16right:200px;17margin-left:-100;1819#right20width:190px;21margin-right:-100;22232425*html#left26left:190px;27这样的一个指令：(position)，在DreamWeaver中文版中翻译为“定位”，常用的属性有两个：relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚，这里做一些细致的讲解。position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。 padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从 margin的外围到父级标签内侧之间这一段。position:absolute; 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上角的0点开始计算，并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。于是产生了一个问题：现在大家做的网页大部分是居中的，如果我需要这个元素跟着网页中的某个元素位置，不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的，靠单纯的absolute是不行的。正确的解决方法是：在元素的父级元素定义为position:relative;(这里可以是祖父级，也可以是 position:absolute;，多谢谢old9的提出)需要绝对定位的元素设为position:absolute;这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧。一.选择符模式模式/含义/内容描述*匹配任意元素。(通用选择器)E匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)E F匹配元素 E 的任意后代元素 F 。(后代选择器)E F匹配元素 E 的任意子元素 F 。(子选择器)E:first-child当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类)E:link E:visited如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)E:active E:hover E:focus在确定的用户动作中匹配 E 。(动态伪类)E:lang(c)如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)E F如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)Efoo匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)Efoo=warning匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)Efoo=warning匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)Elang|=en匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)DIV.warning仅 HTML。用法同 DIVclass=warning。(类选择器)E#myid匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)我们用下面的例子来解释“父元素”、“子元素”、“父/子”及“相邻”这几个概念。123这是是h1的内容45这是一个段落p的内容！这里是strong的内容这是一个段落p的内容！67从以上代码中，我们可以找出这样的关系：h1 和 p 同为 div 的“儿子”，两者分别同 div 形成“父/子”关系。h1,p,strong 都是 div 的“子元素”。（三者都包含在 div 之内）div 是 h1 和 p 的“父元素”。strong 和 p 形成“父/子”关系，strong 的“父元素”是 p 。但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。div 是 h1 p strong 三者的“祖先”，三者是 div 的“子（孙）元素”。h1 和 p 两者是相邻的。继承上面的实例来具体演示一下E F的关系：假如，我们需要将 strong 内的内容二字变为绿色，我们可以有哪些方法呢？1div strong color:green;23p strong color:green;45div strong color:green;临近选择器和通用选择器：通用选择器以星号“*”表示，可以用于替代任何 tag 。实例：1h2* color:green二.选择符分类介绍1.通配选择符语法：1* sRules 说明：通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。示例：1*lang=fr font-size:14px;width:120px; 23*.div text-decoration:none; 2.类型选择符语法：1E sRules 说明：类型选择符。以文档语言对象(Element)类型作为选择符。示例：1td font-size:14px;width:120px; 23a text-decoration:none; 伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。1. 语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：1selector:pseudo-class property: value（选择符:伪类 属性: 值）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。类选择符及其他选择符也同样可以和伪类混用：1selector.class:pseudo-class property: value（选择符.类:伪类 属性: 值）2. 锚的伪类我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：1a:link color:#FF0000;text-decoration:none23a:visited color:#00FF00;text-decoration:none45a:hover color:#FF00FF;text-decoration:underline67a:active color:#0000FF;text-decoration:underline（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited 的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照 a:link， a:visited， a:hover， a:actived的顺序书写。3. 伪类和类选择符将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：1a.red:link color:#FF000023a.red:visited color:#0000FF45a.blue:link color:#00FF0067a.blue:visited color:#FF00FF现在应用在不同的链接上：1这是第一组链接23这是第二组链接4. 其他伪类此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的3倍：010203p:first-letter font-size:300%0405060708091011这是一个段落，这个段落的首字被放大了。1213我们再定义一个首行样式的例子：010203div p:first-line color:red04050607080910111213这是段落的第一行1415这是段落的第二行1617这是段落的第三行18192021（上例中段落的第一行为红色，第二、三行为默认颜色）注意：首字和首行的伪类需要IE5.5以上的版本支持。1. Block和inline元素对比所有的HTML元素都属于block和inline之一。block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度, , , , 和 是块元素的例子。相反地，inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。, , , , , 和是inline元素的例子。用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度（对导航条特别有用）；控制inline元素的高度；无须设定宽度即可为一个块元素设定与文字同宽的背景色。2. 再来一个box黑客方法之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：1padding:2em;23border:1emsolidgreen;45width:20em;67width:14em;第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用 20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。3. 页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到 标签下，然后为div指定一个类：123然后CSS这样设计：1#container2345min-width:600px;67width:expression(document.body.clientWidth 600?600px:auto);89第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。同样的办法也可以为IE实现最大宽度：01#container02030405min-width:600px;0607max-width:1200px;0809width:expression(document.body.clientWidth 1200? ”1200px“ : ”auto;10114. IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：01.box02030405width:80px;0607height:35px;08091011body .box12131415width:auto;1617height:auto;1819min-width:80px;2021min-height:35px;2223所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。在以前的web开发栏目中，我介绍了不少处理HTML表格的方法，尽管现在使用表格来布局网页的方法已经不再时髦了，但是您依然可以使用表格来显示表列数据。显示和样式化表格的方法有很多种，在这篇文章中，我将介绍使用CSS对表格边框进行样式化的方法。链接CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行，表格模型包含以下的元素：表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。边框根据不同的需求，您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框：TABLE 5px solid black; 除此以外，您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型：l none: 指定表格没有边框，所以边框宽度为0。l dotted: 由点线组成的表格边框。l dashed: 由虚线组成的表格边框。l solid: 由实线组成的表格边框。l Double: 由双实线组成的表格边框。l Groove: 槽线效果边框。l ridge: 脊线效果边框，和槽线效果相反。l inset: 内凹效果边框。l outset: 外凸效果边框，和内凹效果相反。每个边框类型都可以指定一种颜色，边框是绘制在背景颜色上的，列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。010203HTML Table04050607TABLE 0809background:blue;1011border-collapse:separate;1213border-spacing:10pt;1415border:5pxsolidred; 1617TD, TH 1819background:white;2021border:inset5pt;2223horizontal-align:right; 2425CAPTION border:ridge5ptblue; 26272829table summary=TechR - Tables and CSS3031First Quarter Sales32333435Person3637Sales383940414243Mr. Smith4445600.0046474849Mr. Jones50510000.0052535455Ms. Williams56570000.00585960616263Lets sale, sale, sale!6465列表A这个例子展示了很多可供使用的表格边框的选项，您可以使用您熟悉的度量单位（像素、磅，行长单位等）。设定边框的尺寸，您可以使用十六进制数值或颜色名称来指定边框颜色。以下的例子演示了定义边框的方法。1border:5pxsolidred;在这一条语句中融合了宽度、样式和颜色属性的定义，但是您也可以对这些元素进行单独定义，如下所示：1border-width:5px;23border-style:solid;45border-color:red;除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。CSS布局常用的方法1float:none|left|right取值：none:默认值。对象不飘浮left:文本流向对象的右边right:文本流向对象的左边它是怎样工作的，看个一行两列的例子xhtml代码:1Example Source Code2345这里是第一列67这里是第二列89CSS代码:01Example Source Code0203#wrapwidth:100;height:auto;0405#column1float:left;width:40;0607#column2float:right;width:60;0809.clearclear:both;1011position:static|absolute|fixed|relative取值：static:默认值。无特殊定位，对象遵循HTML定位规则absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置它来实现一行两列的例子xhtml代码:1Example Source Code2345这里是第一列67这里是第二列89CSS代码:1Example Source Code url=/url23#wrapposition:relative;width:770px;45#column1position:absolute;top:0;left:0;width:300px;67#column2position:absolute;top:0;right:0;width:470px;他们的区别在哪？显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position