基本的CSS说明

css可以重叠

语法：
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明.例如: h1 {color:blue};
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
id选择器：
以#开头，选择对应的样式
class选择器：
以.开头，可以在多个元素中使用，可以叠加。（推荐）
内联样式：
在元素style中设置，不推荐使用。

层叠样式顺序：

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 背景属性定义背景效果:

background-color 背景颜色，例如：#ffffff,rgb(255,0,0),red
background-image 背景图像（默认水平或者垂直方向平铺重复展示）
background-repeat 设置背景图像是否及如何重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position 设置背景图像的起始位置

文本样式

color 设置文本的颜色
text-agin 设置文本的水平对齐方式
text-indent 文本的第一行缩进
line-height 设置行高
letter-spacing 设置字符间距

字体

font-family 属性设置文本的字体系列
font-style 指定文字斜体的样式等(nomal 正常，italic 斜体，oblique 倾斜)
font-size 属性设置文本的大小（为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素，1em的默认大小是16px）

链接

a 标签链接网站，可进行设置链接的字体颜色等。
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

盒子模型

主要内容：margin、border、padding、content

边框

可以设置一个边框的颜色，样式等等。border-width 属性为边框指定宽度；border-color属性用于设置边框的颜色。

css-margin

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

css-padding

当元素的 Padding（填充）（内边距）被清除时，所”释放”的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

css分组

相同的设置保持一样
例如：
h1,h2,p {color:green;}

css可见性visibility属性

visibility属性指定一个元素应可见还是隐藏，设置值为hidden。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
css显示display
1.none:
隐藏，设置为none。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
2.block:
块级元素，设置为block。
3.inline:
内联元素，设置为inline。
4.list-item
5.inline-block
…..
以下网站可以学习css关于display：
http://chuansong.me/n/505465851931

position定位

一共有4种，relative、absolute、fixed、static
1.static默认值，正常文档流排序。
注：当某个css需要在指定页面采取正常文档流时，需要指定此默认值。
2.fixed定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
注：fixed元素定位与文档流无关，不占据空间；fixed可与其他元素重叠。
理解：这个是相对于浏览器定位的，实现绝对的定位。
3.relative 想对于他自身的位置进行偏移。（不影响跟他相关的div布局）
如图，sub1进行了relative定位，此时sub1的位置仍然占位，但是已经发生了偏移。sub2没有任何影响。
注意relative的偏移是基于对象的margin的左上侧的
理解：占据了位置，可以随便移动，不会影响其他元素的定位。
4.absolute定位
这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。
当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，也就是忽略padding，当然并不会忽略margin和border。
接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。
（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

浮动float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
1.css的元素进行浮动后，他会脱离原来的文档流，遮挡住正常的文档流。
2.浮动的起始位置就是未浮动时的位置。
3.div元素浮动的话，上个元素是标准文档流，那么只有自己浮动的，垂直相对位置不变，即div的顶部总是和底部对齐的；如果上个元素是浮动的，那个此次浮动的元素就会跟着上次浮动的元素后面。（一行放不下的会挤到下一行当中）
浮动就是为了脱离标准流，让他横向排列的。
清除浮动clear
取值：none（默认值：允许2边有浮动对象）、left（允许左边有浮动对象）、right（允许右边有浮动对象）、both（2边都不允许有浮动对象）
规则牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
例如：div1，div2都是左浮动，需要div2不跟在div1后面，是清除div2对象，不是div1.(div1、div2仍然是脱离文档流的）

align对齐

中心对齐：margin-left:auto margin-right:auto width:70%
注：margin的左右必须auto，指定宽度才行。（如果是div，文字对齐，需要text-align属性）
使用position属性设置左右对齐
{position:absolute; right:0px; width:300px; }
注：进行绝对定位，此时与文档流无关了。
float设置左右对齐
{float:right; width:300px}
注：此时浮动了，可以自己定位div位置了。

参考如下文章：http://chuansong.me/n/999989551327

css组合选择器

1.后代选择器（以空格分隔）
后代选取器匹配所有值得元素的后代元素
div p {}
说明：只有div内的p元素才会执行css样式，无论这个p包含在几层，例如:

aaaa

此时，p在div内，执行css样式。
2.子元素选择器（以大于号分隔）
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
div>p {}
说明：只有div后面紧随的p元素才执行css样式，例如：

aaaa

此时，p没有紧随div，不执行css样式。
3.相邻兄弟选择器（以加号分隔）
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
div+p {}
说明：div后面紧随的p元素执行css样式，不是紧随的不执行。
4.普通兄弟选择器（以破折号分隔）
普通兄弟选择器选取所有指定元素的相邻兄弟元素
div~p {}
说明：所有div之后的，兄弟元素是p元素的，执行css样式。

css属性选择器

1.属性选择器
[title] {}
说明：包含标题（title）的所有元素执行css样式
2.属性和值选择器
[title=ruuu] {}
说明：标题（title）中值等于ruuu的执行css样式
3.属性和值选择器–多值
[title ~= hello] {}
说明：标题（title）中含有hello的执行css样式
4.表单样式
input[ type= “text”] {}
说明：表单中含有type=”text”的执行如下语句

实例说明：

1.导航栏
ul元素可以当作导航栏，但是他含有默认样式，可以采取如下清除：
ul
{
list-style-type:none;
margin:0;
padding:0;
}
说明：
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0
导航栏可以水平方式显示：
（1）ul中的li元素是block元素，改成内联元素即可。例如：li {display:inline;}
（2）所有的li元素进行浮动操作。例如：li {flocat:left; }
说明：浮动后，距离需要修改，默认样式还存在。