...... 加载css样式有以下四种:外部样式;内部样式 h2 { color:#f00;} ;行内样式
内部样式
;导入样式@import url("/css/global.css"); css优先级：id优先级高于class；后面的样式覆盖前面的；指定的高于继承；行内样式高于内部或外部样式；总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的 css盒模型：整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度 转变观念：要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。 一定要多动手、多动脑，不要怕麻烦。 2个DW中常见的界面：
盒模型居中：#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }
自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。 当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉 css代码，每个类或ID都是写在一行 id的优先级高于class 在两个div之外再加一个父div，然后设置其居中，即可使两个div居中。块级元素：就是一个方块，像段落一样，默认占据一行出现；诸如段落
、标题
...、列表, 、表格 、表单 、DIV
和BODY 等元素。
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。如: 表单元素 、超级链接、图像 、
在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。细心的朋友已经发现，上例中#main的div还定义了margin-left:120px;而这里没有定义，但它多出的文字却跑到了图片(#side)的下方，是不是设置margin-left:后，它就不会跑到#side的正文呢？如果你能想到这一点，你的确是太聪明了，事实确实是这样，在css样式表中加上下面一行
#main { margin-left:202px;}
3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。 #，是个虚拟链接，不指向任何页面。 去掉默认标签样式body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }ul { list-style: none; }
img { border-style: none; } #menu ul和#menu ul li即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的，p段落、div分区、span都是20像素字体。
h1,h2,h3,h4,h5,h6 {
color: green;
}
p,div,span{
font-size:20px;
}
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }img { border-style: none; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }#menu ul li.current ul { display:block;}#menu ul li:hover ul { display:block;} 查看更多关于标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华_html/css_WEB-的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did105502