搜索
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)集体声明:并列关系styletype=“text/css”｛body,td,th,#header,.one{color:blue;font-size:12px;}/style嵌套声明:从属关系styletype=“text/css”Ph1{color:blue;font-size:14px;}/style混合声明:并列及从属关系styletype=“text/css”PH1,#headerul{color:blue;font-size:12px;}/style并且同一个HTML元素可以具有多个类，每个类中间用空格分开：.center{text-align:center}.col{color:green;}pclass=centercol这个段落将会居中并且绿色/p注意：类名的第一个字符不能使用数字！派生选择器功能就是根据文档的层级关系来确定某个标签的样式。比方说，你希望段落（p标签）中的span元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：pspan{font-style:italic;}请注意标记为b的蓝色代码的层级关系：pb我是b标签，我是粗体，不是斜体字，因为我不在span标签中，所以这个规则对我不起作用/b/ppspan我是斜体字。这是因为我是span元素位于p元素内。/span/p同时，派生选择器样式可以指定到无论多少个层级。以下也是正确的（假设HTML文档中存在这样的层级关系）：ullispanb{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定位。准备好了吗？--------------------------------------------------------------------------------CSS相对定位设置为相对定位的元素会根据参数偏移相应距离。但它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。对一个元素进行相对定位，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。将top设置为20px，那么元素将在原位置顶部往下20像素的地方，也就是元素向下移动。将left设置为30px，那么元素将在原位置往右30像素的地方，也就是元素向右移动。#box_relative{position:relative;left:30px;top:20px;}如下图所示（框2）：注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素可能会导致它覆盖其它元素。--------------------------------------------------------------------------------CSS绝对定位绝对定位会使元素不占据空间。这一点与相对定位不同，相对定位实际上属于普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。而绝对定位则完全不属于普通流的模型中。普通流中其它元素（框1，框2）的布局就像绝对定位的元素（框3）不存在一样，不会有任何冲突：#box_absolute{position:absolute;left:30px;top:20px;}如下图所示：绝对定位的元素的位置相对于最近的已定位（有设置过position属性的）父元素，如果元素没有已定位的父元素，那么它的位置相对于最初（最顶层）的包含块（如body）。--------------------------------------------------------------------------------小结现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位父元素，如果不存在已定位的父元素，那么“相对于”最初的包含块。提示：根据用户代理的不同，最初的包含块可能是画布或HTML元素。提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些元素的上下堆放次序。在CSS布局、排版中，90%人都使用浮动进行排版，所以，此课极为重要，请务必理解！浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止。第十五课如何实现CSS浮动这一课,我们将学习如何实现CSS浮动,CSS浮动主要是通过CSS的float属性来实现,而清除CSS浮动则可以通过css的clear属性,这一课我们我们也将有CSS的float属性和clear属性的详细讲解在CSS布局、排版中，90%人都使用浮动进行排版，所以，此课极为重要，请务必理解！浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止。--------------------------------------------------------------------------------CSS浮动原理请看下图，左图为普通的文档流，当把框1向右浮动时（right），它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：再请看下图，当框1向左浮动时（left），它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左浮动（left），那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框：如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：--------------------------------------------------------------------------------CSSfloat属性在CSS中，我们通过float属性实现元素的浮动。float属性的值有3个1.left:左浮动2.right:右浮动3.none:默认（无浮动）--------------------------------------------------------------------------------行框和清理浮动属性还可以制作文本围绕图像的效果。浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框：要想阻止行框围绕浮动框，需要对该框应用clear属性。clear属性有4个值：1.left:清除左浮动2.right:清除右浮动3.both:清除左右浮动4.none:不清除任何浮动为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：这是一个有用的工具，它让周围的元素为浮动元素留出空间。让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：.news{background-color:gray;border:solid1pxblack;}.newsimg{float:left;}.newsp{float:right;}divclass=newsimgsrc=news-pic.jpg/psometext/p/div这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。提示：所有元素一旦定义了浮动属性即自动转换成了块级元素。注意：在实际操作中除了img标签（因其具有隐含的宽度）之外的所有标签设定浮动时务必要为元素设定宽度，否则你会有会想不到的麻烦，并且很难找出。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用clear属性：不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它：.news{background-color:gray;border:solid1pxblack;}.newsimg{float:left;}.newsp{float:right;}.clear{clear:both;}divclass=newsimgsrc=news-pic.jpg/psometext/pdivclass=clear/div/div这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用clear属性，但是有时候不得不为了进行布局而添加无意义的标记。不过我们还有另一种办法，那就是对容器div进行浮动：.news{background-color:gray;border:solid1pxblack;float:left;}.newsimg{float:left;}.newsp{float:right;}divclass=newsimgsrc=news-pic.jpg/psometext/p/div这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消