CSS 指层叠样式表 (Cascading Style Sheets),为了美化Html界面,提高工作效率.
语法结构:
例: 
基本分3种形式,其中 内联样式 有最高优先执行权.
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
1,内联样式表
在每一个 标签<>内写入 style="", " "内写内容,虽然控制精准,但是重用性差如果大量使用会给多写很多代码
2,内部样式表
必须位于<head> 内,当浏览器加在首先加载CSS样式表.
3,外部样式表
也必须位于<head>内,就是把 内部样式表在Html页面外建了一个.CSS结尾的文件,在head里面写一个<link>连接 把这个CSS文件连接进来,比起内部样式表来系统多执行了一步寻找文件,这里href路径必须写对,一般这个CSS文件要放在Html文件夹里. 这样写的好处就是在Html页面不会看到CSS过多代码,显得整齐.
__________________________________________________分割线__________________________________________________________
选择器:
因为一个Html页面里面会有多个<div>,<p>等标签,如果我们一味的 用div{} 来写样式的话那么所有的div都是千篇一律的,如果用内联样式再改个别div那么CSS就不好使了. 所以这里我们在标签里面也分类 class 和 id 如: <div class="div1">一</div> <div id="id1">二</div>
如果我们要改 一的 div样式的话就可以 .div1{样式} 选择 class使用 . id不允许重复.
如果要改 二的 div样式的话就可以 #id1{样式} 选择 id使用 #
id选择器优先级高于class选择器优先级高于标签名选择器，优先级高的会覆盖掉优先级低的样式，样式表优先级高于属性的
复合选择器
以逗号隔开；并列关系，同时起作用如：#xx,#dd{ 样式 }
以空格隔开，后代关系，如果p在div里面，则用 div p { 样式 }
以点隔开的，筛选关系，p.qd { }对p进行class筛选，p里class为qd的执行样式
__________________________________________________分割线__________________________________________________________
引用:
（二）样式：
一：背景与前景
background-color:#eeeeff;背景颜色
background-image:url(image/8b322d3f373e4a3fb8a1677e.jpg)；背景图片（默认平铺）：
background-attachment:fixed; 背景固定
background-attachment:scroll;背景和字一起滚动，默认是一起
background-repeat:repeat;对齐方式，默认平铺repeat
background-repeat:no-repeat;不平铺
background-repeat:repeat-x;横向平铺
background-repeat:repeat-y;纵向平铺
background-position:center;不平铺的情况下位置放到中间
background-position:right bottom;右下角
background-position:right 100px bottom 100px;离右边100，离下面100，可以是负的值
前景
font-family:"隶书";字体名称（微软雅黑，宋体）
font-size:12px; 字体大小，像素（12px,14px,18px）8em默认字体的8倍还可以用百分比
font-weight:100; bold,normal 是否加粗
font-style:inherit; italic,normal是否倾斜
color:#09F;颜色
文本对齐修饰
text-decoration:underline;下划线，overline上划线，line-through删除线，none是去掉下划线，可以去掉超链接的下划线
text-align:center;横向对齐方式
vertical-align:middle;纵向对齐方式top.middle,bottom
text-indent:首行缩进量，如果字体是14px,则缩进两个位28px
line-height:行高 一般是1.5到2倍的字体大小
二：边界与边框
1.border类：边框
border: 5px solid blue ；5个像素的粗细，样式是实线，颜色是blue；
border-5px; border-style:double;border-color:red;这是分开设置粗细，样式和颜色
border-top:5px solid red;设置上面的 border-bottom:5px solid red;设置下面的
2.margin类：外边距
margin:10px;四个边距都是10px； margin-top:10px; right,left,bottom;上右左下
margin:10px 0px 10px 0px;顺序是顺时针：上右下左。
3.padding类：内边距
padding:10px 0px 10px 0px;顺时针，上右下左
三：列表与方块
默认布局方式，流式布局，上到下，左到右，相对流式布局
width,height, 只有在绝对定位布局时可用（left,top,right,bottom）
对ol列表：
list-style:none;去掉有序数字 circle;是圆圈，disc圆点
list-style-image：url(images/8.jpg);列表图片
list-style-position:outside; 符号在边距上，inside符号在边距之内
margin padding 默认是有边距和间距
list-style-type:disc 类型
四：格式与布局
布局的时候一般最上面写上：
*
{
margin:0px auto;
padding:0px;
}
让所有的外距和内距为0，加了auto居中。
1.position：
obsolute; 绝对定位，放在页面首屏的那个位置，跟着滚动
外层没有position=absolute或relative它按照浏览器边框定位
如果外层有position=absolute或relative它按照外层的那个元素的边框进行定位
fixed； 固定在页面的一个位置上，滚动屏幕，它不动，针对浏览器边框定位
正常一个div默认占一行，确定它本来应该在的位置， 如果不设置position，则left,right,top,bottom不管用
relative;相当于之前应当在的位置进行移动，之前的位置应该是左上角
2.z-index:9; z轴，控制谁在上层，大的压小的
3.溢出overflow:超出范围
hidden隐藏 scroll出现滚动条
4.float:浮动方向，原本默认占一行，float之后可以在一行内放多个
float:left 从左边浮
5.clear:both 截断流 加一行<div style="clear:both">截断浮动流
6.cursor:pointer鼠标放到上面变形状，pointer为手
7.margin:auto 页面居中
8.显示方式：dispaly:none不显示/block 块换行/inline在一行上，宽和高都不可用/inline-block在一行上显示，可以设置宽和高 不显示也不占地方
9.visibility:可视性，hidden隐藏,visible显示。不显示但是占地方
10.超链接的：
a:link 没访问过的效果
{
text-decoration:none;
color:
}
a:visited 访问过的效果
{
color:
}
a:hover 鼠标放上去时候的效果
{
color:
}
11.特殊符号：© 版权符号
12.半透明效果
<div class="box">透明区域</div>
样式表中
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
}