css基础知识
html的基本标签都是千篇一律的，为了能够个性化外观，就需要进行样式的调整，而css就是专门用来维护，管理样式的一种格式。在html中定义css有三种方法
1. 为标签添加style属性，这样的话样式只应用于这个标签：
<h1 style="属性:属性值;属性2:属性值;"></h1>
2. 在文件头的<head>里面加上<style type="text/css">标签，标签里面以css的格式写样式，这些样式对整个html文件有效：
<head>
<style type="text/css">
标签名{
属性:属性值;
属性2:属性值;
}
</style>
</head>
3. 关联外部既存的css文件
比如在<head>中添加<link rel="stylesheet" href="..." type="text/css">:
<head>
<link rel="stylesheet" href="../static/css/test.css" type="text/css">
</head>
外部的css文件中就是按照css的格式写的样式代码，如：
标签名{
属性:属性值
属性2:属性值
}
标签名2{
属性:属性值
属性2:属性值
}
以上示例中写的标签名，意思就是其作用范围内所有这个标签都要应用其定义的样式，这仍然不是很灵活，需要更灵活的定义应该诉诸于选择器，下文中会再提及。
■ css基本属性
● 背景
background-color:gray; 设置背景色 更多颜色名称参见http://www.w3school.com.cn/cssref/css_colornames.asp
background-image:url(文件路径) 设置背景图片
background-repeat:repeat-x or repeat-y or no-repeat 设置背景是否照水平or垂直方向重复平铺or不平铺
background-position:center 设置背景图片所处位置，可选的值有很多，参见http://www.w3school.com.cn/css/css_background.asp
background-attachment:fixed or scroll 设置背景图片是否随着页面滚动而滚动，fixed的话就是说背景图固定在可视界面内不动
● 文本
color
direction:ltr or rtl (right to left) 设置文本方向
text-indent:10% or 5em 设置文本缩进，意思是说设置了这个属性的元素，其子元素并不显示在其最左边而是最左边加上这段缩进值的距离（1em = 16px）
text-align:center or left... 设置文本对其，和<center>不同，这里的对其是指文本相对其父元素的对齐方式，而center是把整个元素相对于页面对齐
word-spacing:20px... 设置文字间距
text-transform:uppercase or lowercase or capitalize or none 设置文字的大小写
text-decoration:underline or line-through or none 设置文本划线，可以上划线下划线删除线以及none（比如你想让所有超链接不要有下划线，就可以设置a的css中令text-decoration:none）
● 字体
font-family:... 设置字体（家族），字体家族是说字体有很多相似的家族，系统好像会自带一些家族，属于这些家族的字体都可以直接拿来用
font-style:normal or italic 正常or斜体
font-weight:bold or normal 粗体or正常
font-size = 15px 设置字体大小，也可以用em等单位(1em = 16px)
● 链接
在html中链接有四种状态，分别是 a:link（普通，未访问的链接）,a:visited（已被访问的链接）,a:hover（鼠标位于链接上方时）,a:active（链接被点击时）
可以对不同状态的链接进行不同的CSS设置：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
● 表格
标签从table,tr到th,td都可以设置下面这些属性
border:1px solid blue 设置边框样式（默认情况下双边框，即单元格和表格有各自的边框，如果不要双边框可以调整border-collapse属性）
width，height:px或百分比 设置表格、单元格的宽和高，可以是百分比
text-align和vertical-align 设置某个单元格或表格全体的水平、垂直对齐
padding:px或百分比 设置内容距离单元格边框的距离（包括上下左右）
● 透明度
在css3中有属性opacity:0.5这样的形式来调整一个元素的透明度。1是100%不透明，0是全透明，用小数来调整即可
■ 框模型和边框
html中有一套框模型来表现元素的位置（主要用来搞清楚margin和padding的区别）：
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
在css里设margin和padding，只有一个数值是默认上下左右全部都应用这个数值。但是如果想要灵活地控制不同的边有不同的值的话可以单独设置 margin/padding-top, margin/padding-right等等
关于边框的设置：
border-width:像素 设置边框宽度
border-style:solid or dotted or dashed等等 设置样式，如果不同边想应用不同样式可以border-bottom-style , border-left-style等等，下面属性也类似
border-color 设置边框颜色
以上三个属性可以通过border:1px solid black;这样的方式来一次性设置
■ 元素选择器
正如上面说到过的，css中直接写标签名的样式个性化粒度不够细，要做到更细致的选择，应该用元素选择器的语法。这里的选择器语法跟jQuery中用的选择器语法是一样的
元素选择器的意思就是通过一定的语法规则写成的表达式，让其可以指定一部分的元素。
● 多项选择
如果想让所有标题标签都应用同一个样式，那么可以h1,h2,h3,h4,h5,h6{...}，即用逗号隔开元素代表多项选择
● 通配选择
就是*号，*{...}会把相关样式应用到所有元素上，.class *{...}的样式会应用到所有含class类的元素的所有子元素上
● 类选择
匹配有class属性的元素，方法是.class
.class{...}的css将应用于所有class属性设置成"class"的元素。类选择可以和标签名选择结合起来：p.class就是选择所有class配置成"class"的p元素。类选择还可以累计，而累计的类选择只匹配同时包含那些类的元素，比如.class1.class2{...}将选择属性class="class1 class2 [或者更多内容]"的元素。
● id选择
id选择看的是元素的id属性。方式是#id。id和class不同，一个页面中一种元素的每个实例的id应该都是互不相同的。所以id定位更加精细一些。同类选择类似，可以有p#id这样的表达。但是不能有#id1#id2的表达。
● 属性选择器
其实class和id也是元素的两个属性而已。如果要选择其他属性的值的话也可以，但是需要指出属性的名称：
[attribute="value"]来定位某个含有attribute属性，且其值为value的元素，和上述类似的可以有p[attribute="value"]的表达。
如果不写等号和后面的东西，就是选择含有这项属性的元素（不管其值是什么都选择）
除了写等号，也可以写^=,$=,*=分别表示attribute的开头是"value",结尾是"value"以及attribute中包含"value"。
另外还需要注意的一点是，value必须和原文中的一模一样，比如元素有 attribute = "value1 value2"的话，[attribute="value1"]是匹配不到的，要[attribute="value1 value2"]
● 后代元素选择 & 子元素选择
比如有时候我想让在某个div下的某些p的样式做出变化，这样的话就需要搞一个双重的条件。多重条件就可以考虑一个后代元素的选择，其方式是空格：
div.container p#name{...}的意思就是选择class=="container"的div里面的id=="name"的p，将后面定义的css应用到这个（或者说这种）p元素上。当然，这种p肯定是这种div的后代元素了
如果不需要后代元素这么庞大的概念，只需要子元素这一层（不要孙元素及以下）,那么方式就改成>。比如div.container > p#name{...}这样的话就只会找div下一层的p而不找更下面的了
● 同辈元素选择
和后代元素类似的，+号选择的是之前定位到的元素的后一个同辈元素，和后代元素选择类似的不再多说
● 伪类选择
伪类是html内置的一些，用于标识元素状态的标志。在选择器中用:来选择，比如之前提过的超链接的几个状态的设置，就有a:normal , a:visited等，这些就是伪类了。除了a的那四个，还有诸如first-letter,first-line之类的伪类可以用。（注意，hover这些伪类并不一定只有a可以用，其他标签如img等也可以用哦）