css的注释

/*文字*/       #这个可以进行段注释

元素类：

把把元素添加到一个类中，只需添加一个类名的（如test）的class属性。
<p class="test">
创建类的选择符：

p.test {
        color: green;
}

.test {            #用一个点后接一个类名，这个规则将会适用于该类内的所有成员。
        color: green;
}

一个元素可以加入多个类
<p class="test1 test2 test3"> #每个类名之间用空格隔开，类名顺序无所谓

关于样式的应用：

1. 如果没有选择符与元素匹配，刚依赖继承
2. 如果没有可继承的元素，刚使用浏览器给的默认值。
3. 如果多个选择符匹配了一个元素的同一属性（比如颜色），刚配置最具体的那个选择符，如果有多个选择符一样具体，刚匹配最后一个规则。

字体和颜色样式

• font-family 定义网页中的字体，可定义多种，如果前一种系统中，没有则使用下一种显示

• font-size 控制字体大小
  定义方法：px，em,百分数和关键字
  font-size: 14px; #字体大小14像素 ，尽量不要用这种方式，定义字体
  font-size: 1.2em; #字体大小为父元素字体的1.2倍
  font-size: 150%; #字体大小为父元素的150%
  font-size: small; #small一般为12像素，其余的值有: xx-small、x-small、small、medium、large、x-large、xx-large；每种字体都比前一种大20%

• color 给文本添加颜色
  color 是字体颜色
  backgroud-color 是背景颜色
  可以用颜色名直接定义，也可以使用十六进制定义 。
  backgroud-color: red;
  backgroud-color: rgb(80%, 40%, 0%);
  backgroud-color: rgb(204, 102, 0);
  backgroud-color: #cc6600;

• font-weight 设置字体的粗细 #可以设置为 lighter（较细）、normal（正常）、bold（粗）、bolder（更粗）

• font-style 给字体添加样式
  italic 斜体，

• text-decoration 给文本添加更多样式 #可设置： none、underline、overline、line-through、blink(闪动)

盒模式

• line-height 行间距，这个也是可以继承的，在body设置后，页面所有元素都会改变
  比如 line-height: 1.6em; #字体的1.6倍

css把每个单一的元素看作一个盒子

• 内容区：图片或一些文字

• 补白： 盒子的内容和边框之间，补白是透明的，本身没有颜色或修饰

• 边框： 元素周围可以有边框，是可选的边框包围着补白，边框可以有各种宽度、颜色和样式

• 边界： 包围着边框，如果两个盒子相邻，边界就相当于它们之间的空间。和补白一样，边界也是透明的，本身没有颜色或修饰

• border-color 设置边框颜色

• border-width 设置边框宽度

• border-style 设置边框样式
  可能的值

• background-color 设置元素的背景颜色

• padding 设置补白的像素大小或边框里面部分的百分之几

比如： padding: 25px;               内容的四周为25像素的补白
       padding:10px 5px 15px 20px;  上：10px,右:2px,下：15px, 左：20px（顺时针方向）
       padding:10px 2px 15px;       上：10px,右左：5px, 下：15px
       padding:10px 5px;            上下：10px, 右左：5px

百分比的话：规定基于父元素的宽度的百分比的内边距
还有 
    padding-left         左补距离
    padding-right        右补距离
    padding-top          头顶补距离
    padding-bottom       底补距离

• margin 设置外边距，即边界（两个盒子之间的距离）
  这个用法和padding一样，可以参考padding
• background-image 设置背景图片
  background-image: url(images/backgroud.gif);
• background-repeat 设置是否及如何重复背景图像

  值： repeat         默认。背景图在垂直和水平方向重复
   repeat-x         水平方向重复
   repeat-y         垂重方向重复
   no-repeat        图像只显示一次

• background-position 设置背景图像的起始位置

  值  top left        #如果仅规定一个关键词，第二个值默认为center,如果不规定，默认为0%, 0%
  top center
  top right
  center left
  center center
  center right
  bottom left
  bottom center
  bottom right
  
  x% y%       左上角为0% %;如果只规定了一个，另一个默认为50%;
  xpx ypx     左上角为0 0 ;只规定了一个，另一个默认也为50%

定义边框的一侧
border-top-color 上边框的颜色
border-top-style 上边框的样式
border-top-width 上边框的带度
top可以替换为：right,left, bottom

样式的id

id 具有唯一性， (开头不能为数字)
id的使用：

<p id="footer">this is a test!</p>

