几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好
ol 有序列表。
表现为：
1……
2……
3……
ul 无序列表，表现为li前面是大圆点而不是123
很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：
dt 和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 (三列中的第三列)
代码精简
使用DIV CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。
表格的嵌套问题搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。
使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
而DIV CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。搜索引擎优化及营销都是非常有利的。搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但?思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。内容来自中国站长资讯网(www.chinahtml.com)
我想，这样的情况可能不是排名规则，最大的可能还是spider爬行网站时，出现以上差异导致收录质量的不同。
毕竟廖胜于无，建议建站或改版的朋友们，技术许可的情况下，还是选择DIV CSS布局为好。
CSS布局常用的方法：float:none|left|right
取值：
none: 默认值。对象不飘浮
left: 文本流向对象的右边
right: 文本流向对象的左边
它是怎样工作的，看个一行两列的例子
xhtml:
position:static|absolute|fixed|relative
取值：
static: 默认值。无特殊定位，对象遵循HTML定位规则
absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
它来实现一行两列的例子
xhtml:
CSS常用布局实例
单行一列
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}
两行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
三行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
单行两列
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
两行两列
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
三行两列
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}
单行三列
绝对定位
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
float定位
xhtml:
float定位二
xhtml
*html#left{
left:190px;
}
这样的一个指令：(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 。(临近选择器)
E[foo]
匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)
E[foo="warning"]
匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)
E[foo~="warning"]
匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)
E[lang|="en"]
匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning
仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid
匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)
我们用下面的例子来解释“父元素”、“子元素”、“父/子”及“相邻”这几个概念。
这是一个段落p的内容！这里是strong的内容这是一个段落p的内容！
From the above code, we can find this relationship:
h1 and p are both "sons" of div, and they form a "parent/child" relationship with div respectively.
h1, p, strong are all "child elements" of div. (All three are contained within a div)
div is the "parent element" of h1 and p.
strong and p form a "parent/child" relationship, and the "parent element" of strong is p .
However, the relationship between strong and div is not a "father/son" relationship, but a "grandparent-grandson" relationship, but strong is still the "child (grandson) element" of div.
div is the "ancestor" of h1 p strong, and the three are the "child (grandson) elements" of div.
h1 and p are adjacent.
Inherit the above example to demonstrate the relationship between E and F: If we need to change the content of strong to green, what methods can we use?
div strong {color:green;}
p > strong {color:green;}
div > strong {color:green;}
Proximity selectors and universal selectors: Universal selectors are represented by an asterisk "*" and can be used to replace any tag.
Example:
h2 * { color:green }
2. Introduction to selector classification
1. Wildcard selector
Syntax:
* { sRules }
Description:
wildcard selector. All types of single objects in the selected document tree (DOM).
If the wildcard selector is not the only component of a single selector, the "*" can be omitted.
Example:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }
2. Type selector
Syntax:
E { sRules }
Description:
Type selector. Use the document language object (Element) type as the selector.
Example:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
Pseudo class can be seen as a special class selector that can be automatically recognized by browsers that support CSS. Its greatest use is that it can define different style effects for links in different states.
1. Syntax
The syntax of pseudo-class is to add a pseudo-class (pseudo-class) to the original syntax:
selector:pseudo-class {property: value }
(selector: pseudo-class {attribute: value})
Pseudo-classes are different from classes. They are already defined by CSS and cannot be arbitrarily used with other names like class selectors. According to the above syntax, it can be interpreted as the style of the object (selector) in a special state (pseudo-class).
Class selectors and other selectors can also be mixed with pseudo-classes:
selector.class:pseudo-class {property: value}
(selector.class :pseudo-class {attribute: value})
2. Anchor pseudo-class
The most commonly used ones we use are the 4 pseudo-classes of a (anchor) elements, which represent the 4 types of dynamic links Different states: link, visited, active, hover (unvisited link, visited link, active link and mouse over link). We define different effects for them respectively:
a:link {color: #FF0000; text-decoration: none}
a:visited {color: #00FF00; text-decoration: none }
a:hover {color: #FF00FF; text-decoration: underline}
a:active {color: #0000FF; text-decoration: underline}
（ In the above example, the link is red without underline when it is not visited, green without underline when accessed, blue and underlined when the link is activated, purple and underlined when the mouse is on the link)
Note: Sometimes this link has an effect when the mouse points to it before accessing it, but has no effect when the mouse points to the link again after the link is accessed. This is because you put a:hover in front of a:visited. In this case, because the latter one has a higher priority, the effect of a:hover will be ignored when the link is accessed. Therefore, according to the stacking order, when we define these link styles, we must write them in the order of a:link, a:visited, a:hover, and a:actived.
3. Pseudo-class and class selectors
By combining pseudo-classes and classes, you can create several sets of different link effects on the same page. For example, we define a The group link is red and blue after visiting; the other group is green and yellow after visiting:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
Now applied in different On the link:
This is the first set of links
This is the second set of links
4. Other pseudo-classes
In addition, CSS2 also defines the first word and first line ( First-letter and first-line) pseudo-classes can set different styles for the first word or first line of elements.
Look at this example below. We define the size of the first word of the text in the paragraph mark to be 3 times the default size:
……
这是一个段落，这个段落的首字被放大了。
我们再定义一个首行样式的例子：
……
这是段落的第一行
这是段落的第二行
这是段落的第三行
(In the above example, the first line of the paragraph is red, and the second and third lines are the default color)
Note: The pseudo-classes of the first word and first line need to be supported by IE5.5 or above. .
1. Comparison of Block and inline elements
All HTML elements are between block and inline one.
The characteristics of the block element are:
always starts on a new line;
Height, line height and top and bottom margins can all be controlled;
The default width is 100% of its container, unless a width is set
,
