关于CSS的一点点总结

页面中引用样式的方法：

    1. 内联样式：即标签的style属性值。通常这种情况，建议在head部分加入<meta http-equiv=”Content-Style-Type” content=”text/css” />

    2. 嵌入样式：位于head部分的style标记内容。

        <style type="text/css" media="screen">

        <!--

            样式规则定义

        -->

        </style>

    3.链接样式：通过在head部分添加:<link href="css file path" rel="stylesheet" media="screen"></link>

    4.导入样式：通过在head部分添加：

        <style type="text/css" media="screen">

        <!--

            @import url(css file path); /*CSS file path 无需添加""*/

        -->

        </style>

 

CSS属性及值的注意事项：

1.  属性必须置于{}之内。

2.  属性与值之间用：分隔。

3.  一个属性定义完后用；分隔。

4.  多个属性间用；+ 空格分隔。

5.  当一个属性有多个值时，多个值之间用空格分隔。

6.  当定义CSS无法认识的属性时，样式将失效。

 

CSS样式规则选择器：

    1.html 选择器：以html标签作为选择器，例如：a{}

    2.id 选择器：只可被1个标签使用，例如：#banner{}

    3.class 选择器：可被多个标签使用，例如：.stop{}

    4.组合选择器：以，分隔，此情况下所有选择器平级，例如：#stop,.warnning{}

    5.派生选择器(或称关联选择器)：也就是说后者样式必须依附着前者才可以出效果。

情况	测试用例	结果
p.stop{color:red;} p .stop{color:blue;} 这两者有何区别？	<p class=”stop”>   <span class=”stop”>这些字显示什么颜色呢</span> </p>	显示blue色
注:p.stop适用于p标签内部；p .stop适用于p标签内部嵌套的标签中。因此上例显示blue色；关联选择器的优先级要高于单一选择器。

6. 超链接选择器：LVHA原则，例如：a{}

7.超链接特殊选择器：a.news{}

8.伪元素选择器：对同一HTML元素的各种状态或其包含的部分内容定义样式的一种方式，格式为：html元素：伪元素{}，例如：a:link{}。定义超链接样式遵循LVHA原则，p:first-line,p:first-letter

伪元素a:link与html标签的a标签优先级不确定，所以尽量不去以这种方式使用两者

9.类选择器与伪元素一起使用：html元素.类名:伪元素{}

10．通配符：*

 

CSS优先级：

1.  id样式 > class样式 > html元素

2.  内联样式 > 嵌入样式 > 链接样式

3.  继承：

1.       整体来说是从上到下，从整体到局部的关系。

2.  内层继承外层样式定义

    4. 就近原则：

        1.优先使用更具体的定义【例如：关联选择器比单一选择器的优先级更高】。

        2.同级定义，使用物理位置靠近标签的样式。

 

样式规则注释与有效范围：

/*要注释的内容，注释不能嵌套*/

 

CSS颜色值定义:

    1.英文常量名

    2.RGB(R,G,B) /*R,G,B分别代表红，绿，蓝，每个的值范围为0～255*/

    3.十六进制值，例如：#RRGGBB

 

CSS单位度量:

    1.相对单位：em,ex,px,%

    2.绝对单位：in,cm,mm,pc,pt,px

 

样式属性分类：

