DIV+CSS学习要点整理..docxVIP

font 字体color 颜色font-size 字体大小text-align 文本位置background 背景margin 外补丁padding 内补丁border 边框float 布局CSS布局常用的方法：float:none|left|right 取值：none:默认值。对象不飘浮left:文本流向对象的右边right:文本流向对象的左边position:static|absolute|fixed|relative取值：static:默认值。无特殊定位，对象遵循HTML定位规则absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置选择合适的标签（区别与table布局的习惯..） 布局用：div/div； 文本用：h1～6/h1，p/p 图片用：img/img 列表用：ulollidldtdd 数据用：table/table 其他的：form，input，select标签选择器 类别选择器(.class) ID选择器(#id)集体声明:并列关系style type=“text/css” ｛body,td,th,#header,.one{color:blue;font-size:12px;}/style嵌套声明:从属关系style type=“text/css” P h1{color:blue;font-size:14px;}/style混合声明:并列及从属关系style type=“text/css” P H1,#header ul{color:blue;font-size:12px;}/style并且同一个HTML元素可以具有多个类，每个类中间用空格分开：.center {text-align: center} .col{color:green;}p class=center col这个段落将会居中并且绿色/p注意：类名的第一个字符不能使用数字！ 派生选择器功能就是根据文档的层级关系来确定某个标签的样式。比方说，你希望段落（p标签）中的 span 元素变为斜体字，而不是通常的粗体字，可以这样定义一个 派生选择器：p span {font-style: italic;} 请注意标记为 b 的蓝色代码的层级关系：p b我是b标签，我是粗体，不是斜体字，因为我不在span标签中， 所以这个规则对我不起作用/b/p?p span我是斜体字。这是因为我是 span 元素位于 p 元素内。 /span/p同时，派生选择器样式可以指定到无论多少个层级。以下也是正确的（假设HTML 文档中存在这样的层级关系）： ul li span b {color:red;} 通过css文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，缩进文本，等等。文章的第一行缩进，这是一个实用的效果，CSS 提供了 text-indent属性 可以方便地实现这一效果。你可以自由调节缩进的长度，甚至可以为负的（建议不使用）。下面将段落首行缩进5em：p {text-indent: 5em;}注意：text-indent属性不适注意:margin属性在IE中会有双倍的Bug,去除Bug的方法是把display属性设置为inline;padding属性在FireFox里不会生效为什么没有边框？在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。那么如果忘记设置 border-style 属性 会出现什么情况呢？h1 {border-width: 20px;} 尽管边框的宽度是 20px，但是在没有定义border-style 属性 的情况下，无论设置了宽度为多少，会自动将宽度设置为0。提示：这一点非常重要。事实上，因为忘记声明边框样式是一个初学者常犯的错误。提示：一般来讲，网页居中用absolute很容易出错，因为网页一直是随着分辨率的大小自动适应的，而absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置，很多人出错就在于这点上。第十四课 如何进行CSS定位这一课,我们将更系统更详细的学习css定位,css定位有CSS相对定位和CSS绝对定位,这一课都将有详细解释这章，我们将要更系统更详细的学习css定位。准备好了吗？----------------------------------------------