CSS笔记

CSS：其实就是为了修饰美化HTML元素的。也就是 HTML是名词， CSS是形容词。CSS的存在很大程度可以让HTML代码实现低耦合，复用性极高。

CSS：属性:值。如：style="color:red"。
CSS有三大种实现形式：
1、内嵌形式。style="color:red"
2、文件头部。<style>....</style>
3、文件外部。<....xxx.css>

CSS 一般有三大选择器：
1、元素选择器 根据某个HTML元素标签，来批量设置。如：div{}
2、ID选择器 根据元素属性id的值来设置。注意：ID在CSS中是唯一的。如：#testDiv{}
3、类选择器 根据元素属性class的值来设置。如：.testDiv{}
注意：在CSS中有很多类似的嵌套的设置样式。如：#testDiv .abc{}

CSS中，颜色的表示有三种：
1、英文字母 yellow blue red
2、十六进制 如: #FFFFFF 白色 #000000 黑色
3、RGB。 如: rgb(255,255,255).

背景：background
background : background-color || background-image || background-repeat || background-attachment || background-position

background: #fff url("img/bd.png")

1、color 背景颜色
2、image 背景图片
3、repeat 是否重复显示，repeat-x / repeat-y
4、position 所在位置
5、attachment 背景图片是否随滚动而滚动

background-position : length || length
background-position : position || position
参数：
length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : 　top | center | bottom | left | center | right

background-attachment : scroll | fixed
参数：
scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

文字格式: text
text-align: 文字 居中，靠右，默认靠左。
text-decoration: none 表示去掉下划线。一般用于a标签
text-indent: 1%; 文字缩进，百分比是根据设置的标签的宽度决定。

文字：font
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font-style: 字体格式。
font-variant： 大小写字母
font-weight: 字体是否加粗
font-size: 字体大小
line-height: 行高
font-family:字体

超链接: a
a:link{ } 普通链接样式
a:hover{} 鼠标悬停样式
a:visited{} 成功访问后的样式
a:active{} 链接被点击的那一刻
cursor: pointer; 鼠标手势，一般用于有点击事件的情况下加入。

列表: list

list-style: list-style-image || list-style-position || list-style-type
list-style-image: 图片。
list-style-type: 图形类型。
list-style-position: 图形位置

边框：border 注意：批量设置四个边，顺序为上右下左，顺时针。

border-color: 批量设置颜色
border-top/bottom/left/right-color: 设置单边颜色
border-radius: 批量设置边框圆角
border-top-right-radius: 设置右上的圆角
border-style: 批量设置边框样式。一般用 solid 实线。
border-width: 批量设置边框宽度。
border: border-width || border-style || border-color

盒子模型：每个控件都是一个盒子模型
盒子模型包括：外边距、边框、内边距，以及物体本身的尺寸。
外边距是指控件与控件之间的距离。注意：是相邻的控件距离。
内边距是指子控件以父控件的左上角原点为轴心点的距离。

outline 轮廓 位于控件最外层
outline: 宽度 颜色 轮廓类型
outline-style: solid;
ouline-color: black;
outline-width: 1px;

float: 浮动。一般使控件集体向左移 或者 向右移。
一般操作对象就是图片。
float浮动常用于布局。
clear:both 用于清除浮动。

尺寸：
1、line-height 行高
2、max-height 最大的高度
3、min-height 最小的高度
4、max-width 最大的宽度
5、min-width 最小的宽度
em px(像素单位) pt

position： 定位
1、relative 相对定位，是指相对于临近的元素的定位。
2、absolute 绝对定位，是指邻近父元素的定位，如果没有那就是body定位，注意：如果子控件定义了绝对，那么父控件应该定义绝对
absolute 找的就是已经定位过的父元素，如果没有，那么就去找body.

3、fixed 不会随着窗口的滚动而滚动

static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性

z-index: auto | number
参数：
auto : 　遵从其父对象的定位
number : 　无单位的整数值。可为负数

设置边框无边距。
body{
margin: 0px;
padding: 0px;
}

伪类：其实就是产生特殊效果，行为的类。
:link
:visited
:focus
:active
:hover
....

overflow： hidden 该句话产生的特效就是超过范围以后，隐藏
display: none; 隐藏该控件
display: block; 针对于块元素的默认值,如果block作用于内联元素上，是会添加新行的。
display: inline 针对于内联元素的默认值，如果inline作用于块元素上，只会显示内容部分区域。


visibility：
inherit : 　继承上一个父对象的可见性
visible : 　对象可视
hidden : 　对象隐藏
collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。
说明：
设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。
如果希望对象为可视，其父对象也必须是可视的。
对应的脚本特性为visibility。

zoom: 2.0 缩放效果。1.0为正常大小。