一、初识CSS
1、CSS是什么？
CSS是CascadingStyle Sheets（级联样式表）的缩写。
2、CSS可以用来做什么？
CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持CSS。
3、CSS跟HTML的区别在哪里？
HTML用于结构化内容；CSS用于格式化结构化的内容。
在Tim Berners-Lee发明万维网（World Wide Web）的那个年代，HTML语言是唯一用于给文本添加结构的语言。作者可以通过声明“这是一个标题”（利用h1标签）或“这是一个段落”（利用p标签）的方式来标记文本。
随着Web逐渐流行起来，网页设计者们开始寻求为网页增添布局的可能性。为此，当时的浏览器厂商们发明了一些新的HTML标签（比如<font>等），以引入了新的布局——而非新的结构。
这也导致了原本用于进行文本的结构化的标签（比如<table>等）越来越多地被误用于进行页面的布局。许多新的布局标签（比如<blink>）只有一种浏览器支持。“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。
CSS的发明正是为了改善这一状况，它为Web设计师们提供了完善的、所有浏览器都支持的布局能力。而且，文档的表现样式与内容的分离，也令网站维护容易了许多。
4、采用CSS有哪些好处？
CSS是Web设计界的一次革命。CSS的具体优点包括：
（1） 通过单个样式表控制多个文档的布局；
（2） 更精确的布局控制；
（3） 为不同的媒体类型（屏幕、打印等）采取不同的布局；
（4） 无数高级、先进的技巧。
5、CSS在html中的使用方法
（1）行内样式表（style属性）；
<body style="background-color: #FF0000;">
（2）内部样式表（style元素）放在头部；
<style type="text/css">
body {background-color: #FF0000;}
</style>
（3）外部样式表（引用一个样式表文件）。
<link rel="stylesheet" type="text/css" href="style/style.css" />
详见：http://zh.html.net/tutorials/css/lesson2.php
二、颜色与背景
1、前景色
<h1>{color:#FF0000;}
2、背景颜色
(1) background-color:transparent;
(2) background-color:rgb(255,0,0)
(3) background-color:rgba(255,0,0,0.5)
ps:“a”通道用来设置透明度，为0-1之间的值，0为全透明，1为不透明
(4) background-color:#FF0000;
3、背景图片
background-image:url(“logo.jpg”);
background-repeat:no-repeat; /*repeat-x或repeat-y*/
background-attachment:fixed; /*fixed固定 scroll滚动*/
background-position：center；
三、文本
padding:10px; ---边距
word-spacing :5px; ---针对英文,空格距离
letter-spacing :5px; ---字符间距
line-height：2px; ---行间距
direction：ltr； ---文本方向： 左至右ltr 右至左rtl
text-transform :uppercase; --- 全部英文大写uppercase 首字母大写capitalize 全部英文小写lowercase
text-indent:2em; ---文本缩进：em几倍于文本大小
text-align：left； ---文本对齐： 居中center 两端对齐justify
text-decoration：underline overline； ---文本装饰： 上划线overline 删除线line-through
white-space：normal； ---文本空白处理 格式化pre 不卷绕nowrap
保留空格回车并卷绕pre-wrap 合并空白保留回车pre-line
四、字体
font-style: italic斜体 normal正常 oblique倾斜
font-weight: blod加粗 指定字体显示的浓淡程度（100-900）
font-size: 2em;2px;1% 字体大小
font-family： serif sans-serif monospace等宽 cursive手写 fantasfy无法归类
font-variant: small-caps以小尺寸显示的大写字母来代替小写字母
五、效果
text-shadow:0px -1px 0px #FF0000;
oueline-color:red;
outline-style: none：无轮廓。与任何指定的outline-width值无关
dotted：点状轮廓。
dashed：虚线轮廓。
solid：实线轮廓
double：双线轮廓。两条单线与其间隔的和等于指定的outline-width值
groove：3D凹槽轮廓
ridge：3D凸槽轮廓
inset：3D凹边轮廓
outset：3D凸边轮廓
outline-width:10px;