CSS杂记
没看CSS（Cascading Style Sheet）之前，一直以为CSS挺难的，在网页上看到的那些代码一点都不知道代表些什么，晚上花了几个小时看了一下，发现也不过如此，而且好像属于超级简单的那种。有这种感觉不知道CSS真的是这样还是由于我孤陋寡闻的缘故。
其实我感觉学CSS只要知道CSS的类型就够了，然后看到不认识的标签google一下就可以了。不过如果要自己设计还是要了解一些里面的具体内容。计算机学到现在，我越来越感觉不管是做软件还是弄网站，就像是在玩搭积木的游戏，先要了解你要做什么东西，就像孩子们的志愿，我要造长城还是搭一个竖型塔亦或只是键一个小木屋就够了，然后孩子们会根据手上的积木材料来决定怎么去搭建自己的梦想，就像是我们根据不同的语言功能去拼凑我们的软件。感觉知识的模式都是这样，高中学做数学题目我也有这个感觉，我很少用参考书，一般总是先看看书本，给我提供了多少的定理、公式等，然后碰到题目就去套，总有一个会是正确的。运用知识不就是套用自己的学到过的知识的过程吗？想到这里我很后悔小时候没有玩过搭积木的游戏了！记得那个时候我应该还不知道搭积木是什么东西吧，不知道从什么时候才开始知道有这个名词，就是感觉等自己很大以后才知道！
言归正传了，CSS主要包括3种样式类型，即类选择器样式、ID选择器样式、重定义标记样式。类选择器样式定义如下：
（标记名.）类名{样式属性：取值；样式属性：取值；…}
在HTML标记中通过class属性来指明样式。标记名可以省略，如果加上标记名，则这种样式只能在该标记名中使用，且如果该标记名中class属性没有指明该类，这个样式也不会被使用。这是一种最常用的样式类型。
ID选择器样式定义如下：
#标识名 { 样式属性：取值；样式属性：取值；….}
在HTML标记中通过ID属性来指明样式。
重定义标记样式定义如下：
标记名 { 样式属性：取值；样式属性：取值；….}
在HTML中，该定义的样式会自动运用到当前也中所有与该标记同名的标记中，除非在页面中该标记定义了自己的同样式中属性一样的样式。因为HTML中的属性值一般为最后一个设置的属性值，如果有多个相同的属性值被设置的话。
一般有四种CSS的引入方法：链入外部样式表、导入外部样式表、内部样式表、内嵌样式。
链入外部样式表通过HTML中的link标记实现。
导入外部样式表通过以下语法实现：
<style type=”text/css”>
@import url（样式表地址）
选择符 { 样式属性：取值；样式属性：取值；….}
选择符 { 样式属性：取值；样式属性：取值；….}
….
</style>
我是属于菜鸟级别的，对这个还没有看到过，只是我有点想不明白，既然后面还要定义选择符，干嘛还要从外面导入，还是后面的定义根本就是多余的，通过@import语句就直接可以用外部的样式文件，是我手上的这本书里写的画蛇添足了？
内部样式表通过在head标签中定义的style标签来实现。为了避免不支持标签的浏览器不会显示不必要的东西，可以将标签内容放入注释中<!-- …. -à。
<style type=”text/css”>
选择符 { 样式属性：取值；样式属性：取值；….}
选择符 { 样式属性：取值；样式属性：取值；….}
….
</style>
内嵌样式是混合在HTML中定义的样式，其作用域范围只有为当前标签中。定义如下：
<标记名 style=”样式属性：取值；样式属性：取值；….”>
注：
1） 具有相同属性和属性值的选择符可以组合。如：p, table { font-size: 9pt}
2） CSS注释语句为/* …. */
3） 多个属性通过分号;分开。属性值若超过一个单词，需放在””中。
4） 各个标签类型的优先级从大到小：ID选择器样式à类选择器样式à重定义样式
5） 几种特殊的样式：
a) a:link 链接文字的默认样式。
b) a:active 链接文字使用时的样式（鼠标正在按下时）。
c) a:visited 访问过的链接文字样式。
d) a:hovor 鼠标位于链接文字上方时的样式。
CSS标签属性
字体和文本属性：
1. font-family:”字体1”,”字体2”,…. 设置字体
如果不存在字体1，则浏览器会试着使用字体2，一次类推。如果定义的字体都不存在，则会使用默认字体。
2. font-size:字体字号 设置字号
字体字号可以用预定义的单词也可以数字甚至百分比，除了具体数字，实际中显示的字体大小和浏览器的设置有关，含义如下：
xx-small 极小
x-small 较小
small 小
medium 中
large 大
x-large 很大
xx-large 极大
larger 较大，相比父对象
smaller 较小，相比父对象
pt 点，1/72英寸
px 像素
in 英寸
% 相对父对象的尺寸比例
3. font-style:normal/italic/oblique 设置斜体效果
normal为正常效果，italic为斜体，oblique为扁斜体
4. font-weight:字体的粗度 设置字重
100~900 取100的倍数，且数值越小，字体越细
normal 正常字体效果
bold 加粗字体，与700基本相同
bolder 特粗字体，于900相同
lighter 细字体，相对默认字体更细一些
5. font-variant:normal/small-caps 设置英文字体的大小写
normal为正常显示，small-caps将所有字母以大写方式显示
6. font:字体属性取值 设置字体属性
这是一个复合属性，结合了前面字体属性的所有值，各个属性间通过空格隔开，设置属性顺序为斜体设置、英文大小写设置、粗细设置、字号设置、字体设置。
7. text-align:left/right/center/justify 设置文本的水平对齐方式
left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)
8. vertical-align:baseline/sub/super/top/bottom/text-top/middle/text-bottom/百分比 设置文本垂直对齐方式
baseline 同上级元素的基线对齐
sub 以上级元素的下标显示
super 以上级元素的上标显示
top 和同行元素中最高元素上端对齐
bottom 和同行元素中最低元素下端对齐
text-top 和上级元素的文本向上对齐
middle 和上级元素高度加上当前元素高度的一半对齐
text-bottom 和上级元素的文本向下对齐
百分比 相对于元素行高属性的百分比，即上级元素基线上的相对百分比
9. direction:ltr/rtl/inherit 设置文字排版方向
Unicode-bidi:normal/bidi-override/embed 设置双向法则的嵌入级别
ltr 从左到右 rtl 从右稻作 inherit表示文本的排版方向不可继承
bidi-override 严格按照direction属性值排版，忽略隐式双向法则
embed 对象打开附加的嵌入层，将direction属性值指定给嵌入层，在对象内部进行隐式排版
注：双向法则是自动翻转嵌入字符顺序，依照他们固有的方向流动。
对这段话我一直不能理解，这里只是做了一个机械的录入工作，有待进一步的理解！
10. wirtting-mode:tb-rl/lr-tb 设置元素布局方式
tb-rl 文字先从上到下排列，然后从右到左
lr-tb 文字先从左到右排列，然后从上到下
11. word-break:normal/break-all/keep-all
normal 正常显示
break-all 允许任意字内断开（对非亚洲语言）
keep-all 不允许断开（对非亚洲语言为一个单词，对亚洲语言为一句话）
12. line-break:normal/strict 设置日文文本换行
normal 默认换行规则
strict 强制日文文本换行规则
13. word-wrap:normal/break-word 设置超过容器边界时的换行
normal 正常默认形式，自动换行
break-word 强制换行
14. text-decoration:underline/overline/line-through/blink/none 设置文字的修饰
underline 文字带有下划线
overline 文字带有上划线
line-through 文字带有删除线
blink 文字带有闪烁效果，只Netscape支持
none 不设置任何修饰
15. text-underline-position:below/above 设置划线位置
below 文本带下划线
above 文本带上划线
16. word-spacing:normal/长度值 设置文字（单词）间间隔
normal为默认文字间隔，或设置间隔数，如果为负数则为默认间隔上缩小
17. letter-spacing:normal/长度值 设置字符间间隔
normal为默认字符间隔，或设置间隔数，如果为负数则为默认间隔上缩小
18. text-transform:none/capitalize/uppercase/lowercase 设置文本大小写转换
none 正常显示
capitalize 将每个英文单词的首字母转换为大写
uppercase 将所有英文字母转换为大写显示
lowercase 将所有英文字母转换为小写显示
19. text-ident:长度值 设置文本缩进
设置文本缩进的长度值
20. line-height:高度值 设置文本行的高度（不是文本的高度）
高度值可以是百分比（基于字体的相对高度），数值加单位
21. white-space:normal/per/nowrap 设置空格换行的处理方式
normal 默认效果
pre 用等宽字体预先格式化的文本
nowrap 强制在一行内显示所有文本
22. color:颜色值/颜色码 设置颜色
颜色可以是预定义的文本，也可以是#加6为的十六进制值
颜色和背景属性
1. background-color:颜色代码/颜色值 设置背景颜色
2. background-image:url(源文件地址) 设置背景图像
3. background-repeat:repeat/repeate-x/repeat-y/no-repeat 设置背景图像平铺属性
repeat 背景图像沿所有方向平铺
repeat-x 背景图像只沿x轴方向平铺
repeat-y 背景图像只沿y轴方向平铺
no-repeat 不平铺
4. background-attachment:scroll/fixed 设置背景图像的固定或是滚动
scroll 背景图像随页面滚动
fixed 背景图像不随页面滚动，同HTML中bgproperties标签
5. background-position:位置的具体值 设置背景图像的位置
百分比（x%y%） 起始位置与左上角占整个元素的比例，包括水平和垂直方向
绝对数值（x，y）起始位置的绝对坐标，包括横坐标和纵坐标
top 背景图像位于顶端，可同center一起使用，空格隔开
bottom 背景图像位于低端，可同center一起是使用，空格隔开
left 背景图像位于左端，可同center一起使用
right 背景图像位于右端，可同center一起使用
center 背景图像位于中部，可以为水平方向也可以是垂直方向
可以是百分比和数值一起使用。
6. background:取值 设置背景图像属性，复合值
顺序为url、平铺属性、图像固定滚动设置、图像位置
版面属性
1. border-top-style:线条样式
2. border-right-style: 线条样式
3. border-bottom-style: 线条样式
4. border-left-style: 线条样式
5. border-style: 线条样式
这些都是边框风格属性，用于表格、框架、层等带有边框属性的标签中，同时也可以将这些属性用在段落文字中，<p>标签中。边框线的样式可取如下值：
none 无边框
solid 实现边框
dotted 点线边框
dashed 虚线边框
double 双实现边框
groove 带立体效果的沟槽边框
ridge 突出脊行效果的边框
inset 内嵌一个立体的边框
outset 外嵌一个立体的边框
最后一个属性为复合属性，可以直接设子四个边框的风格，顺序为上、右、下、左。如果设置的值为一个数字表示所有边框；两个数字，前一个为上下边框，后一个为左右边框；三个数字，第一个用于上边框，第二个用于左右边框，最后一个用于下边框。
6. border-top-color:颜色代码/颜色值
7. border-right-color: 颜色代码/颜色值
8. border-bottom-color: 颜色代码/颜色值
9. border-left-color: 颜色代码/颜色值
10. border-color: 颜色代码/颜色值
设置边框的颜色
11. border-top-width:宽度值/表示宽度的词
12. border-right-width: 宽度值/表示宽度的词
13. border-bottom-width: 宽度值/表示宽度的词
14. border-left-width: 宽度值/表示宽度的词
15. border-width: 宽度值/表示宽度的词
设置个边框的宽度，其中表示宽度的词有thin（细边框）、medium（正常边框）、thick（粗边框）等。
16. border-top:边框的各属性
17. border-right: 边框的各属性
18. border-bottom: 边框的各属性
19. border-left: 边框的各属性
20. border: 边框的各属性
设置边框的各个属性，顺序为宽度、风格、颜色。
对border属性，设置边框风格是必须的，即使是要设置默认的solid属性，否则可能导致不能正常显示边框。
这些边框的各属性都只设置一个值，如果设置了多个值，则取最后一个值。
21. 在框架中能使用的边框属性有：border-style、border，其他取值方式同上。
22. border-collapse:separate/collapse（只针对表格）
separate为默认值，即表格边框和单元格边框不合并
collapse表示表格边框和单元格边框合并
23. margin-top:距离值
24. margin-bottom: 距离值
25. margin-left: 距离值
26. margin-right: 距离值
27. margin: 各个方向距离值
设置边距值，边距值是只元素于父容器的相对位置
距离值可以是百分比也可以是数字加单位。对margin属性，如果为1个值，则作用域4个方向；2个值，则作用于上下和左右方向；3个值，第1个为上边距，第2个为左右边距，第3个为下边距。
28. padding-top:距离值
29. padding-bottom: 距离值
30. padding-left: 距离值
31. padding-right: 距离值
32. padding: 各个方向的补白距离值
设置补白距离值，补白距离值是指元素中内容和元素容器的相对位置。
其他值同元素边距。
区块属性
区块属性也为容器属性，指能容纳页面元素的元素，如层、表格等。区块属性包括对象的定位属性、大小属性、元素布局属性等。
1. position:absolute/relative 设置定位方式
Absolute 绝对定位
Relative 相对定位
2. top:距离值
3. right: 距离值
4. bottom: 距离值
5. left: 距离值
设置到父容器边框的距离。
这些属性同position属性一起使用，首先定义定位方式。距离值为数字加单位的值。
6. z-index:顺序号
设置层叠顺序，1表示显示在最上方，数字越大位于越底层。
7. float:left/right/none
设置浮动属性，一般设置是否允许文字显示在图像周围。
left为该元素浮动在其他元素的左侧
right表示改元素浮动在其他元素的右侧
8. clear:none/left/right/both
同float一样设置浮动属性，但同float属性刚好想法。
left为该元素左侧不能有浮动对象
right为该元素右侧不能有浮动对象
none表示两边都可以有浮动对象，即不限制
both表示两边都不能有浮动对象，即限制所有。
9. clip:auto/rect(区域的数值) 设置裁剪区
auto表示默认显示效果，区域数值为四个用空格隔开的数值，依次为上右下左确定一个矩形，任何一个值都可以用auto代替，表示此边不能被裁剪。
只有position为absolute时该属性才生效。
10. overflow:visible/auto/hidden/scroll
超出容器方位时的处理方式。
visible 即使超出了范围也完整显示
auto 自动根据情况显示滚动条
hidden 裁剪超出范围的内容
scroll 显示滚动条
11. overflow:visible/auto/hidden/scroll 设置水平方向超出范围的处理方式
12. overflow:visible/auto/hidden/scroll 设置垂直方向超出范围的处理方式
13. visible:inherit/visible/hidden
设块区域的可见属性。
inherit 继承父层的可见属性
visible 该层可见
hidden 该层不可见
14. width:宽度值
15. height:高度值
设置元素的款高。
Filter滤镜属性
1. filter:alpha(opacity=透明等级,finishopacity=结束点透明等级,style=透明区域形状,startx=起始点横坐标,starty=起始点纵坐标,finishx=结束点横坐标,finishy=结束点纵坐标)
设置透明效果
透明等级为0~100，0为完全透明，100为完全不透明
透明区域形状用数字表示，0为统一形状，1为线型，2为放射型，3为长方形
2. filter:blur(add=印象效果，direction=模糊方向，strength=模糊强度)
设置动感模糊效果，产生一种快速移动的效果
add为布尔型，true表示将图像改为印象派的模糊效果。
direction表示模糊方向，0表示垂直向上，每45递增，且只能为45的倍数
strength设置模糊强度，默认值为5
3. filter:chroma(color=颜色)
设置对颜色进行透明处理
一般用于创建特效文字。
4. filter:dropshadow(color=阴影的颜色，offx=水平偏移，offy=垂直偏移，positive=透明元素的阴影)
offx、offy设置阴影对于元素来说的水平、垂直偏移
positive设置是否为透明元素创建阴影，1为不为透明元素创建阴影，反之。
5. filter:shadow(color=阴影颜色，direction=方向)
设置渐变阴影效果。
direction中0表示垂直想上，以后每45为单位递增，且只能是45的倍数
6. filter:flipH
设置水平翻转
7. filter:flipV
设置垂直翻转
8. filter:glow(color=光的颜色，strength=发光强度)
设置发光效果
strength为1~255，值越大，发光范围也越大
9. filter:gray
设置灰度处理
10. filter:invert
设置反相处理
11. filter:xray
设置X光片效果
12. filter:mask(color=遮罩颜色)
设置遮罩效果
13. filter:wave(add=打乱对象，freq=频率，lightstrength=光强度，phase=波的偏移量，strength=强度)
设置波形滤镜
add true为把对象按垂直波形样式打乱
freq 波的频率，即对象上产生完整波的数量
lightstrength 波形的光影强度，即光照的亮度。0~100，越大，图像的光影强度越大
phase 正弦波的偏移量，即波在垂直方向上的移动
strength 设置波的强度，即产生波形的振幅大小
其他属性
1. list-style-type:disc/circle/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha/none
设置列表符号
disc 实心圆形，无序列表
circle 空心圆形，无序列表
square 实心方形，无序列表
decimal 阿拉伯数字，有序列表
lower-roman 小写罗马数字，有序列表
upper-roman 大写罗马数字，有序列表
lower-alpha 小写英文字母，有序列表
upper-alpha 大写英文字母，有序列表
none 不采用项目符号
2. list-style-image:url(源文件地址)
设置图片项目符号
3. list-style-position:outside/inside
设置列表缩进
outside为列表中文字缩进
inside为列表中文字不缩进
4. list-style:列表各个属性
设置列表属性值，是一个复合属性
顺序为图像符号、缩进属性以及列表符号的顺序
5. cursor:crosshair/default/hand/move/help/wait/text/w-resize/s-resize/n-resize/e-resize/sw-resize/se-resize/nw-resize
设置贯标属性
crosshair 十字形
default 系统默认效果，即箭头
hand 链接状态，手型光标
move 移动状态，带箭头的十字形
help 帮助状态，箭头加问好
wait 等待状态，漏斗形
text 文字编辑状态，I型光标
w-resize 水平双箭头
s-resize 垂直双箭头
n-resize 垂直双箭头
e-resize 水平双箭头
ne-resize 斜向右上-左下方向的双箭头
sw-resize 斜向右上-左下方向的双箭头
se-resize 斜向右下-左上方向的双箭头
nw-resize 斜向右下-左上方向的双箭头
6. scrollbar-face-color:颜色值
设置滚动条表面颜色
7. scrollbar-highlight-color:颜色值
设置滚动条两边颜色
8. scrollbar-shadow-color:颜色值
设置滚动条暗边颜色
9. scrollbar-arrow-color:颜色值
设置滚动条方向箭头的颜色
10. scrollbar-base-color:颜色值
设置滚动条基本颜色，包括箭头颜色和边框颜色等
附件1
长度值：包括数字值和单位，单位有pt（点，1/72英寸）、px（像素）、in（英寸）