字体：font-family,font-size,font-style,text-decoration,font-weight,font-variant,text-transform,color[#RRGGBB,RGB(R,G,B),font：综合设置

背景：background-color,background-image,background-repeat,background-attachment:背景图像是否跟随内容的滚动而移动。Background-position:水平位置，垂直位置，background:综合设置

文本：word-spacing,letter-spacing,vertical-align,text-align,text-indent,white-space,line-height,

位置：指定元素的位置，用来控制任何网页元素在浏览器文档窗口的位置。

         Position:元素的定位方式，absolute,relative,static

         top,right,bottom,left

         width,height

         z-index

边缘：margin

填充：padding

边框：border,border-weight,border-style,border-color,

列表：List-style-type：设置列表符号，disc,circle,square,

         List-style-image：

         List-style-position：outset与inset的区别。

         List-style：对列表样式的综合设置

其他：Filter（CSS滤镜）；   Cursor：用于设置当光标移到某位置的开关。

   

做Web开发，最忌讳“表格套表格”；使用CSS布局利于程序员和美工的配合。

网上很多使用div + css进行布局的教程，但却存在着很多缺陷：

1.    对css的布局模型讲解不清楚，让人很难理解相对定位、浮动等概念；

2.    虽然避免了“表格套表格”的缺点，却带来了“div 套 div”的缺点，过量使用div标签；

3.    使用class过多，造成class灾难。

要正确使用css，对css的基本知识要有足够的了解。今天，就从四个方面来讲解：
一、CSS中的块模型（一切皆为框）

1.在CSS的定义中，有块元素，它一行只能显示一个，比如div、table、p、ul、h1等；有行内元素，它根据行宽度紧凑排列显示，如a、span、font、strong等。当然，任何元素都可以通过display属性对生成框的类型进行重新定义（display：inline|block|none……）。

	<div style="display:inline; width:100px; height:30px; border:1px solid #F00;">块框改为行内框</div>Hello //红色样式部分有效果，绿色样式部分没有效果
	<a href="#" style="display:block; width:200px; height:60px; border:1px solid #333;">行内框改为块框</a>行内元素作为块元素来显示。 //红色样式部分有效果

2.块元素，有块框（包括通过display属性设置的块元素）存在content、padding、border和margin几个部分，如下图：

3.对行内元素设置width,height值无效；margin-top,margin-bottom值无效；

1.    我们常说的宽和高，指的只是content的宽和高 2.    padding代表内容和边框之间的填充 3.    border代表边框 4.    margin代表边框之外的空白（两个元素垂直间补白，看上元素margin-bottom和下元素margin-top值，谁大就取谁作为依据；两个元素水平间补白，按左元素margin-right和右元素margin-left值，求和）

二、CSS中的文档流模型

所有文档中的元素默认情况下按文档流显示，即每个块元素显示一行，行内元素根据行宽度值紧凑排列显示。

	<div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> 为了定义他们的宽度、高度还有边框，我们定义如下的CSS： #div1 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px; } #div3 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px; }
#div2 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px; }

三、CSS中的相对定位和绝对定位模型
1.文档流中，任何元素都会被安排到流中的一个位置，但可以通过CSS中的定位属性来重新安排它的位置。

2.定位分为相对定位和绝对定位

相对定位：相对定位是相对于该元素在文档流中的原位置进行偏移的，其原位被保留。

	#div1 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px; } #div3 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px; } 解读：可以看到一个有趣的现象，那就是虽然我们把div2移走了，但是div1和div3中间还是有一个空间，说明相对定位的元素占据文档流空间，这里的div2就是典型的“站着茅坑不拉屎”现象。
#div2 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px;     position: relative;     top: -64px;     left: 204px; }
		1.     相对定位的元素框会偏移某个距离。它原本形状及所占的空间仍被保留。 2.     如果将 top 设置为 20px，left 设置为 30 像素，元素将向右移动。如左图 3.    在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。
4.相对定位实际上被看作普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置。

绝对定位：

CSS 绝对定位

      设置为绝对定位的元素框从文档流完全删除(就好像该元素原来不存在一样。元素定位后生成一个块级框，不管它原来在文档流中是以何种类型的框存在)，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。绝对定位的元素脱离文档流不占用空间，这一点与相对定位不同。

		#box_relative {      position: absolute;      left: 30px;      top: 20px;    }  1.    相对定位是“相对于”元素在文档中的原位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。 2.    根据用户代理的不同，最初的包含块可能是画布或HTML元素。
3.    因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。z-index值越高，框在堆中的位置就越高。 4.    绝对定位的元素的位置相对于最近的已定位祖先元素，这使我们能够实现一些非常有意思的效果。例如，假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位：
	#div2 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px;     position: absolute;     top: 15px;     left: 214px; }
1.     使用绝对定位也是可以把div2摆到div1的右边的，而且绝对定位是不会占据文档流空间。 2.    绝对定位是个好东西，可以把内容显示到页面上的任何位置。

四、CSS中的浮动和清除模型
    在CSS中，最让人不好理解的应该算是float和clear意义了。

	#div2 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px;     float:left; } #div3 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px;     float:left; }
float可以达到这样一个效果：本来应该一行显示一个的块元素，如果定义了float属性，则只要行的空间足够，它就会跑别的float元素的屁股后面，而不再会单独占用一行
图1		下面是它们的html代码： <div id="div1">div1 <div id="div2">div2</div> <div id="div3">div3</div> </div> 下面是它们的css代码： #div1 { }{     border: 1px solid #000099;     height: 60px;     width: 450px;     margin:2px; } #div2 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px;     float:left; } #div3 { }{     border: 1px solid #000099;     height: 60px;     width: 200px;     margin:2px;     float:left; }
1.       那什么情况下需要clear呢？这是因为float的元素和绝对定位的元素一样，也是不占用文档空间的，所以作为父元素的div1不知道自动扩展大小，以至于显示出来div2和div3会跑到div1的外面，如上图 2.       为了解决上面的问题，就需要在float之后的元素上面使用clear，在此例中，我们在div3后面加入一个空段落，并设置其为clear，如下： <div id="div1">div1 <div id="div2">div2</div> <div id="div3">div3</div> <div class="clear"></div> </div> 下面是新增加的空段落的CSS代码： .clear{ }{     clear:left; } 效果图：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框脱离文档流。

请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

      再看下图，如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

      再看下图，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

在 CSS 中，我们通过 float 属性实现元素的浮动。

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：

      要想阻止行框围绕浮动框，需要对该框应用 clear 属性 。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

      为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

      这是一个有用的工具，它让周围的元素为浮动元素留出空间。

      让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news {      background-color: gray;      border: solid 1px black;    }    .news img {      float: left;    }    .news p {      float: right;      }    <div class="news">    <img src="news-pic.jpg" />    <p>some text</p>    </div>

实现CSS的定位最终还是要靠以下属性：

Position：定义位置，absolute|relative|static

top、right、bottom、left：指定上、右、下、左坐标

width、height：指定占用空间大小

Clip：剪切

Overflow：内容超出时的处理方法，visible|hidden|scroll|auto

z-index：产生立体效果，auto|integer

visibility：定义可见性，Inherit|visible|hidden

     定位的基本思想：它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

对于“块框”、“行内框”，可以使用display 属性改变生成的框的类型。把display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块元素一样；把display属性设置为inline，可以让块元素（比如：<div>元素）表现得像行内元素一样；把display 设置为 none，让该框及其所有内容就不再显示。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

       除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 X(HTML) 中的位置决定。块框从上到下一个接一个地排列；行内框在一行中水平排列。

测试用例：
    这个用例，要完全摆脱“表格套表格”的模式。除了最上面一行在一个div里面显示logo、advertisment和appendix的div外，其它的地方没有div嵌套。尽量减少div嵌套的有力武器是理解div的意义，div代表division，是部分的意思，也就是说只有在确实没有标签能够作为一个部分的根元素的时候才需要div。在上面的例子中，菜单条就没有使用div。菜单条是使用列表ul实现的，因此没有必要使用div。下面是上图的html代码：

<body>
<div id="header">
  <div id="logo">此处显示 id "logo" 的内容</div>
  <div id="appendix">此处显示 id "appendix" 的内容</div>
  <div id="advertisment">此处显示 id "advertisment" 的内容</div>
</div>
<ul id="menu">
  <li>菜单项一</li>
  <li>菜单项二</li>
  <li>菜单项三</li>
  <li class="lastMenuItem">最后一个菜单项</li>
</ul>
<div id="loginView">此处显示 id "loginView" 的内容</div>
<div id="catalog">此处显示 id "catalog" 的内容</div>
<div id="search">此处显示 id "search" 的内容</div>
<div id="newTopics">此处显示 id "newTopics" 的内容</div>
<div id="newReply">此处显示 id "newReply" 的内容</div>
<div id="hotTopics">此处显示 id "hotTopics" 的内容</div>
<div id="statistics">此处显示 id "statistics" 的内容</div>
<div id="hotGroups">此处显示 id "hotGroups" 的内容</div>
<div id="hotUsers">此处显示 id "hotUsers" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</body>

是不是很简洁？
而关于页面美化和布局的内容，全部转移到了CSS中。先来说说菜单项，菜单项是使用列表实现的，而列表常规的显示样式是这样的：
    怎么样才能让它们显示到一行呢？可以用display,float等属性，这里我们使用float属性。我们给id为menu的ul定义如下样式，来显示边框：

为了避免前面讲到的float元素跑到边框之外：1.可以使用clear；2.可以将menu的height属性定义为12px，即和页面上的字体等高，而菜单只有一行，因此不会跑到边框之外。

menu中的每一个菜单项都是一个li，我们可以通过#menu li { }来定义它的样式。

对最后一个菜单项定义了类，是因为我不想最后一个菜单后面还跟一个小竖线，菜单项之间的小竖线是通过定义li的右边框样式做到的，代码如下

#menu { }{     border: 1px solid #0F54C3;     padding:5px;     margin:0px;     width:804px;     margin:1px 0px;     height: 12px; }

#menu li { }{     float:left;     padding-left:10px;     padding-right:10px;     border-right-width: 1px solid #0F54C3; }

#menu .lastMenuItem { }{     border-right-style:none; }

对于那么多的框框，除了#newTopics我使用绝对定位把它摆到了右边作为主要内容区之外，其它的都是顺着文档流摆下来的，只定义了宽度，而不需要定义位置。
    如果我们要美化页面，比如添加网站特有的图片，我们可以修改#logo、#advertisment、#appendix的css代码，甚至当以后别人美化我的网站时，可以把这三个div的visible设置为false，而直接定义#header的样式。在这里，我们只简单的把#logo的背景设置为logo图片，并去掉边框。下面是css代码：

#logo { }{
    float:left;
    height: 60px;
    width: 200px;
    background:url(../images/xkland_logo.gif) no-repeat left top;
}
对于其他的div，我们还需要为它们添加内容，#loginView这个稍微特殊一点，需要添加标题和表单，而其他的div就简单得多，只需要标题和列表就够了。这里我们以#loginView为例，下面是添加内容之后的效果：
别看这里面布局也挺复杂的，我也完全没有使用表格。下面是html代码：

