CSS基础培训教程（公司内部培训）
这是上周为公司人员培训而准备的CSS教程，这次的教程比上次CSS培训详细了不少，希望对初学CSS的朋友有所帮助。
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
一、如何使用CSS样式
1、链接外部样式（推荐）
特点：样式与代码分离。2、定义内部样式块对象
特点：页面内部使用，方便，下载流量会适当减少。
3、内联定义。
特点：随意、方便。
推荐第一种调用方式。伪类的几种样式是无法通过第三种样式定义的。
二、语法
样式表语法 (CSS Syntax)
元素 { 属性:值 }
元素的写法将在下面第三部分讲到，属性和值将在第四部分讲到。
三、选择符
通配选择符、类型选择符、属性选择符、包含选择符、子对象选择符、类选择符、ID选择符、选择符分组、伪类和伪对象选择符。
1、类型选择符
font-size:12px;
}
<div>定义的样式</div>
特点：不用定义额外的元素，直接可以写CSS样式。
2、ID选择符（#）
font-size:12px;
}
<div id=”text”>定义的样式</div>
特点：可以为单独为某个元素定义的样式。
3、类选择符（点）
font-size:12px;
}
<div class=”text”>定义的样式</div>
特点：可以为一个页面里面多个应用此类的元素定义样式。
4、包含选择符
font-size:12px;
}
<p id="text">定义的样式</p>
#text p{
font-size:12px;
}
特点：精准定位到某个元素。
上面四种写法在我们平时用的都比较多，对于第四种是前三种的一种灵活的写法。具体用哪种方式，大家可以根据自己的情况来定。
四、常用的属性。
1、字体：font, font-size, font-family, font-weight, text-decoration, line-height
A. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。
B. font-size定义文字的大小。
C. font-family定义字体。
D. font-weight定义文字的粗细。
E. text-decoration定义文字的装饰。
F. line-height定义行高。
2、文本：text-indent, vertical-align, text-align
A. text-indent，设置对象的缩进。
B. vertical-align，设置对象的上下对齐方式。
C. text-align，设置对象的左右对齐方式。
3、背景：background, background-color, background-image, background-position, background-repeat
A. background定义背景的一个复合属性。和上面的font一样，可以把后面这几个属性的值都放在font里面用。
B. background-color定义的是背景的颜色。
C. background-image定义的是背景的图片。
D. background-position定义背景的位置。
E. background-repeat定义背景的是否平铺。
4、定位：position, z-index, top, right, bottom, left.
A. position定位方式。
B. z-index 定义层叠顺序。
C. top, right, bottom 和left表示距离他父级的上边，右边，下边和左边的距离。
5、尺寸：width, height
A. width定义对象的宽度。
B. height定义对象的高度。
6、布局：clear, float, display
A. clear 设置不允许又浮动对象的边。
B. float设置对象浮动及如何浮动。
C. display设置对象是否及如何显示。
D. visibility 设置对象是否显示。
7、边框：border, border-top, border-right, border-bottom, border-left
A. margin定义外补丁的一个复合属性。同上。
B. margin-top定义对象的上边距离父级的边框。
C. margin-right 定义对象的右边距离父级的边框。
D. margin-bottom 定义对象的下边距离父级的边框。
E. margin-left 定义对象的左边距离父级的边框。
8、外补丁：margin, margin-top, margin-right, margin-bottom, margin-left
同上（外补丁）。
9、内补丁：padding, padding-top, padding-right, padding-bottom, padding-left
同上（外补丁）。
使用复合属性定义上面四个边的样式的时候一定要牢记定义的几个顺序：
一个属性值：定义四个边的样式。
两个属性值：第一个值定义上下边样式，第二个值定义左右边样式。
三个属性值：第一个定义上边样式，第二个值定义左右边样式，第三个值定义下边样式。
四个属性值：分别定义四个边的样式。请牢记定义的顺序：上、右、下、左。
10、列表：list-style, list-style-image, list-style-position, list-style-type
A.list-style是一个定义列表项目的复合属性。
B. list-style-image定义列表项目的图标。
C. list-style-type定义列表项目的标记。
11、其他：Cursor
这里只讲cursor，就是定义鼠标的显示样式，可以用图标。
12、伪类：:link, :visited, :hover, :active
:link定义链接未被点击时候的样式。
:visited定义链接点击之后的样式。
:hover定义鼠标移动到链接上的样式。
:active定义链接被激活时候的样式。
伪类只讲这四个，因为这四个用的最多，而且很多人容易出错，这里强调一个地方，书写顺序。在CSS里面写这四个伪类的时候，就按上面的顺序来写，不要颠倒顺序，否则可能达不到我们想要的效果。
* 注意在用#作为链接的时候，判断当前的链接是link状态还是visited状态。
* 一定要记住这几个伪类的定义顺序：用开头字母来表示就是LVHFA（这里的F是:focus）。
13、声明：!important
提升应用样式的优先权。这个声明在firefox和ie7上面支持，在ie6上面不支持。他的主要作用是用来调整不同浏览器显示效果的差异。
五、单位
1、长度：px
px象素，in英寸等。用得最多的是象素px。
了解：%，em
2、颜色：rgb(RGB),#RRGGBB
Rgb(255,255,255)，#FFFFFF
3、Color name：red, blue
六、注意
1、html代码和css代码尽量小写。
2、子随父姓、就近显示。
November 7th, 2007 at 4:48 pm
朋友，我不懂css，看你这份东西完全看不懂。不知是否由于你是做的ppt，给公司培训的时候是不是要边看边讲的呢。
November 7th, 2007 at 10:45 pm
@freshbug: 我不是做的PPT，直接用这个文档讲的，当然讲的时候会举一些例子并做一部分演示。