在css中规定为id属性方法：

#footer
或 p#footer

如果给多个id相同属性的话，id之间用逗号隔开

#a, #b, #c {
    color: red;
}

使用多样式表

<link type="text/css" rel="stylesheet" href="lounge1.css" />
<link type="text/css" rel="stylesheet" href="lounge2.css" />
<link type="text/css" rel="stylesheet" href="lounge3.css" />

样式表的顺序很重要，最下面的优先最高，一个样式表会覆盖在它之前链接的样式表中的样式、

div

就像一个容器，可以把元素一起放进去，div仅仅是结构，没有任何“外观”左默认样式

<div id="test">
</div>

样式：

• width 设置元素的宽度;这个宽度只是内容区的宽度，height也是一样
• height 设置元素的高度
• text-align 在块元素中text-lign来设置其中文本(包括图片)的对齐方式
  可为center,left,right
  justify 这个是文字两端对齐

选中div中的特定元素

div h2 {                 #表示所有的div
    color: black;
}
或
#elixirs h2 {            #id为elixirs的div
    color: black;
}
也可以
#elixirs blockqoute h2{        #表示id为"elixirs"的元素的子孙<blockqoute>的子孙<h2>元素
    color: bulue;
}

css属性的合并

background-color: white;
background-image: url(cock.gif);
background-repeat: repeat-x;
合并为：
background: white url(cock.gif) repeat-x       (顺序无所谓)

font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
合并为：
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;

span 创建一组内联字符和元素

<span class="cd">buddha bar</span>, <span class="artist">claude challe</span>

css中添加样式

.cd {
    font-style: italic;
}
.artist {
    font-weight: bold;
}

<a>元素和它的几个特征

a:link {        #未被访问的链接
    color: green;
}
a:visited {     #已被访问的链接
    color: red;
}
a:hover {       #鼠标停留在上面的链接
    color: yellow;
}
还有两个状态为 focus(聚焦，即tab键选中的时候，)；active（用户第一次点击一个链接）
这两个状态一般不用，有些浏览器不能很好的支持

伪类

像<a>元素的link、visited 就是伪类

层叠

css流

块元素从上往下读，默认占据浏览器窗口的整个宽度
内联元素从左往右读
两个内联元素的边界是两个元素的边界之和
两个块元素的边界是取较大元素的边界

漂移元素

漂移元素必须设置一个明确的宽度值，不能是默认的

float：left       # 让一个元素靠左或靠右
float: right
clear: right #右边不能有漂移元素，如果则把这一段往后移
clear:both

漂移元素的边界不会和块元素的边界重叠，

流动和冻结设计

冻结:内容的宽度是固定的
流动:由浏览器决定宽度，用auto来默认显示

凝胶物布局：

内容区的宽度是固定的，但边界随着浏览窗口变大或缩小

绝对布局

用属性 position 来告诉浏览器使用绝对布置

position:absolute        #绝对布局
position:static          #默认的，浏览器决定哪个元素放哪
position:fixed           #相对于浏览器边缘的绝对位置

绝对布局用z-index属性互相层叠放置，数值较大的放上面

相对布局

position:fixed #相对于浏览器边缘的绝对位置

表格

<table summary="test">        #summary，摘要，在浏览器上不显示，就像程序的注释一样
    <caption>                  #给表格添加标题
        这是一个标题
    </caption>
    <tr>                     #每个<tr> 构成一行
        <th>1</th>            #<th>构成一列的表格表头（会被加粗）
        <th>2</th>
    </tr>
    <tr>
        <td>1</td>            #每个<td>构成表单的一个单元
        <td>2</td>
    </tr>
</table>

border-spacing:1px 2px #设置单元单之间的距离，水平为1，垂直为2
border-collapse:bollapse; #取消单元格之间的距离，距离为0

占两行   #rowspan定义一个表格单元所占据的行数 
占两列   #colspan定义一个表格单元所占据的列数

li {
    list-style-type: disc;
}

设置列表的主属性，也就是列表前面的那个圆点
`list-syle-type: disc` #disc为圆点，circle为圆圈，square为方块，none为消除所有标志
也可以自定义：

li {
    list-style-image: url(images/backpack.gif);
    padding-top: 5px;
    margin-lef: 20px;
}

表单

……


表单里填写的内容：
     文本框
         提交按钮
     单选框

    复选框

          密码输入框

   文本区
                  选择列表
    buckaroo
    john parker