<div id="loginView">
  <h3>用户登录</h3>
<form name="form1" id="form1" method="post" action="">
  <p>用户名：
      <input class="textInput" name="userName" type="text" id="userName" />
  </p>
  <p>密　码： 
    <input class="textInput" name="password" type="password" id="password" />
  </p>
  <ul>
      <li>忘记密码？</li>
      <li>新用户注册</li>
      <li><input type="checkbox" name="checkbox" value="checkbox" />记住我</li>
  </ul>
  <p class="clear">
  <input type="submit" name="Submit" value="登　录" />
  </p>
</form>
</div>
可以看到，我使用的h3标签来作为标题，这样避免了为标题另外嵌套一个div，对输入文本框定义了类textInput来定义它们的样式，而其他的文本内容，我都是使用了p标签和ul、li标签，从上面的效果图就可以看出CSS的强大。下面是它们的css代码：

#loginView { }{     border: 1px solid #0F54C3;     width: 280px;     margin:1px 0px; }	h3 { }{     border-bottom-width: 2px;     border-bottom-style: solid;     border-bottom-color: #0F54C3;     padding-top: 5px;     padding-right: 5px;     padding-bottom: 5px;     padding-left: 15px;     margin: 0px;     font-size: 10.5pt; }	#loginView form { }{     margin:0px; }	#loginView ul { }{     margin:8px 10px 3px 10px; }
		.textInput { }{     border: 1px solid #CCCCCC;     width: 15em;     height:12px; }
			#loginView ul li { }{     float: left;     width: 130px;     height:18px; }
#loginView p { }{     margin:3px;     text-align:center; }
			.clear { }{     clear: left; }

总之，使用DIV+CSS将程序和界面分离是绝对的真理，我们程序员只要能够在框框内输出正确的数据就够了，这样能够尽量减少程序的bug，美化页面的事就让界面设计师去做吧。当然，我们程序员还是要能够在html中设计正确的division划分和嵌套，让界面设计师在设计界面的时候能够找到定义CSS的锚点。

#box_relative {

  position: absolute;

  left: 30px;

  top: 20px;

}

.news {

  background-color: gray;

  border: solid 1px black;

}

.news img {

  float: left;

}

.news p {

  float: right;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

 

一些建议的CSS的学习方法：

         HTML标签 + CSS

         什么东西用多了，即使不去记也就自然而然的记住了。东西记得再好，长时间不用也会忘记的。

         苦干不如巧干，最聪明的人，是最会用工具的人。

         有效使用VS.NET帮助文档、baidu、google搜索

         查看优秀网页的源代码：获取CSS文件和JavaScript文件的方法

         说明CSS中的visibility属性与display属性的区别。

         过长内容自动换行：

使用td标签的：word-wrap,word-break

使用table标签的：table-layout