快速上手系列：CSS
一 选择符
1
通配：*{}
所有元素
类：p{}
如 p 标签等相应元素
ID：#id{}
使用相应 id 属性的元素样式
类：.类名{} 使用相应 class 属性的元素样式
包含：div p{} 被某些元素包含的子元素的样式
选择符分组： #content2 , .STYLE{} 一次定义几个选择符的样式
2
行内样式表：<p style=””>（CSS 里间隔是冒号、分号；HTML 里是等号、空格）
内部样式表：<style type=”text/css”> </style>
外部样式表：<link href=”skin.css” rel=”stylesheet” type=”text/css”>
二 CSS 字体属性
font: font-family font-size font-style font-weight font-variant（转换大小写）
三 CSS 文本属性
color text-decoration text-align vertical-align direction text-indent（文本缩进属性） line-height white-space（文本空白显示效果 nowrap 强制同行）
四 CSS 背景属性
background: background-color background-img（url()） background-repeat background-attachment（滚动方式） background-position（背景图片位置属性，两个取值——前为水平方向、后为垂直方向；
注意：先定义一个相框，原点在相框，移动的是图片。
实例如下：
.pic{width:28px;height:28px;background:url(../images/icon.gif) no-repeat;} .pic2{background-position:-40px 0px;} .pic3{background-position:-80px 0px;} .pic4{background-position:-120px 0px;} -------样式与内容的分割线----------- <li class="pic pic1"></li> （类名写前面，表示后面的类继承了前面类的属性， 省重写了） <li class="txt"><a href="buy.htm" target="_parent">购物车</a></li> <li class="pic pic2"></li> <li class="txt"><a href="help.htm" target="_parent">帮助中心</a></li> <li class="pic pic3"></li> <li class="txt"><a href="JavaScript:void(0);" onclick="addFav();"> 加 入 收 藏 </a></li> <li class="pic pic4"></li> ）
五 CSS 边框属性
border: border-style border-width border-color
六 CSS 边距属性
padding 内边距：内容与边框之间的宽度
margin 外边距：元素周围的边界宽度
七 CSS 链接属性
例：<a class=”a1” href=””></a>
.a1:link{} （这是伪类）
未访问链接：link
已访问链接：visited
悬停链接：hover
激活链接：active
八 CSS 布局属性
定位属性 position
位置属性 top、right、bottom、left
层叠顺序属性 z-index 默认为 1，值越大越在顶
透明度属性 opacity 1 为饱和，值越小越透明
超出内容属性 overflow
显示属性 visibility
浮动属性 float（只有左、右；默认的文档流是向下排列，使用 float 可以让他们挨个往左上方排列；比如布局时前面两个是文档流排列，第三个写了 float,那么从第四个开始，才是横向排列的，所以 float 是给它后面的元素看的）
清除浮动属性 clear（不想继续往左上排了，就 clear 左）
九 DIV+CSS 布局
宗旨：内容与样式分离
优点：灵活
核心：用 DIV 时，把所有元素都当成一个方块，给它精确的宽高，再 float 它！
十 课堂笔记
1 css 通配符 "*" 可以消除浏览器的默认属性，比如：
*{margin:0;padding:0;}
推荐这样 html,body,div,span,applet,object,iframe,h1,h2,p,a{margin:0;padding:0;}
而不是 *{margin:0;padding:0;}
因为 css 通配符 “*”会将网站内所有元素的默认值重设，这在大型网站会加重客户端的负担，浏览器运行速度变慢。但如果开发的是小型站点或企业网站，页面元素不是很多，使用 CSS 通配符造成的性能影响可以忽略。
2 display ：inline块拥有行属性；block行拥有块属性。
3
弹幕般滚动<marquee behavior=””direction=””scrollamout=”数值越大滚得越快”onmouseover=””onmouseout=””> 此为块级元素，用时要加宽高。
4
盒子属性：margin padding border
CSS难点总结
n 盒子模型
ü margin（外边距）
ü padding（内边距）
n 居中
ü 块级元素的位置居中：Margin作为盒子间的距离，在布局中，扮演着较为重要的角色。典型的应用为布局块级元素的水平居中，如：“margin：0 auto;”
ü 文字内容的水平居中：文字内容水平居中：例如段落<p>内的文字对齐等设置，则设置块级元素的 “text-align：center”，实现文字水平居中；
ü 垂直居中：常见的是单行文字垂直居中问题，可以设置文字所在的行的高度 height 与文字行高属性 line-height 一致，使用“vertical-align：middle;”实现垂直居中。
n 布局属性
ü position（定位）
Ø static
默认属性，按照常规文档流（从上到下，从左到右）进行定位，不能使用 top、left 等类似其他属性定位，如需要使用以上属性，必须使用除了static以外的三种定位方式。
Ø absolute（绝对定位）
指定某元素是相对于它包含的元素进行定位，绝对定位的元素是独立定位的，脱离了静态定位元素中文档流的一部分，它的定位要么是相对最近的定位祖先元素，要么是相对于文档本身。
Ø fixed（固定定位）
相对于浏览器窗口进行定位
Ø relative（相对定位）
当 position 属性设置为 relative，元素按照常规文档流进行布局，它的定位相对于它文档流中的位置进行调整。系统保留着元素在常规文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置“推开”。
Ø z-index
设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面，z-index可以拥有负数值，且仅能在定位元素上奏效（例如 position：absolute；）
Ø display
规定元素应该生成的框的类型，常用属性值有 none，block，inline等
Ø none
此元素不被显示；
Ø block
让元素按块级元素显示，前后带换行符，自己占一行，可以用在行级元素上使其拥有块级元素的特点；
Ø inline
让元素按照行级元素（内联元素）显示，一个挨一个，可以用在块级元素上，使其拥有行级元素的特点；
Ø overflow
规定当内容溢出元素框时发生的事情；
默认值：visible（内容不会被修剪，如果超出会呈现在元素框之外），还有 hidden（内容会被修剪，并且其余内容是不可见的），scroll（超出内容会被修剪，但是可以通过滚动条来查看超出的部分）
Ø visibility
设置元素是否可见，visible为可见；hidden为不可见，不同于“display：none；”的是“visibility：hidden;”的元素虽然不可见但是也会占据页面上的空间，前者则不会。（通俗讲，用 display会被挤。所以 display常用于多级菜单显示隐藏）
Ø opacity(透明度)
CSS3的属性，可以代替了之前 CSS中的滤镜属性，可以使用 value直接表示元素的透明度，0.0为完全透明到 1.0为完全不透明，例如：opacity：0.5；
