1、最近看看一些CSS的东西，发现每次看过就忘记，做起东西来就会非常的慢，所以有时间的话可以抽空多看看别人的网站，然后想想自己能不能做出这种效果。 2、有哪几种设置样式的方式：
浏览器缺省设置
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表（位于 <head> 标签内部）
<head>
<style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style>
</head>
内联样式（在 HTML 元素内部）
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式 根据优先级得到最后的结果
3、不受继承影响
//元素选择器 body { font-family: Verdana, sans-serif; }
//分组选择器 td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; }
p { font-family: Times, "Times New Roman", serif; }
p再设置一次值就不会受到body属性的影响
//通配符选择器
- {color:red;} 类选择器一样与ID 选择器中可以忽略通配选择器。
//多类选择器
.important.urgent {background:silver;}
这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>
4、ID选择器
同一个文档中不能有相同的ID
#red {color:red;}
5、类选择器
.center {text-align: center}
6、派生选择器
li strong { font-style: italic; font-weight: normal; } //会选择后代只有有strong标记的元素
h1 > strong {color:red;} //只会选择h1的子节点是strong的元素
table.company td > p //这种是结合后代选择器和子选择器
h1 + p {margin-top:50px;} //这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }
.fancy td { color: #f60; background: #666; }
td.fancy { color: #f60; background: #666; }
7、属性选择器
[title] { color:red; }
[title=W3School] { border:5px solid blue; }
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
属性与属性值必须完全匹配：
<p class="important warning">This paragraph is a very important warning.</p>
如果写成 p[class="important"]，那么这个规则不能匹配示例标记。 要根据具体属性值来选择该元素，必须这样写：
p[class="important warning"] {color: red;}
可以把多个属性链接在一起选择文档：
a[href=""][title="W3School"] {color: red;}
8、需要记住的最常见的使用
margin 属性值的规律：
margin: top right bottom left
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
9、定位
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
其中position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。