CSS:层叠样式表
指导标准：html内容与css样式分离应用步骤：css载入，css选择器选中元素，添加属性和属性值
css应用到html的3种途径
1：外部样式：<link rel="stylesheet" href="style.css">
style.css，css文件内直接书写样式表内容：例如：div {color:#f00;}
2：内部样式：写在html文件内的css样式例如：
<style>
div{color:#f00;}
</style>
3：内联样式：直接写在html标签内的css样式,例如：
<div style="color:#ff0000;">div里面字体红色</div>
4：必须放在本样式表代码最前面(不推荐，淘汰用法)
<style>
@import url(global.css);
</style>
------------------------
/*css注释*/
------------------------
html的节点树结构css的继承性
------------------------
css格式、选择符，属性和值
* 选中所有元素div{color:#f00; font-size:14px;}
/*标签选择符，选择html标签*/
.class{} /*类选择符，选择定义了类名的html标签，例如<div class="test"></div>*/
#id{} /*id选择符，选择定义了id名的html标签，例如<div id="id"></div>*/
.a, #b, p, div{} /*多选择符，逗号分隔，表示全部选择符同时操作*/
#id .a div{} /*包含选择符，空格分隔，层叠，一层一层套着*/
p.class{} /*选择类名为class的p元素*/
------------------------
颜色和长度单位
color 颜色
p {color:#ff0000;}
width 宽度
height 高度
.test{width:50px;height:30px;}
min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度
以上4个最大最小属性，ie6不支持
可以使用以下方法近似兼容：.test{min-width:100px; _width:100px;}
长度单位：
px 常用，好像低版本例如ie6不能自动缩放，其他浏览器似乎可以
em 少用
% 少用,这俩也详细讲讲， 这些比例都是相对于父元素的font-size而言的
颜色通过图片软件取色器获取：#ff0000 #f00
------------------------
列表样式
list-style-type:disc;(none为无样式)
list-style-position:outside;(inside为列表标记放置在文本内)
list-style-image:none;
list-style-image:url(skin/ico.png);
简写：
list-style:disc outside none
list-style:circle inside url(../img.gif)
------------------------
文字
font-family 文字字体,字体名为中文或有空格时候需用引号括起。
例子：.test{font-family:'宋体',arial,georgia,verdana,helvetica,sans-serif;}
font-size 文字大小，值为px、em、%
例子：.test{font-size:24px;}
font-weight 文字是否粗体，normal 默认正常，正常bold 粗体
例子：.test{font-weight:bold;}
font-style 文字是否斜体，normal 默认正常，italic 斜体
例子：.test{font-style:italic;}
line-height 行高，文本行的间距，normal 默认，px，百分数指定行高，可以负值
例子：.test{line-height:20px;}
文字css简写：详见下面，使用需慎重，容易出错，建议单独设置
简写：/*24号字，宋体*/
例子：p{font:24px '宋体';}
中间：/*24号字 文本间距50px 宋体,Arial*/
例子：p{font:24px/50px '宋体',Arial;}
完整：样式（斜体） 粗细 大小 行高 字体。
例子：p{font:italic bold 12px/30px '微软雅黑','simsun';}
------------------------
文本
text-align 对齐，文本怎样对齐，值为 左/中/右 对齐：left/right/center
例子：.test{text-align:center;}
超出不换行
white-space
normal： 默认处理方式。
pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
超出隐藏
overflow:
visible:默认，不剪切内容
hidden:超出对象尺寸内容裁剪
例子：.test{overflow:hidden;}
text-indent 文本缩进，像素或em，每行开头缩进
letter-spacing 字符间距
vertical-align 内联元素在行内的垂直对齐方式，
baseline 默认，基线对齐，px或百分比数字，基线算起的偏移量，可为负值
例子：.test{vertical-align:10px;} /*文本向上偏移10px*/
------------------------
a标签四种状态，伪类
浏览器默认a标签状态一般不用改。注意顺序，不能倒混顺序否则无效
a:link{text-decoration:none; color:#FF0000}/* 未访问的链接，去掉下划线，红色*/
a:visited{color:#00FF00}/* 已访问的链接，绿色 */
a:hover{text-decoration:underline; color: #FF00FF}/* 鼠标移动到链接上，带下划线，ie6只支持a标签*/
a:active{color:#0000FF}/* 鼠标按下链接， 蓝色，不常用*/
少用的一个：a:focus{ outline:1px solid #f00; background:yellow;}
元素焦点，选中后样式，通常tab选中
a.red:visited{color: #FF0000} /*特定class标签下的a标签设置*/
ie6对于伪类，只有a标签支持（加了href时），其他标签都不支持，
------------------------
css盒模型
盒模型内凡长度单位都可为px或百分比值
浏览器标准模式，怪异模式
width 宽度
height 高度
例子：.test{width:10px; height:20px;}
margin 外边距
例子：.test{margin:10px;}
padding 内边距
例子：.test{padding:10px;}
border：边框，边框比外内边距多了颜色和样式属性border-width 边框宽度
例子：.test{botder-width:10px;}
border-style 边框样式
例子：.test{border-style:solid;}
border-color 边框颜色
例子：.test{border-color:#f00;}简写：.test{border:5px solid #f00;}
=============================
1：margin/padding/border都有四个属性，为top/right/bottom/left，
margin-top
margin-righ
tmargin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
border-top
border-right
border-bottom
border-left
例子：.test{margin-top:5px; padding-bottom:10px; border-left:15px solid #f00;}
/*上外边距5px，下内边距10px，左边框15px 实线 红色*/
2：简写 margin:上 右 下 左（顺时针）或 margin:上下 左右 或 margin:5px（四面一样）；
例子：.test{margin:1px 2px 3px 4px;} /*元素外边距为：上1px 右2px 下3px 左4px*/
例子：.test{margin:1px 2px;} /*元素内边距为：上下1px 左右2px*/
例子：.test{margin:1px;} /*元素外边距为：四面都1px*/
3：border边框比起内外边距，每个方向都有3个属性
border-top(right/bottom/left)
border-top-width 上边框的宽度
border-top-style 上边框的样式
border-top-color 上边框的颜色
例子：.test{border-top-width:1px; border-top-style:solid; border-top-color:#f00;}
简写同border，例子：.test{border-top:1px solid #f00;}
上例为：元素顶边宽1px 实线 红色
(right/bottom/left同上，例如 border-left-style)
------------------------
背景图片
凡不是网页内容中的图片而是用于装饰性的图片，应使用css背景图片
background:background-color 指定对象的背景颜色
例子：.test{background-color:#f00;}
background-image 指定对象的背景图像，none 默认无背景图，background-image:url(test.jpg);
例子：.test{background-image:url(abc/test1.jpg);}
background-repeat 指定对象的背景图像如何铺排填充。
repeat 默认，背景图横向纵向平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat: 不平铺例子：.test{background-repeat:repeat-x;}
background-position 指定对象的背景图像位置。1个值时为左右，2个值时为 左右/上下 ，值为百分比或像素
例子：.test{background:url(test1.jpg) no-repeat -20px 20px;}
背景图片属性简写：颜色，图片，平铺，定位
例子：.test{background:#fff url(img.png) no-repeat 0 0;}
css sprints定位技术(先设定标签宽高，x、y轴都为负值，一般图片做成长条，x为0，只移动y轴)
例子：.test{width:30px; height:30px; background:url(images/sprite.png) no-repeat -5px -10px;}
------------------------
布局
标签元素类型：内联元素，块级元素
块级元素：优点：盒模型属性都支持。缺点：换行。
内联元素：优点：不换行。缺点：无 宽、高、上下内边距、上下外边距属性。
display:
inline,默认，指定对象为内联元素
block,块元素
inline-block,元素本身内联元素，元素内容做块级元素，可给内联元素增加宽高
none:删除对象(不保留对象占位)
例子：.test{display:inline-block;}
行内元素列表：宽高属性无效，外内边距只有左右生效，上下无效（针对布局），
要改可以用line-height,或者display:inline-block
visibility:
visible ：默认，设置对象可视
hidden:设置对象隐藏（保留对象占位）
例子：.test{visibility:hidden;}
浮动：float
none 默认 不浮动
left:对象浮动在左边
right:对象浮动在右边
例子：.test{float:right;}
=-========
浮动最初的作用：用来做文字环绕图片排版:图片 float:left
浮动布局的根本目的：把竖排的块级元素改为横排。
普通流：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，
那么A元素会跟随在上一个元素的后边
(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，
也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
==========
清除浮动
clear 清除两边浮动
none： 允许两边都可以有浮动对象
left： 清除左边有浮动对象
right： 清除右边有浮动对象
both： 清除（两边）有浮动对象
例子：.test{clear:both;}
对于CSS的清除浮动(clear)，
这个规则只能影响使用清除的元素本身，
不能影响其他元素。
------------------------
定位
网页结构加载流程
1：普通流（文档流）
2：浮动流 float
3：绝对定位流 position
元素定位：
position:static/relative/absolute/fixed
static 默认，普通流，不能移动，不能使用zindex和top、right等偏移属性
relative:相对定位，普通流，有占位。
absolute:绝对定位，脱离常规流，无占位。
fixed:固定定位，脱离常规流，以浏览器窗口定位（ie6不支持）
绝对、相对定位的基准是：不是以static定位的最近一个祖先元素，若无非static祖先，以 初始包含块 定位，在浏览器里，根元素的包含块（HTML）为初始包含块，只是一般情况下看上去像是body区域。
正确的是：只要父级元素设了position并且不是static（默认既是static），
那么设定了absolute的子元素即以此为包含块（最近的）。
绝对定位（Absolute positioning）元素定位的参照物是其包含块，即相对于其包含块进行定位，
不一定是其父元素。
例子：.test{position:absolute;}
z-index 元素层叠顺序，值越大越靠上
例子：.test{position:relative; z-index:50;}
top 元素顶部偏移量
right 元素右边偏移量
bottom 元素底边偏移量
left 元素左边偏移量
例子：.test{position:absolute; top:10px; left:100px;}
综合例子：.test{position:absolute; top:auto; left:10px; z-index:100}
------------------------
其他
cursor:pointer; 鼠标放上手型
例子：.test{cursor:pointer;}
list-style:none 去除列表li前面黑点
例子：.test{list-style:none;}
ul li 列表横排：li加css样式：float:left
水平居中：必须定义宽度，margin:0 auto
例子：.test{width:980px; margin:0 auto;}
文本环绕图片：img css样式为：float:left
网页左右两栏布局（固定宽度）：
1：左栏float:left，
右栏float:left或right,
底部clear:both;注意宽度
2：左栏 float:left
右栏 左外边距设为和左栏宽度一样 margin-left:100px;
不固定宽度：左右栏宽度使用百分数定义
------------------------
CSS选择器优先级
相同优先级下，位置在文档后面的覆盖前面的
越能具体描述元素的css选择器，优先级越高
*{background:#f00;} /* 星号选择器 优先级 0*/
div{background:#0f0;} /*标签选择器 优先级 1*/
.aaa{background:#00f;} /*类名和伪类选择器 优先级 10*/
#bbb{background:#ff0;} /*id选择器 优先级 100*/
/*行内样式 优先级 1000*/
div{background:#0f0 !important;}/*!important 优先级 10000*/
!important 优先级覆盖（ie6需要分开两行写才生效）
例子：.test{color:#f00!important;color:#000;}
ie6.test{color:#f00!important;}.test{color:#ff0;}
/*优先级组合*/
ul li div div{background:#f00;} /*优先级 4*/
li .wai div{background:#0f0;} /*优先级 12*/
li .wai .aaa{background:#00f;} /*优先级 21*/
------------------------
网站ico图标在线生成：http://www.degraeve.com/favicon/
------------------------
css重置 css reset
简略版本：*{margin:0; padding:0;}
正常版本：*{margin:0; padding:0; border:none; list-style:none;}
进一步版本：* {margin:0;padding:0;list-style:none;float:none;outline: 0;font-style: normal;border: none;}
------------------------
css整体书写步骤
1：css重置 reset
2：css 全局属性 global
3 : css模块属性，从外到内
网友评论